@titas_mallick/wedding-site-gen 1.1.0 → 2.0.1

package/app/song-requests/page.tsx

@@ -2,41 +2,35 @@
 
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { 
-  Card, 
-  CardBody, 
-  Input, 
-  Button, 
-  addToast, 
-  Divider, 
+import {
+  Card,
+  CardBody,
+  Input,
+  Button,
+  addToast,
+  Divider,
   Spinner,
-  Table,
-  TableHeader,
-  TableColumn,
-  TableBody,
-  TableRow,
-  TableCell,
   Chip,
   Tooltip,
   Modal,
   ModalContent,
-  ModalHeader,
   ModalBody,
-  ModalFooter
+  ModalFooter,
 } from "@heroui/react";
-import { 
-  getFirestore, 
-  collection, 
-  addDoc, 
-  serverTimestamp, 
-  onSnapshot, 
-  query, 
-  orderBy, 
-  deleteDoc, 
-  doc, 
-  updateDoc 
+import {
+  getFirestore,
+  collection,
+  addDoc,
+  serverTimestamp,
+  onSnapshot,
+  query,
+  orderBy,
+  deleteDoc,
+  doc,
+  updateDoc,
 } from "firebase/firestore";
 import { getAuth, onAuthStateChanged } from "firebase/auth";
+
 import firebaseApp from "@/config/firebase";
 import { fontCursive, fontSans, fontMono } from "@/config/fonts";
 import { HeartFilledIcon } from "@/components/icons";
@@ -45,7 +39,12 @@ const db = getFirestore(firebaseApp());
 const auth = getAuth(firebaseApp());
 
 export default function SongRequestsPage() {
-  const [formData, setFormData] = useState({ name: "", song: "", artist: "", captcha: "" });
+  const [formData, setFormData] = useState({
+    name: "",
+    song: "",
+    artist: "",
+    captcha: "",
+  });
   const [loading, setLoading] = useState(false);
   const [user, setUser] = useState<any>(null);
   const [requests, setRequests] = useState<any[]>([]);
@@ -59,19 +58,25 @@ export default function SongRequestsPage() {
     const unsubscribeAuth = onAuthStateChanged(auth, (currentUser) => {
       setUser(currentUser);
     });
+
     return () => unsubscribeAuth();
   }, []);
 
   useEffect(() => {
-    const q = query(collection(db, "song_requests"), orderBy("createdAt", "desc"));
+    const q = query(
+      collection(db, "song_requests"),
+      orderBy("createdAt", "desc"),
+    );
     const unsubscribeData = onSnapshot(q, (snapshot) => {
       const data = snapshot.docs.map((doc) => ({
         id: doc.id,
         ...doc.data(),
       }));
+
       setRequests(data);
       setListLoading(false);
     });
+
     return () => unsubscribeData();
   }, []);
 
@@ -84,6 +89,7 @@ export default function SongRequestsPage() {
         description: "Please answer the question correctly (Hint: 10 years!).",
         color: "warning",
       });
+
       return;
     }
 
