diff --git a/frontend/index.html b/frontend/index.html index 0ef5ee7..af1bc01 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -108,6 +108,7 @@ + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b0ca43c..571386c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -31,6 +31,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-fast-marquee": "^1.6.5", + "react-responsive-modal": "^6.4.2", "react-router-dom": "6.23.0", "react-simple-maps": "^3.0.0", "tailwind-merge": "^2.5.2", @@ -396,6 +397,27 @@ "node": ">=6.9.0" } }, + "node_modules/@bedrock-layout/use-forwarded-ref": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@bedrock-layout/use-forwarded-ref/-/use-forwarded-ref-1.6.1.tgz", + "integrity": "sha512-GD9A9AFLzFNjr7k6fgerSqxfwDWl+wsPS11PErOKe1zkVz0y7RGC9gzlOiX/JrgpyB3NFHWIuGtoOQqifJQQpw==", + "license": "MIT", + "dependencies": { + "@bedrock-layout/use-stateful-ref": "^1.4.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17 || ^18" + } + }, + "node_modules/@bedrock-layout/use-stateful-ref": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz", + "integrity": "sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8 || ^17 || ^18" + } + }, "node_modules/@darkroom.engineering/tempus": { "version": "0.0.46", "resolved": "https://registry.npmjs.org/@darkroom.engineering/tempus/-/tempus-0.0.46.tgz", @@ -3204,6 +3226,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/body-scroll-lock": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", + "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==", + "license": "MIT" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -3359,6 +3387,12 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/clsx": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", @@ -6810,6 +6844,24 @@ } } }, + "node_modules/react-responsive-modal": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz", + "integrity": "sha512-ARjGEKE5Gu5CSvyA8U9ARVbtK4SMAtdXsjtzwtxRlQIHC99RQTnOUctLpl7+/sp1Kg1OJZ6yqvp6ivd4TBueEw==", + "license": "MIT", + "dependencies": { + "@bedrock-layout/use-forwarded-ref": "^1.3.1", + "body-scroll-lock": "^3.1.5", + "classnames": "^2.3.1" + }, + "funding": { + "url": "https://github.com/sponsors/pradel" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-router": { "version": "6.23.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 2ab773d..a37a82d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -33,6 +33,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-fast-marquee": "^1.6.5", + "react-responsive-modal": "^6.4.2", "react-router-dom": "6.23.0", "react-simple-maps": "^3.0.0", "tailwind-merge": "^2.5.2", diff --git a/frontend/src/components/Home/UpcomingEvents.jsx b/frontend/src/components/Home/UpcomingEvents.jsx index ee67de6..28f0937 100644 --- a/frontend/src/components/Home/UpcomingEvents.jsx +++ b/frontend/src/components/Home/UpcomingEvents.jsx @@ -1,7 +1,11 @@ +import React from "react"; import { Button } from "@nextui-org/button"; import { Chip } from "@nextui-org/chip"; import { useRef, useEffect, useState } from "react"; +import { Modal } from 'react-responsive-modal'; +import 'react-responsive-modal/styles.css'; import { Link } from "react-router-dom"; +import { modal } from "@nextui-org/theme"; function formatDate(isoDate) { const date = new Date(isoDate); @@ -9,9 +13,11 @@ function formatDate(isoDate) { const options = { year: 'numeric', month: 'long', day: 'numeric' }; return date.toLocaleDateString(undefined, options); } -function EventCard({ title, date, type = "Workshop", description, isVisible, registrationLink }) { +function EventCard({ title, date, details, moreInfo, registrationLink, imgUrl, type = "Workshop", description, isVisible }) { const cardRef = useRef(null); const [visible, setVisible] = useState(isVisible); + const [open, setOpen] = React.useState(false); + const myRef = React.useRef(null); const eventDate = new Date(date); const currentDate = new Date(); @@ -30,10 +36,39 @@ function EventCard({ title, date, type = "Workshop", description, isVisible, reg }; }, []); + const closeIcon = ( + + close + + ); + + return ( + <> +
+ + +Event Description :
{moreInfo}
Event Details :
{details[0]}
{details[1]}
{details[2]}