fixed contact page
This commit is contained in:
parent
c382dd9969
commit
899f94d4d2
@ -13,113 +13,6 @@ interface FormState {
|
|||||||
submitted?: boolean;
|
submitted?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Contact({ data }: PageProps<FormState>) {
|
|
||||||
return (
|
|
||||||
<div class="max-w-md mx-auto p-6 bg-[#313244] rounded-lg shadow-md">
|
|
||||||
<Head>
|
|
||||||
<title>Contact Us</title>
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<h1 class="text-2xl font-bold mb-6 text-center">Contact Form</h1>
|
|
||||||
|
|
||||||
{/* Check if form was successfully submitted */}
|
|
||||||
{data?.submitted && (
|
|
||||||
<div
|
|
||||||
class="bg-[#a6e3a1] text-[#cdd6f4] px-4 py-3 rounded relative"
|
|
||||||
role="alert"
|
|
||||||
>
|
|
||||||
Your message has been sent successfully!
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<form method="POST" class="space-y-4">
|
|
||||||
{/* Name Input */}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="name"
|
|
||||||
class="block text-[#cdd6f4] text-sm font-bold mb-2"
|
|
||||||
>
|
|
||||||
Name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
required
|
|
||||||
placeholder="Your Name"
|
|
||||||
value={data?.name || ""}
|
|
||||||
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
|
|
||||||
${data?.errors?.name ? "border-red-500" : "border-gray-300"}`}
|
|
||||||
/>
|
|
||||||
{data?.errors?.name && (
|
|
||||||
<p class="text-red-500 text-xs italic mt-1">{data.errors.name}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Email Input */}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="email"
|
|
||||||
class="block text-[#cdd6f4] text-sm font-bold mb-2"
|
|
||||||
>
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
required
|
|
||||||
placeholder="your@email.com"
|
|
||||||
value={data?.email || ""}
|
|
||||||
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
|
|
||||||
${data?.errors?.email ? "border-red-500" : "border-gray-300"}`}
|
|
||||||
/>
|
|
||||||
{data?.errors?.email && (
|
|
||||||
<p class="text-red-500 text-xs italic mt-1">{data.errors.email}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Message Textarea */}
|
|
||||||
<div>
|
|
||||||
<label
|
|
||||||
htmlFor="message"
|
|
||||||
class="block text-[#cdd6f4] text-sm font-bold mb-2"
|
|
||||||
>
|
|
||||||
Message
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="message"
|
|
||||||
name="message"
|
|
||||||
required
|
|
||||||
placeholder="Write your message here..."
|
|
||||||
rows={4}
|
|
||||||
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
|
|
||||||
${data?.errors?.message ? "border-red-500" : "border-gray-300"}`}
|
|
||||||
>
|
|
||||||
{data?.message || ""}
|
|
||||||
</textarea>
|
|
||||||
{data?.errors?.message && (
|
|
||||||
<p class="text-red-500 text-xs italic mt-1">
|
|
||||||
{data.errors.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Submit Button */}
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="w-full bg-[#89b4fa] text-[#cdd6f4] py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
Send Message
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Server-side form handling
|
|
||||||
export const handler: Handlers = {
|
export const handler: Handlers = {
|
||||||
GET(_, ctx) {
|
GET(_, ctx) {
|
||||||
return ctx.render({});
|
return ctx.render({});
|
||||||
@ -169,3 +62,117 @@ export const handler: Handlers = {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default function Contact({ data }: PageProps<FormState>) {
|
||||||
|
return (
|
||||||
|
<div class="bg-[#313244] min-h-screen">
|
||||||
|
<div class="px-4 py-8 mx-auto p-6 flex flex-col bg-[#313244] shadow-md min-h-screen w-full md:max-w-md">
|
||||||
|
<Head>
|
||||||
|
<title>Contact</title>
|
||||||
|
</Head>
|
||||||
|
|
||||||
|
<h1 class="text-3xl text-white font-bold uppercase text-center">
|
||||||
|
Contact
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Check if form was successfully submitted */}
|
||||||
|
{data?.submitted && (
|
||||||
|
<div
|
||||||
|
class="bg-[#a6e3a1] text-[#313244] px-4 py-3 rounded relative"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
Your message has been sent successfully!
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form method="POST" class="space-y-4">
|
||||||
|
{/* Name Input */}
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
class="block text-[#cdd6f4] text-sm font-bold mb-2"
|
||||||
|
>
|
||||||
|
Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
required
|
||||||
|
placeholder="Your Name"
|
||||||
|
value={data?.name || ""}
|
||||||
|
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||||
|
${data?.errors?.name ? "border-[#f38ba8]" : "border-[#313244]"}`}
|
||||||
|
/>
|
||||||
|
{data?.errors?.name && (
|
||||||
|
<p class="text-[#f38ba8] text-xs italic mt-1">
|
||||||
|
{data.errors.name}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email Input */}
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="email"
|
||||||
|
class="block text-[#cdd6f4] text-sm font-bold mb-2"
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
required
|
||||||
|
placeholder="your@email.com"
|
||||||
|
value={data?.email || ""}
|
||||||
|
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||||
|
${data?.errors?.email ? "border-[#f38ba8]" : "border-[#313244]"}`}
|
||||||
|
/>
|
||||||
|
{data?.errors?.email && (
|
||||||
|
<p class="text-red-500 text-xs italic mt-1">
|
||||||
|
{data.errors.email}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Textarea */}
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="message"
|
||||||
|
class="block text-[#cdd6f4] text-sm font-bold mb-2"
|
||||||
|
>
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
name="message"
|
||||||
|
required
|
||||||
|
placeholder="Write your message here..."
|
||||||
|
rows={4}
|
||||||
|
class={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||||
|
${data?.errors?.message ? "border-red-500" : "border-gray-300"}`}
|
||||||
|
>
|
||||||
|
{data?.message || ""}
|
||||||
|
</textarea>
|
||||||
|
{data?.errors?.message && (
|
||||||
|
<p class="text-[#f38ba8] text-xs italic mt-1">
|
||||||
|
{data.errors.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Submit Button */}
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full bg-[#89b4fa] text-[#313244] py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user