74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export function ContactForm() {
|
|
const [sent, setSent] = useState(false);
|
|
|
|
return (
|
|
<form
|
|
className="rounded-2xl bg-zinc-50 p-5 md:p-8"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
setSent(true);
|
|
}}
|
|
>
|
|
<h2 className="text-xl md:text-2xl font-extrabold mb-1">نظرتون با ما به اشتراک بزارید</h2>
|
|
<p dir="ltr" className="mb-6 font-carter text-[10px] tracking-[0.35em] text-zinc-400 uppercase">
|
|
SEND MESSAGE
|
|
</p>
|
|
|
|
{sent ? (
|
|
<p className="rounded-xl bg-white px-4 py-6 text-sm leading-7 text-zinc-600">
|
|
پیام شما ثبت شد. بهزودی از طریق تماس یا پیام پاسخ میدهیم.
|
|
</p>
|
|
) : (
|
|
<div className="grid gap-3">
|
|
<input
|
|
required
|
|
name="name"
|
|
type="text"
|
|
placeholder="نام و نام خانوادگی"
|
|
className="w-full rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
|
|
/>
|
|
<input
|
|
required
|
|
name="email"
|
|
type="email"
|
|
placeholder="ایمیل"
|
|
className="w-full rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
|
|
/>
|
|
<input
|
|
required
|
|
name="cell_number"
|
|
type="tel"
|
|
placeholder="شماره همراه"
|
|
className="w-full rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
|
|
dir="ltr"
|
|
/>
|
|
<input
|
|
required
|
|
name="title"
|
|
type="text"
|
|
placeholder="موضوع"
|
|
className="w-full rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
|
|
/>
|
|
<textarea
|
|
required
|
|
name="message"
|
|
placeholder="پیام"
|
|
rows={6}
|
|
className="w-full resize-y rounded-xl border border-black/5 bg-white px-4 py-3 text-sm outline-none focus:border-brand"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="mt-2 inline-flex items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-bold text-white hover:bg-[#e01e1e]"
|
|
>
|
|
ارسال پیام
|
|
</button>
|
|
</div>
|
|
)}
|
|
</form>
|
|
);
|
|
}
|