diff --git a/package-lock.json b/package-lock.json index 82e5da5..a2312c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,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", @@ -435,6 +436,54 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.28", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz", + "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -1947,6 +1996,14 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -2222,6 +2279,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/dayjs": { "version": "1.11.10", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", @@ -5598,6 +5664,21 @@ "react-dom": ">=0.14.0" } }, + "node_modules/react-datepicker": { + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz", + "integrity": "sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==", + "dependencies": { + "@floating-ui/react": "^0.26.23", + "clsx": "^2.1.1", + "date-fns": "^3.6.0", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -6433,6 +6514,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "node_modules/tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", diff --git a/package.json b/package.json index d622f5e..e912101 100644 --- 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 index d8b8539..99bc594 100644 --- 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 ( -
-
- {title} -
-
- {date} -
-
- ); + return ( +
+
+ {title} +
+
+ {date} +
+
+ ); }; 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 ( -
-
- Our wedding will be held on: -
-

- March 8, 2025 -

-
- - Save to calender - -
+ return ( +
+
+ Our wedding will be held on: +
+

+ March 8, 2025 +

+
+ + Save to calender + +
-
-

Festivities

-
+
+

Festivities

+
- {agendaItems.map((item, idx) => ( - - ))} -
- ); + {agendaItems.map((item, idx) => ( + + ))} +
+ ); }; export default Agenda; diff --git a/src/app/components/BurgerMenu.tsx b/src/app/components/BurgerMenu.tsx index ff05b51..cff97f0 100644 --- a/src/app/components/BurgerMenu.tsx +++ b/src/app/components/BurgerMenu.tsx @@ -2,140 +2,140 @@ import { slide as Menu } from "react-burger-menu"; import { useState } from "react"; const styles = { - bmBurgerButton: { - position: "fixed", - width: "36px", - height: "30px", - left: "15px", - top: "15px", - }, - bmBurgerBars: { - background: "#0f2e31", + bmBurgerButton: { + position: "fixed", + width: "36px", + height: "30px", + left: "15px", + top: "15px", + }, + bmBurgerBars: { + background: "#354834", + }, + bmBurgerBarsHover: { + background: "#0f2e31", + }, + bmCrossButton: { + height: "24px", + width: "24px", + }, + bmCross: { + background: "#bdc3c7", + }, + bmMenuWrap: { + position: "fixed", + height: "62%", + width: "250px", + }, + bmMenu: { + background: "#354834", + padding: "0.5em 1.5em 0", + fontSize: "1.15em", + borderRadius: "10px", + }, + bmMorphShape: { + fill: "#373a47", + }, + bmItemList: { + color: "#b8b7ad", + padding: "0.8em", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + }, + bmOverlay: { + background: "rgba(0, 0, 0, 0.3)", + top: "0", + left: "0", + }, +}; + +const BurgerMenu = () => { + const [isOpen, setOpen] = useState(false); + + const handleIsOpen = () => { + setOpen(!isOpen); + }; + + const executeScroll = (divName: string) => { + const element = document.getElementById(divName); + if (element) { + element.scrollIntoView({ behavior: "smooth" }); + setOpen(false); + } + }; + + const navItems = [ + { + div_id: "home_page_div", + name: "Home", }, - bmBurgerBarsHover: { - background: "#0f2e31", + { + div_id: "bride_and_groom_div", + name: "Bride & Groom", }, - bmCrossButton: { - height: "24px", - width: "24px", + { + div_id: "agenda_div", + name: "Festivities", }, - bmCross: { - background: "#bdc3c7", + { + div_id: "bridal_party_div", + name: "Bridal Party", }, - bmMenuWrap: { - position: "fixed", - height: "62%", - width: "250px", + { + div_id: "location_div", + name: "Wedding Location", }, - bmMenu: { - background: "#354834", - padding: "0.5em 1.5em 0", - fontSize: "1.15em", - borderRadius: "10px", + { + div_id: "lodging_div", + name: "Lodging", }, - bmMorphShape: { - fill: "#373a47", + { + div_id: "ttd_dev", + name: "Things To Do", }, - bmItemList: { - color: "#b8b7ad", - padding: "0.8em", + { + div_id: "carousel_div", + name: "Gallery", }, - bmItem: { - display: "inline-block", + { + div_id: "spotify_div", + name: "Spotify Playlist", }, - bmOverlay: { - background: "rgba(0, 0, 0, 0.3)", - top: "0", - left: "0", + { + div_id: "rsvp_div", + name: "RSVP", }, -}; - -const BurgerMenu = () => { - const [isOpen, setOpen] = useState(false); - - const handleIsOpen = () => { - setOpen(!isOpen); - }; - - const executeScroll = (divName: string) => { - const element = document.getElementById(divName); - if (element) { - element.scrollIntoView({ behavior: "smooth" }); - setOpen(false); - } - }; - - const navItems = [ - { - div_id: "home_page_div", - name: "Home", - }, - { - div_id: "bride_and_groom_div", - name: "Bride & Groom", - }, - { - div_id: "agenda_div", - name: "Festivities", - }, - { - div_id: "bridal_party_div", - name: "Bridal Party", - }, - { - div_id: "location_div", - name: "Wedding Location", - }, - { - div_id: "lodging_div", - name: "Lodging", - }, - { - div_id: "ttd_dev", - name: "Things To Do", - }, - { - div_id: "carousel_div", - name: "Gallery", - }, - { - div_id: "spotify_div", - name: "Spotify Playlist", - }, - { - div_id: "rsvp_div", - name: "RSVP", - }, - ]; + ]; - return ( -
- + + {navItems.map((navItem) => ( +
+ -
-
- ))} - -
- ); + {navItem.name} + +
+ + ))} + + + ); }; export default BurgerMenu; diff --git a/src/app/components/Message.tsx b/src/app/components/Message.tsx index 2edfce1..7b76c08 100644 --- a/src/app/components/Message.tsx +++ b/src/app/components/Message.tsx @@ -1,12 +1,17 @@ -import { memo, useRef, useState } from "react"; +import { memo, useRef, useState, useEffect } from "react"; import LoadingOverlay from "react-loading-overlay-ts"; import MessageInformationIcon from "./MessageInfo"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; const Message = () => { const formRef = useRef(null); const [commentSubmitted, setCommentSubmitted] = useState(false); const [loading, setLoading] = useState(false); + const [startDate, setStartDate] = useState(); + const [endDate, setEndDate] = useState(); + const scriptUrl = "https://script.google.com/macros/s/AKfycbyrSwUKoDYzFOHqPmMulr_Ij6AD53-N2QAZDdik2S9gQwq4sB6d_BnFyKJJl3CLMj7g/exec"; @@ -62,7 +67,7 @@ const Message = () => {
-
+
{
- - -
-
+
+

+ What are your arrival and departure dates? +

+

+ Arrival +

+ setStartDate(date)} + /> +
+

+ Departure +

+ setEndDate(date)} + /> +
+
{ name="message" maxLength={750} /> +