@@ -99,7 +105,8 @@ export default function SongRequestsPage() {
       setFormData({ name: "", song: "", artist: "", captcha: "" });
       addToast({
         title: "Song Requested!",
-        description: "We'll try our best to play your favorite track at the Reception.",
+        description:
+          "We'll try our best to play your favorite track at the Reception.",
         color: "success",
       });
     } catch (err) {
@@ -123,7 +130,11 @@ export default function SongRequestsPage() {
     if (!requestToDelete) return;
     try {
       await deleteDoc(doc(db, "song_requests", requestToDelete));
-      addToast({ title: "Deleted", description: "Request removed.", color: "success" });
+      addToast({
+        title: "Deleted",
+        description: "Request removed.",
+        color: "success",
+      });
     } catch (err) {
       addToast({ title: "Error", color: "danger" });
     } finally {
@@ -135,7 +146,7 @@ export default function SongRequestsPage() {
   const toggleStatus = async (id: string, currentStatus: string) => {
     try {
       await updateDoc(doc(db, "song_requests", id), {
-        status: currentStatus === "played" ? "pending" : "played"
+        status: currentStatus === "played" ? "pending" : "played",
       });
       addToast({ title: "Status Updated", color: "success" });
     } catch (err) {
@@ -143,103 +154,133 @@ export default function SongRequestsPage() {
     }
   };
 
-  const isAdmin = user?.email === "titas@titas.titas";
+  const isAdmin = user?.email === process.env.NEXT_PUBLIC_ADMIN_EMAIL;
 
   return (
     <div className="min-h-screen pb-20 pt-10 px-4 max-w-6xl mx-auto flex flex-col items-center">
       {/* Header */}
-      <motion.div 
-        initial={{ opacity: 0, scale: 0.95 }}
+      <motion.div
         animate={{ opacity: 1, scale: 1 }}
         className="text-center space-y-6 mb-12"
+        initial={{ opacity: 0, scale: 0.95 }}
       >
         <div className="bg-wedding-pink-100 dark:bg-wedding-pink-900/30 p-4 rounded-full w-fit mx-auto">
-           <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-wedding-pink-500">
-              <path d="M9 18V5l12-2v13"></path>
-              <circle cx="6" cy="18" r="3"></circle>
-              <circle cx="18" cy="16" r="3"></circle>
-           </svg>
+          <svg
+            className="text-wedding-pink-500"
+            fill="none"
+            height="32"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="32"
+          >
+            <path d="M9 18V5l12-2v13" />
+            <circle cx="6" cy="18" r="3" />
+            <circle cx="18" cy="16" r="3" />
+          </svg>
         </div>
-        <h1 className={`${fontCursive.className} text-5xl md:text-7xl text-wedding-pink-600 dark:text-wedding-pink-400 py-2`}>
+        <h1
+          className={`${fontCursive.className} text-5xl md:text-7xl text-wedding-pink-600 dark:text-wedding-pink-400 py-2`}
+        >
           Reception Playlist
         </h1>
         <p className="text-default-500 max-w-xl mx-auto italic">
-          &quot;Music is the soul of our celebration. Tell us which song makes you want to hit the dance floor!&quot;
+          &quot;Music is the soul of our celebration. Tell us which song makes
+          you want to hit the dance floor!&quot;
         </p>
       </motion.div>
 
       <div className="grid lg:grid-cols-2 gap-12 w-full items-start">
         {/* Left: Request Form */}
         <Card className="bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border border-wedding-gold-200 dark:border-wedding-gold-800 shadow-2xl p-6 md:p-8 rounded-[40px]">
-          <h2 className={`${fontSans.className} text-2xl font-bold mb-6 text-default-800 dark:text-white`}>Request a Song</h2>
-          <form onSubmit={handleSubmit} className="space-y-6">
+          <h2
+            className={`${fontSans.className} text-2xl font-bold mb-6 text-default-800 dark:text-white`}
+          >
+            Request a Song
+          </h2>
+          <form className="space-y-6" onSubmit={handleSubmit}>
             <Input
               isRequired
-              label="Your Name"
-              labelPlacement="outside-top"
-              placeholder="Who are we dancing with?"
-              variant="bordered"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
               classNames={{
                 label: "text-wedding-pink-600 font-bold",
                 input: "outline-none",
-                inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14"
+                inputWrapper:
+                  "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14",
               }}
+              label="Your Name"
+              labelPlacement="outside-top"
+              placeholder="Who are we dancing with?"
+              value={formData.name}
+              variant="bordered"
+              onChange={(e) =>
+                setFormData({ ...formData, name: e.target.value })
+              }
             />
             <div className="grid md:grid-cols-2 gap-4">
               <Input
                 isRequired
+                classNames={{
+                  label: "text-wedding-pink-600 font-bold",
+                  input: "outline-none",
+                  inputWrapper:
+                    "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14",
+                }}
                 label="Song Title"
                 labelPlacement="outside-top"
                 placeholder="E.g. Kesariya"
-                variant="bordered"
                 value={formData.song}
-                onChange={(e) => setFormData({ ...formData, song: e.target.value })}
+                variant="bordered"
+                onChange={(e) =>
+                  setFormData({ ...formData, song: e.target.value })
+                }
+              />
+              <Input
                 classNames={{
                   label: "text-wedding-pink-600 font-bold",
                   input: "outline-none",
-                  inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14"
+                  inputWrapper:
+                    "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14",
                 }}
-              />
-              <Input
                 label="Artist (Optional)"
                 labelPlacement="outside-top"
                 placeholder="E.g. Arijit Singh"
-                variant="bordered"
                 value={formData.artist}
-                onChange={(e) => setFormData({ ...formData, artist: e.target.value })}
-                classNames={{
-                  label: "text-wedding-pink-600 font-bold",
-                  input: "outline-none",
-                  inputWrapper: "border-wedding-pink-100 focus-within:!border-wedding-pink-500 h-14"
-                }}
+                variant="bordered"
+                onChange={(e) =>
+                  setFormData({ ...formData, artist: e.target.value })
+                }
               />
             </div>
 
             <Divider className="opacity-50" />
 
             <div className="p-4 bg-wedding-pink-50 dark:bg-wedding-pink-900/10 rounded-2xl border border-wedding-pink-100 dark:border-wedding-pink-800/30">
-               <p className="text-[10px] font-bold text-wedding-pink-600 dark:text-wedding-pink-400 uppercase tracking-widest mb-2">Bot Protection</p>
-               <Input
+              <p className="text-[10px] font-bold text-wedding-pink-600 dark:text-wedding-pink-400 uppercase tracking-widest mb-2">
+                Bot Protection
+              </p>
+              <Input
                 isRequired
-                label="How many years have we been together?"
-                labelPlacement="outside-top"
-                placeholder="Answer in numbers"
-                variant="underlined"
-                value={formData.captcha}
-                onChange={(e) => setFormData({ ...formData, captcha: e.target.value })}
                 classNames={{
                   label: "text-default-600 text-xs",
                   input: "text-center font-bold text-xl outline-none",
                 }}
+                label="How many years have we been together?"
+                labelPlacement="outside-top"
+                placeholder="Answer in numbers"
+                value={formData.captcha}
+                variant="underlined"
+                onChange={(e) =>
+                  setFormData({ ...formData, captcha: e.target.value })
+                }
               />
             </div>
 
-            <Button 
-              type="submit"
-              isLoading={loading}
+            <Button
               className="w-full bg-gradient-to-r from-wedding-pink-500 to-wedding-gold-500 text-white font-black h-14 text-lg shadow-xl shadow-wedding-pink-500/20"
+              isLoading={loading}
+              type="submit"
             >
               Submit Song Request
             </Button>
@@ -249,51 +290,122 @@ export default function SongRequestsPage() {
         {/* Right: Requests Feed */}
         <div className="space-y-6">
           <div className="flex items-center justify-between px-2">
-            <h2 className={`${fontSans.className} text-2xl font-bold text-default-800 dark:text-white`}>The Queue</h2>
-            <Chip color="secondary" variant="flat" size="sm" className={fontMono.className}>
+            <h2
+              className={`${fontSans.className} text-2xl font-bold text-default-800 dark:text-white`}
+            >
+              The Queue
+            </h2>
+            <Chip
+              className={fontMono.className}
+              color="secondary"
+              size="sm"
+              variant="flat"
+            >
               {requests.length} Total
             </Chip>
           </div>
-          
+
           <div className="space-y-4 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
             {listLoading ? (
-              <div className="flex justify-center py-10"><Spinner color="danger" /></div>
+              <div className="flex justify-center py-10">
+                <Spinner color="danger" />
+              </div>
             ) : requests.length === 0 ? (
-              <p className="text-center py-10 text-default-400 italic font-medium bg-default-50 dark:bg-zinc-900/30 rounded-3xl border border-dashed border-default-200">The playlist is waiting for your touch!</p>
+              <p className="text-center py-10 text-default-400 italic font-medium bg-default-50 dark:bg-zinc-900/30 rounded-3xl border border-dashed border-default-200">
+                The playlist is waiting for your touch!
+              </p>
             ) : (
               <AnimatePresence>
                 {requests.map((item, i) => (
                   <motion.div
                     key={item.id}
-                    initial={{ opacity: 0, x: 20 }}
                     animate={{ opacity: 1, x: 0 }}
+                    initial={{ opacity: 0, x: 20 }}
                     transition={{ delay: i * 0.05 }}
                   >
-                    <Card className={`border ${item.status === 'played' ? 'bg-default-50/50 dark:bg-zinc-900/20 opacity-60' : 'bg-white dark:bg-zinc-900 shadow-lg'} transition-all`}>
+                    <Card
+                      className={`border ${item.status === "played" ? "bg-default-50/50 dark:bg-zinc-900/20 opacity-60" : "bg-white dark:bg-zinc-900 shadow-lg"} transition-all`}
+                    >
                       <CardBody className="p-4 flex flex-row items-center justify-between gap-4">
                         <div className="flex items-center gap-4 flex-1 overflow-hidden">
-                          <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${item.status === 'played' ? 'bg-green-100 text-green-600' : 'bg-wedding-pink-100 text-wedding-pink-600'}`}>
-                            {item.status === 'played' ? (
-                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <div
+                            className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${item.status === "played" ? "bg-green-100 text-green-600" : "bg-wedding-pink-100 text-wedding-pink-600"}`}
+                          >
+                            {item.status === "played" ? (
+                              <svg
+                                fill="none"
+                                height="20"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="3"
+                                viewBox="0 0 24 24"
+                                width="20"
+                              >
+                                <polyline points="20 6 9 17 4 12" />
+                              </svg>
                             ) : (
-                              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle></svg>
+                              <svg
+                                fill="none"
+                                height="20"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="2.5"
+                                viewBox="0 0 24 24"
+                                width="20"
+                              >
+                                <path d="M9 18V5l12-2v13" />
+                                <circle cx="6" cy="18" r="3" />
+                              </svg>
                             )}
                           </div>
                           <div className="flex flex-col overflow-hidden">
-                            <p className={`font-bold truncate ${item.status === 'played' ? 'line-through text-default-400' : 'text-default-800 dark:text-white'}`}>{item.song}</p>
-                            <p className="text-xs text-default-500 truncate italic">{item.artist || 'Unknown Artist'} • Requested by {item.name}</p>
+                            <p
+                              className={`font-bold truncate ${item.status === "played" ? "line-through text-default-400" : "text-default-800 dark:text-white"}`}
+                            >
+                              {item.song}
+                            </p>
+                            <p className="text-xs text-default-500 truncate italic">
+                              {item.artist || "Unknown Artist"} • Requested by{" "}
+                              {item.name}
+                            </p>
                           </div>
                         </div>
 
                         {isAdmin && (
                           <div className="flex gap-1">
-                            <Tooltip content={item.status === 'played' ? 'Mark Pending' : 'Mark Played'}>
-                              <Button isIconOnly size="sm" variant="flat" color={item.status === 'played' ? 'warning' : 'success'} onPress={() => toggleStatus(item.id, item.status)}>
-                                {item.status === 'played' ? '↺' : '✓'}
+                            <Tooltip
+                              content={
+                                item.status === "played"
+                                  ? "Mark Pending"
+                                  : "Mark Played"
+                              }
+                            >
+                              <Button
+                                isIconOnly
+                                color={
+                                  item.status === "played"
+                                    ? "warning"
+                                    : "success"
+                                }
+                                size="sm"
+                                variant="flat"
+                                onPress={() =>
+                                  toggleStatus(item.id, item.status)
+                                }
+                              >
+                                {item.status === "played" ? "↺" : "✓"}
                               </Button>
                             </Tooltip>
                             <Tooltip content="Delete">
-                              <Button isIconOnly size="sm" variant="flat" color="danger" onPress={() => handleDeleteClick(item.id)}>
+                              <Button
+                                isIconOnly
+                                color="danger"
+                                size="sm"
+                                variant="flat"
+                                onPress={() => handleDeleteClick(item.id)}
+                              >
                                 ✕
                               </Button>
                             </Tooltip>
@@ -310,38 +422,63 @@ export default function SongRequestsPage() {
       </div>
 
       <div className="mt-16 text-center text-default-400 space-y-2">
-         <HeartFilledIcon className="w-6 h-6 mx-auto text-wedding-pink-200" />
-         <p className={`${fontMono.className} text-[10px] uppercase tracking-widest`}>Let the music play</p>
+        <HeartFilledIcon className="w-6 h-6 mx-auto text-wedding-pink-200" />
+        <p
+          className={`${fontMono.className} text-[10px] uppercase tracking-widest`}
+        >
+          Let the music play
+        </p>
       </div>
 
       {/* Delete Confirmation Modal */}
-      <Modal 
-        isOpen={isDeleteModalOpen} 
-        onOpenChange={setIsDeleteModalOpen}
+      <Modal
         backdrop="blur"
-        size="xs"
         className="dark:bg-zinc-900 border border-default-100 dark:border-zinc-800"
+        isOpen={isDeleteModalOpen}
+        size="xs"
+        onOpenChange={setIsDeleteModalOpen}
       >
         <ModalContent>
           {(onClose) => (
             <>
               <ModalBody className="pt-8 pb-4 text-center space-y-4">
                 <div className="w-16 h-16 bg-danger-50 dark:bg-danger-900/20 rounded-full flex items-center justify-center mx-auto text-danger animate-bounce">
-                   <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <polyline points="3 6 5 6 21 6"></polyline>
-                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                   </svg>
+                  <svg
+                    fill="none"
+                    height="32"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                    width="32"
+                  >
+                    <polyline points="3 6 5 6 21 6" />
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                  </svg>
                 </div>
                 <div>
-                  <h3 className="text-xl font-bold text-default-900 dark:text-white">Delete Request?</h3>
-                  <p className="text-sm text-default-500 mt-2">Are you sure you want to remove this song from the queue?</p>
+                  <h3 className="text-xl font-bold text-default-900 dark:text-white">
+                    Delete Request?
+                  </h3>
+                  <p className="text-sm text-default-500 mt-2">
+                    Are you sure you want to remove this song from the queue?
+                  </p>
                 </div>
               </ModalBody>
               <ModalFooter className="flex-col gap-2 pb-8">
-                <Button color="danger" className="w-full font-bold h-12" onPress={handleConfirmDelete}>
+                <Button
+                  className="w-full font-bold h-12"
+                  color="danger"
+                  onPress={handleConfirmDelete}
+                >
                   Yes, Remove Request
                 </Button>
-                <Button variant="flat" className="w-full font-semibold h-12" onPress={onClose}>
+                <Button
+                  className="w-full font-semibold h-12"
+                  variant="flat"
+                  onPress={onClose}
+                >
                   Cancel
                 </Button>
               </ModalFooter>
@@ -351,4 +488,4 @@ export default function SongRequestsPage() {
       </Modal>
     </div>
   );
-}
+}

package/app/sukanya/page.tsx

@@ -17,7 +17,7 @@ export default function SukanyaPage() {
             <div className="relative w-72 h-72 md:w-96 md:h-96">
               <div className="absolute inset-0 bg-wedding-pink-200 dark:bg-wedding-pink-800 rounded-full blur-2xl opacity-50 transform translate-x-4 translate-y-4" />
               <Image
-                alt="Sukanya Saha"
+                alt="Bride"
                 className="rounded-full object-cover w-full h-full border-4 border-white dark:border-default-100 shadow-2xl z-10"
                 src="/bride.jpg"
               />
@@ -29,7 +29,7 @@ export default function SukanyaPage() {
             <h1
               className={`${fontCursive.className} text-6xl md:text-7xl text-wedding-pink-600 dark:text-wedding-pink-400`}
             >
-              Sukanya Saha
+              Bride Name
             </h1>
             <p
               className={`${fontMono.className} text-xl md:text-2xl text-default-600 dark:text-white font-medium`}
@@ -60,17 +60,13 @@ export default function SukanyaPage() {
           <div className="md:col-span-8 space-y-4 text-default-700 dark:text-white text-lg leading-relaxed">
             <p>
               I strive to foster curiosity, empathy, and excellence in the
-              classroom. My academic journey began at{" "}
-              <strong>Serampore Girls High School</strong> and continued with
-              Botany Honours at <strong>Raja Peary Mohan College</strong>. I
-              earned my Master&apos;s from{" "}
-              <strong>Lady Brabourne College</strong>, building a deep research
+              classroom. My academic journey began at a reputable girls' school and continued with
+              Botany Honours at college. I
+              earned my Master&apos;s from a leading women's college, building a deep research
               orientation.
             </p>
             <p>
-              Currently, I am a school teacher at{" "}
-              <strong>Rishra Narayana School</strong> and a teaching partner at{" "}
-              <strong>EugenicsErudite</strong>, where I emphasize conceptual
+              Currently, I am a school teacher at a private school and a teaching partner at an educational firm, where I emphasize conceptual
               clarity and moral growth.
             </p>
           </div>
@@ -145,7 +141,7 @@ export default function SukanyaPage() {
                     My Partner
                   </h3>
                   <p className="text-default-600 dark:text-white text-sm mb-4">
-                    I found a partner in Titas—someone who is sincere,
+                    I found a partner in the Groom—someone who is sincere,
                     intellectually inclined, and my steady companion.
                   </p>
                   <Button
@@ -154,7 +150,7 @@ export default function SukanyaPage() {
                     href="/titas"
                     size="sm"
                   >
-                    Meet Titas
+                    Meet Groom
                   </Button>
                 </div>
               </CardBody>
@@ -164,4 +160,4 @@ export default function SukanyaPage() {
       </section>
     </div>
   );
-}
+}