AmirReza Jamali
71094f6c86
This commit refactors the contact form for better reusability and moves it from the global footer to a dedicated section on the homepage. Additionally, it enhances the user experience on the 404 page. Key changes: - The `ContactUsForm` component is now configurable with props for grid layout (`columnsPerRow`) and button text, making it more versatile. - The contact form has been removed from the shared footer in the main layout and is now explicitly included only on the homepage. - The 404 "Not Found" page has been updated to include a direct link to the homepage for easier navigation. - Minor style adjustments were made to the 404 page layout and input field padding for improved visual consistency.
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
"use client";
|
|
import { HTMLInputTypeAttribute, useState } from "react";
|
|
import { RegisterOptions, UseFormRegister } from "react-hook-form";
|
|
|
|
function InputGroup({
|
|
id,
|
|
label,
|
|
register,
|
|
type,
|
|
validation,
|
|
error,
|
|
}: {
|
|
label: string;
|
|
id: string;
|
|
register: UseFormRegister<any>;
|
|
type: HTMLInputTypeAttribute;
|
|
validation?: RegisterOptions;
|
|
error?: string;
|
|
}) {
|
|
const [isFocused, setIsFocused] = useState(false);
|
|
const [hasValue, setHasValue] = useState(false);
|
|
|
|
const { onChange, ...rest } = register(id, validation);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setHasValue(e.target.value !== "");
|
|
onChange(e);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="relative w-full my-3">
|
|
<input
|
|
type={type}
|
|
className={`border ${
|
|
error
|
|
? "border-red-500"
|
|
: isFocused
|
|
? "border-(--primary)"
|
|
: "border-gray-200"
|
|
} p-2 py-3 rounded-lg w-full outline-none`}
|
|
id={id}
|
|
{...rest}
|
|
onChange={handleChange}
|
|
onFocus={() => setIsFocused(true)}
|
|
onBlur={() => setIsFocused(false)}
|
|
/>
|
|
<label
|
|
htmlFor={id}
|
|
className={`absolute left-3 transition-all duration-200 pointer-events-none bg-white px-1 ${
|
|
isFocused || hasValue
|
|
? "-top-2 text-xs text-gray-600"
|
|
: "top-1/2 -translate-y-1/2 text-base text-gray-400"
|
|
}`}>
|
|
{label}
|
|
<span className="text-red-400">*</span>
|
|
</label>
|
|
</div>
|
|
{error && <p className="text-red-500 text-sm my-3">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default InputGroup;
|