7b4b955c99
- Implemented a contact form with validation and submission functionality. - Added a dummy API endpoint for contact form submissions. - Integrated Axios for API requests and error handling. - Updated UI components for input handling and error display. - Added toast notifications for user feedback on form submission. - Included WhatsApp bubble component for enhanced user interaction. - Updated layout to include new contact page and components. - Added Docker support for development and production environments. - Created Makefile for easier deployment and management of Docker containers.
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import TextInput from "./TextInput";
|
|
import TextareaInput from "./TextAreaInput";
|
|
import type { FieldConfig, FormErrors, FormValues } from "./types";
|
|
|
|
const colClasses: Record<number, string> = {
|
|
1: "md:grid-cols-1",
|
|
2: "md:grid-cols-2",
|
|
3: "md:grid-cols-3",
|
|
4: "md:grid-cols-4",
|
|
};
|
|
|
|
export default function InputGroup({
|
|
fields,
|
|
formData,
|
|
onChange,
|
|
cols = 1,
|
|
formError,
|
|
}: {
|
|
fields: FieldConfig[];
|
|
formData: FormValues;
|
|
onChange: (value: string, name: string) => void;
|
|
cols?: 1 | 2 | 3 | 4;
|
|
formError?: FormErrors;
|
|
}) {
|
|
return (
|
|
<div className={`grid grid-cols-1 ${colClasses[cols] || "md:grid-cols-1"} gap-4 md:gap-6`}>
|
|
{fields.map((field, idx) => {
|
|
const error = formError?.[field.name];
|
|
|
|
switch (field.type) {
|
|
case "text":
|
|
case "email":
|
|
return <TextInput key={idx} {...field} value={formData[field.name]} onChange={(value: string) => onChange(value, field.name)} isError={!!error} textFoot={error} />;
|
|
case "textarea":
|
|
return <TextareaInput key={idx} {...field} value={formData[field.name]} onChange={(value: string) => onChange(value, field.name)} isError={!!error} textFoot={error} />;
|
|
default:
|
|
return null;
|
|
}
|
|
})}
|
|
</div>
|
|
);
|
|
}
|