add arrival and departure dates in form; fix some styling issues

rshewitt · Dec 12, 2024 · 7afd9b8 · 7afd9b8
1 parent d945bdc
commit 7afd9b8
Show file tree

Hide file tree

Showing 6 changed files with 314 additions and 194 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
         "next": "14.1.4",
         "react": "^18",
         "react-burger-menu": "^3.0.9",
+        "react-datepicker": "^7.5.0",
         "react-dom": "^18",
         "react-icons": "^5.2.1",
         "react-loading-overlay-ts": "^2.0.2",

diff --git a/src/app/components/Agenda.tsx b/src/app/components/Agenda.tsx
@@ -1,71 +1,67 @@
 const CALENDAR_URL =
-    "https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NXM5c2RnN2k4NTlnNWxlMDEzbWluM29hZnQgc2FtLmhldy5yQG0&tmsrc=sam.hew.r%40gmail.com";
+  "https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NXM5c2RnN2k4NTlnNWxlMDEzbWluM29hZnQgc2FtLmhldy5yQG0&tmsrc=sam.hew.r%40gmail.com";
 
 interface AgendaProps {
-    title?: string;
-    date?: string;
-    idx?: number;
+  title?: string;
+  date?: string;
+  idx?: number;
 }
 
 const AgendaItem = ({ title, date, idx }: AgendaProps) => {
-    return (
-        <div
-            key={idx}
-            className="grid grid-cols-2 gap-4 text-center text-2xl px-4 py-4 md:py-16 md:px-0"
-        >
-            <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold">
-                {title}
-            </div>
-            <div className="col-span-1 text-gray-700 text-right text-xl-wel font-normalBold">
-                {date}
-            </div>
-        </div>
-    );
+  return (
+    <div
+      key={idx}
+      className="grid grid-cols-2 gap-4 text-center text-2xl px-4 py-4 md:py-16 md:px-0"
+    >
+      <div className="col-span-1 text-gray-400 text-left text-xl-wel font-normalBold">
+        {title}
+      </div>
+      <div className="col-span-1 text-gray-700 text-right text-xl-wel font-normalBold">
+        {date}
+      </div>
+    </div>
+  );
 };
 
 const agendaItems = [
-    {
-        title: "Mardi Gras",
-        date: "Feb 28 - March 4",
-    },
-    {
-        title: "Ceremony & Reception",
-        date: "March 8",
-    },
-    {
-        title: "Farewell Brunch",
-        date: "March 9",
-    },
+  {
+    title: "Mardi Gras",
+    date: "Feb 28 - March 4",
+  },
+  {
+    title: "Ceremony & Reception",
+    date: "March 8",
+  },
 ];
 const Agenda = () => {
-    return (
-        <div id="agenda_div" className="max-w-3xl mx-auto text-center">
-            <div className="mb-4 text-gray-500 font-normal">
-                Our wedding will be held on:
-            </div>
-            <h3 className="font-normalBold font-black mb-6 text-center text-gray-700">
-                March 8, 2025
-            </h3>
-            <div className="px-12 flex max-w-md mx-auto mb-10">
-                <a
-                    href={CALENDAR_URL}
-                    target={"_blank"}
-                    className="px-8 py-4 transition-all font-normal w-full rounded-lg bg-[#354834] outline-contrast-3 text-white outline-4 disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
-                    rel="noreferrer"
-                >
-                    Save to calender
-                </a>
-            </div>
+  return (
+    <div id="agenda_div" className="max-w-3xl mx-auto text-center">
+      <div className="mb-4 text-gray-500 font-normal">
+        Our wedding will be held on:
+      </div>
+      <h3 className="font-normalBold font-black mb-6 text-center text-gray-700">
+        March 8, 2025
+      </h3>
+      <div className="px-12 flex max-w-md mx-auto mb-10">
+        <a
+          href={CALENDAR_URL}
+          target={"_blank"}
+          className="px-8 py-4 transition-all font-normal w-full rounded-lg bg-[#354834] outline-contrast-3 text-white outline-4 disabled:opacity-50 disabled:pointer-events-none cursor-pointer"
+          rel="noreferrer"
+        >
+          Save to calender
+        </a>
+      </div>
 
-            <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 pt-10 text-gray-700 px-2">
-                <h4 className="mb-1">Festivities</h4>
-            </div>
+      <div className="text-3xl-wel lg:text-5xl-wel font-squiggly text-center mb-10 pt-10 text-gray-700 px-2">
+        <h4 className="mb-1">Festivities</h4>
+      </div>
 
-            {agendaItems.map((item, idx) => (
-                <AgendaItem title={item.title} date={item.date} key={idx} />
-            ))}
-        </div>
-    );
+      {agendaItems.map((item, idx) => (
+        <AgendaItem title={item.title} date={item.date} key={idx} />
+      ))}
+    </div>
+  );
 };
 
 export default Agenda;