82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
|
|
interface ContactSplitFormProps {
|
|
tag: string;
|
|
title: string;
|
|
description: string;
|
|
formFields?: Array<{ name: string; label: string; type: string; required?: boolean }>;
|
|
buttonText?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
|
|
tag,
|
|
title,
|
|
description,
|
|
formFields = [
|
|
{ name: "name", label: "Name", type: "text", required: true },
|
|
{ name: "email", label: "Email", type: "email", required: true },
|
|
{ name: "message", label: "Message", type: "textarea", required: true },
|
|
],
|
|
buttonText = "Send", className = ""}) => {
|
|
const [formData, setFormData] = useState<Record<string, string>>({});
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
console.log("Form submitted:", formData);
|
|
setFormData({});
|
|
};
|
|
|
|
return (
|
|
<section className={`py-20 px-4 ${className}`}>
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="mb-4 text-sm font-semibold text-blue-600">{tag}</div>
|
|
<h2 className="text-3xl font-bold mb-4">{title}</h2>
|
|
<p className="text-gray-600 mb-8">{description}</p>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{formFields.map((field) => (
|
|
<div key={field.name}>
|
|
<label className="block text-sm font-medium mb-2">{field.label}</label>
|
|
{field.type === "textarea" ? (
|
|
<textarea
|
|
name={field.name}
|
|
value={formData[field.name] || ""}
|
|
onChange={handleChange}
|
|
required={field.required}
|
|
className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
rows={4}
|
|
/>
|
|
) : (
|
|
<input
|
|
type={field.type}
|
|
name={field.name}
|
|
value={formData[field.name] || ""}
|
|
onChange={handleChange}
|
|
required={field.required}
|
|
className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
<button
|
|
type="submit"
|
|
className="w-full px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
{buttonText}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ContactSplitForm;
|