84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
import { ContactTurnstile } from "@/components/site/contact-turnstile";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import type { PublicContactProtectionSettings } from "@/lib/contact-protection";
|
|
|
|
type ContactFormCopy = {
|
|
name: string;
|
|
email: string;
|
|
phone: string;
|
|
company: string;
|
|
message: string;
|
|
note: string;
|
|
submit: string;
|
|
preview: string;
|
|
};
|
|
|
|
type ContactFormProps = {
|
|
action: (formData: FormData) => Promise<void>;
|
|
locale: string;
|
|
previewHref: string;
|
|
copy: ContactFormCopy;
|
|
protection: PublicContactProtectionSettings;
|
|
};
|
|
|
|
export function ContactForm({
|
|
action,
|
|
locale,
|
|
previewHref,
|
|
copy,
|
|
protection,
|
|
}: ContactFormProps) {
|
|
return (
|
|
<form action={action} className="grid gap-5">
|
|
<input type="hidden" name="locale" value={locale} />
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<Label className="grid gap-2">
|
|
{copy.name}
|
|
<Input type="text" name="name" placeholder={copy.name} required />
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
{copy.email}
|
|
<Input type="email" name="email" placeholder={copy.email} required />
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
{copy.phone}
|
|
<Input type="tel" name="phone" placeholder={copy.phone} />
|
|
</Label>
|
|
|
|
<Label className="grid gap-2">
|
|
{copy.company}
|
|
<Input type="text" name="company" placeholder={copy.company} />
|
|
</Label>
|
|
</div>
|
|
|
|
<Label className="grid gap-2">
|
|
{copy.message}
|
|
<Textarea rows={7} name="message" placeholder={copy.message} required minLength={10} />
|
|
</Label>
|
|
|
|
<p className="text-sm text-muted-foreground">{copy.note}</p>
|
|
|
|
{protection.turnstile.enabled ? (
|
|
<ContactTurnstile siteKey={protection.turnstile.siteKey} />
|
|
) : null}
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button type="submit">{copy.submit}</Button>
|
|
<Button asChild variant="outline">
|
|
<Link href={previewHref}>{copy.preview}</Link>
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|