wymiller/my-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed contact page

Browse Source
This commit is contained in:
Wyatt J. Miller 2024-12-02 23:34:55 -05:00
parent c382dd9969
commit 899f94d4d2
1 changed files with 114 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
frontend/routes/contact/index.tsx
View File

@ -13,113 +13,6 @@ interface FormState {
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 = {
GET(_, ctx) {
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>
);
}