Add src/app/reservations/page.tsx

2026-04-16 11:21:45 +00:00
parent 223d0bdc2d
commit 6d2693909f
1 changed files with 55 additions and 0 deletions
--- a/src/app/reservations/page.tsx
+++ b/src/app/reservations/page.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ReactLenis from "lenis/react";
+
+export default function ReservationsPage() {
+  const [formData, setFormData] = useState({ name: "", date: "", guests: "" });
+  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData.name || !formData.date || !formData.guests) {
+      setStatus("error");
+      return;
+    }
+    localStorage.setItem("booking", JSON.stringify(formData));
+    setStatus("success");
+  };
+
+  return (
+    <ThemeProvider>
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+          brandName="Epicure Buffet"
+          navItems={[{ name: "Home", id: "/" }, { name: "Reservations", id: "/reservations" }]}
+        />
+        <main className="min-h-screen pt-32 flex flex-col items-center justify-center p-6">
+          <h1 className="text-4xl font-bold mb-8">Book Your Table</h1>
+          <form onSubmit={handleSubmit} className="bg-card p-8 rounded-xl shadow-lg w-full max-w-md space-y-4">
+            <input 
+              type="text" placeholder="Name" 
+              className="w-full p-2 border rounded"
+              onChange={(e) => setFormData({...formData, name: e.target.value})}
+            />
+            <input 
+              type="date" 
+              className="w-full p-2 border rounded"
+              onChange={(e) => setFormData({...formData, date: e.target.value})}
+            />
+            <input 
+              type="number" placeholder="Guests" 
+              className="w-full p-2 border rounded"
+              onChange={(e) => setFormData({...formData, guests: e.target.value})}
+            />
+            <button type="submit" className="w-full bg-primary-cta text-white py-2 rounded">Confirm Booking</button>
+          </form>
+          {status === "success" && <p className="mt-4 text-green-600">Booking successful!</p>}
+          {status === "error" && <p className="mt-4 text-red-600">Please fill in all fields.</p>}
+        </main>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}