From d99715c938843cae1d438a71d492f89c39395865 Mon Sep 17 00:00:00 2001 From: Daniel Zhou Date: Mon, 3 Feb 2025 23:19:57 -0800 Subject: [PATCH 1/3] annoucements --- src/data/announcements.json | 50 +++++++++++++++++++++++++++++++++++++ src/pages/Announcements.jsx | 30 ++++++++++++++++------ 2 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 src/data/announcements.json diff --git a/src/data/announcements.json b/src/data/announcements.json new file mode 100644 index 00000000..86a54d52 --- /dev/null +++ b/src/data/announcements.json @@ -0,0 +1,50 @@ +[ + { + "id": 7, + "subject": "hello", + "body": "bye", + "timestamp": "2025-02-04T04:01:50Z" + }, + { + "id": 6, + "subject": "Hello", + "body": "", + "timestamp": "2025-02-02T06:04:56Z" + }, + { + "id": 5, + "subject": "hello", + "body": "bye", + "timestamp": "2025-02-02T01:13:55Z" + }, + { + "id": 4, + "subject": "hello", + "body": "bye", + "timestamp": "2025-02-02T01:06:22Z" + }, + { + "id": 3, + "subject": "hello", + "body": "bye", + "timestamp": "2025-02-02T01:05:09Z" + }, + { + "id": 2, + "subject": "Your announcement text here", + "body": "The subject/title of your announcement", + "timestamp": "2025-02-02T01:01:26Z" + }, + { + "id": 1, + "subject": "Hello1", + "body": "", + "timestamp": "2025-02-02T00:58:11Z" + }, + { + "id": 0, + "subject": "Hello", + "body": "", + "timestamp": "2025-02-02T00:57:26Z" + } +] \ No newline at end of file diff --git a/src/pages/Announcements.jsx b/src/pages/Announcements.jsx index 9f773753..3106c020 100644 --- a/src/pages/Announcements.jsx +++ b/src/pages/Announcements.jsx @@ -1,19 +1,35 @@ import React from 'react'; import useTitle from '../components/General/useTitle'; +import announcements from '../data/announcements.json'; import '../styles/Announcements.css'; export default function Announcements() { useTitle(' | Announcements'); + const formatDate = (timestamp) => { + const date = new Date(timestamp); + return date.toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + }; + return (
-

Announcements

-
-

- HOTH XII will take place later this quarter, and our team is working - hard to organize a fantastic hackathon for you all! -

-

More news and announcements coming soon. Stay tuned!

+

Announcements

+
+ {announcements.map((announcement) => ( +
+

{announcement.subject}

+

{announcement.body}

+

+ Posted on {formatDate(announcement.timestamp)} +

+
+ ))}
); From a4b36362cccd1fa68e80685b778e7b1c1d4f8c99 Mon Sep 17 00:00:00 2001 From: Jeff Date: Fri, 7 Feb 2025 16:16:27 -0800 Subject: [PATCH 2/3] Styling Announcement Page and Making Popup --- package-lock.json | 9 +++ src/components/General/AnnouncementPopup.jsx | 59 ++++++++++++++++ src/data/announcements.json | 40 +++-------- src/pages/Announcements.jsx | 21 +++--- src/pages/Home.jsx | 3 + src/pages/Schedule.jsx | 54 ++++++++++++++- src/styles/AnnouncementPopup.css | 72 ++++++++++++++++++++ src/styles/Announcements.css | 44 ++++++++++-- 8 files changed, 254 insertions(+), 48 deletions(-) create mode 100644 src/components/General/AnnouncementPopup.jsx create mode 100644 src/styles/AnnouncementPopup.css diff --git a/package-lock.json b/package-lock.json index 0cec6e89..b8115bb5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3869,6 +3869,15 @@ "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", "license": "MIT" }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/src/components/General/AnnouncementPopup.jsx b/src/components/General/AnnouncementPopup.jsx new file mode 100644 index 00000000..963ebb21 --- /dev/null +++ b/src/components/General/AnnouncementPopup.jsx @@ -0,0 +1,59 @@ +import React, {useState, useEffect} from 'react'; +import { useNavigate } from 'react-router-dom'; +import '../../styles/AnnouncementPopup.css'; +import { TfiAnnouncement } from 'react-icons/tfi'; + + + +const AnnouncementPopup = () => { + const [show, setShow] = useState(true); + const [latestAnnouncement, setLatestAnnouncement] = useState(null); + const navigate = useNavigate(); + + const formatDate = (timestamp) => { + const date = new Date(timestamp); + return date.toLocaleDateString('en-US', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', + }); + }; + + useEffect(() => { + fetch('src/data/announcements.json') + .then((response) => response.json()) + .then((data) => { + if (data.length > 0) { + setLatestAnnouncement(data[0]); + } + }) + .catch((error) => console.error('Error fetching announcements', error)); + }, []); + + const handleDelete = () => { + setShow(false); + }; + + if (!show || !latestAnnouncement) return null; + + return ( +
+ +
+ +

{latestAnnouncement.subject}

+

{formatDate(latestAnnouncement.timestamp)}

+

{latestAnnouncement.body}

+
+
+ + ); + +}; + +export default AnnouncementPopup diff --git a/src/data/announcements.json b/src/data/announcements.json index 86a54d52..b8cbf416 100644 --- a/src/data/announcements.json +++ b/src/data/announcements.json @@ -1,50 +1,32 @@ [ - { - "id": 7, - "subject": "hello", - "body": "bye", - "timestamp": "2025-02-04T04:01:50Z" - }, - { - "id": 6, - "subject": "Hello", - "body": "", - "timestamp": "2025-02-02T06:04:56Z" - }, - { - "id": 5, - "subject": "hello", - "body": "bye", - "timestamp": "2025-02-02T01:13:55Z" - }, { "id": 4, - "subject": "hello", - "body": "bye", - "timestamp": "2025-02-02T01:06:22Z" + "subject": "Congratulations!", + "body": "This workshop covers the basics of Web Development - HTML, CSS, and JavaScript! Together, they make up the structure (HTML), the style (CSS), and the functionality (JS) of a web application.", + "timestamp": "2025-02-04T01:06:22Z" }, { "id": 3, - "subject": "hello", - "body": "bye", + "subject": "Yay!", + "body": "Hello! Welcome to HOTH XI's Intro to Web APIs workshop. This is a guide to introduce you to the foundations of Web APIs that will allow you to integrate them into any fullstack project. We will be covering the client-server model, HTTP requests & responses, and how we can leverage external servers to retrieve data and services for an app. Keep reading to learn more!", "timestamp": "2025-02-02T01:05:09Z" }, { "id": 2, - "subject": "Your announcement text here", - "body": "The subject/title of your announcement", + "subject": "Intro to Servers!", + "body": "In this workshop, you will learn server-side programming in the context of full stack applications! Topics covered include HTTP, CRUD, and REST APIs. The second half of the workshop will include a hands-on demo building your own REST API using Flask and connecting it with a React frontend. By the end of the workshop you will become a server savant savvy with tools such as Postman. Viewers are recommended to have a strong foundation in JavaScript and Python.", "timestamp": "2025-02-02T01:01:26Z" }, { "id": 1, - "subject": "Hello1", - "body": "", + "subject": "Intro to React.js", + "body": "Hello! Welcome to the Intro to React JS workshop for HOTH XI! Here we will be introducing frontend web development using React. In this workshop we will utilize HTML, CSS, and JavaScript, so I would recommend watching the workshop on those if you are not already familiar with them!", "timestamp": "2025-02-02T00:58:11Z" }, { "id": 0, - "subject": "Hello", - "body": "", + "subject": "Intro to React Native", + "body": "Hello and welcome to our Intro to React Native workshop! We'll be covering the basics of React Native in a way that I hope is simple to understand and impactful enough to teach some key features of app development. Happy hacking!", "timestamp": "2025-02-02T00:57:26Z" } ] \ No newline at end of file diff --git a/src/pages/Announcements.jsx b/src/pages/Announcements.jsx index 3106c020..6807d40b 100644 --- a/src/pages/Announcements.jsx +++ b/src/pages/Announcements.jsx @@ -9,25 +9,24 @@ export default function Announcements() { const formatDate = (timestamp) => { const date = new Date(timestamp); return date.toLocaleDateString('en-US', { + weekday: 'long', year: 'numeric', - month: 'long', - day: 'numeric', - hour: '2-digit', - minute: '2-digit' + month: 'long', + day: 'numeric', }); }; return (
-

Announcements

-
+

Announcements

+
{announcements.map((announcement) => ( -
-

{announcement.subject}

-

{announcement.body}

-

- Posted on {formatDate(announcement.timestamp)} +

+

{announcement.subject}

+

+ {formatDate(announcement.timestamp)}

+

{announcement.body}

))}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index e0cccdca..d3fee83d 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -5,6 +5,7 @@ import Banner from '../components/Home/Banner'; import HothDescription from '../components/Home/HothDescription'; import PhotoCarousel from '../components/Home/PhotoCarousel'; import FAQSection from '../components/Home/FAQSection'; +import AnnouncementPopup from '../components/General/AnnouncementPopup'; export default function Home() { useTitle(''); @@ -35,6 +36,8 @@ export default function Home() { + +
); } diff --git a/src/pages/Schedule.jsx b/src/pages/Schedule.jsx index c997c358..e21e546d 100644 --- a/src/pages/Schedule.jsx +++ b/src/pages/Schedule.jsx @@ -1,9 +1,57 @@ import React from 'react'; +import useTitle from '../components/General/useTitle'; +import eventSchedule from '../data/eventSchedule'; +import '../styles/Schedule.css'; +import { FaRegClock } from 'react-icons/fa'; + +const formatTime = date => { + const options = { + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: '2-digit', + hour12: true, + timeZoneName: 'short', + }; + return date.toLocaleString('en-US', options); +}; export default function Schedule() { - return ( -
-

Schedule

+ useTitle(' | Schedule'); + return eventSchedule.length > 0 ? ( +
+

Schedule

+ {eventSchedule.map(block => ( +
+
+ + {formatTime(block.startTime)} +
+ {block.events.map((event, eventIndex) => ( +
+
+

{event.name}

+
+

{event.duration}

+

{event.location}

+
+
+

{event.description}

+
+ ))} +
+ ))} +
+ ) : ( +
+

Schedule

+
+

+ HOTH XII will take place later this quarter, and our team is working + hard to organize a fantastic hackathon for you all!{' '} +

+

The schedule for HOTH XII will be coming out soon. Stay tuned!

+
); } diff --git a/src/styles/AnnouncementPopup.css b/src/styles/AnnouncementPopup.css new file mode 100644 index 00000000..ee60eb31 --- /dev/null +++ b/src/styles/AnnouncementPopup.css @@ -0,0 +1,72 @@ +.popup { + position: fixed; + right: 1rem; + bottom: 1rem; + justify-content: flex-end; + align-items: center; + z-index: 100; + +} + +.popup-content { + background: #f7f7f7; + padding: 1.5rem; + border: 1px solid lightgray; + border-radius: 1rem; + margin-left: 2rem; + max-width: 16rem; +} + +.dark .popup-content { + background: #362d40; + border: 1px solid #362d40; +} + +.speaker-icon { + position: absolute; + background-color: yellow; + top: -3.4rem; + right: 0rem; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5); + font-size: 1.5rem; + transition: all 0.3s ease-in-out; + cursor: pointer; + border: none; +} + +.speaker-icon:hover { + background-color: #FFFFC5; +} + +.popup-label { + font-size: 1.5rem; +} + +.popup-date { + font-size: 0.9rem; +} + +.popup-body { + font-size: 0.95rem; +} + +.close { + position: absolute; + top: 0.5rem; + left: 2.5rem; + border: none; + font-size: 1.2rem; + font-weight: bold; + background: transparent; + cursor: pointer; + } + +.dark .close { + color: white; +} \ No newline at end of file diff --git a/src/styles/Announcements.css b/src/styles/Announcements.css index 6a37adac..961e82f1 100644 --- a/src/styles/Announcements.css +++ b/src/styles/Announcements.css @@ -1,16 +1,50 @@ #announcements { width: 100%; - max-width: 60rem; - padding: 2rem 3rem; + max-width: 80rem; + padding: 2rem 10rem; } .announcements-title { - font-size: 3rem; + padding-bottom: 1.5rem; + font-size: 2.5rem; + text-align: center; } .announcements-container { - display: flex; - flex-direction: column; + display: grid; + gap: 1rem; + width: 100%; + margin: 0 auto; +} + +.announcements-label { + background: var(--bgWhite); + padding: 1.5rem 2rem; + border: 1px solid lightgray; + box-shadow: 0 2px 6px var(--lightGray); + border-radius: 0.75rem; + transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; +} + +.announcements-label:hover { + transform: translateY(-3px); + box-shadow: 0 0px 6px var(--hackPrimary); +} + +.announcements-subject { + margin-top: 1.1%; + padding-top: 0.1rem; +} + +.announcements-date { + margin-top: 0.7rem; + text-align: left; + font-size: 0.9rem; + margin-bottom: 1rem; +} + +.announcements-body { + margin-top: 1.5rem; } @media (max-width: 550px) { From e89fc32aa4825d39da7e1f42719e6eabac05f277 Mon Sep 17 00:00:00 2001 From: Jeff Date: Sat, 8 Feb 2025 17:05:31 -0800 Subject: [PATCH 3/3] Updating react icon package --- package-lock.json | 1 + package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/package-lock.json b/package-lock.json index b8115bb5..b8743253 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@szhsin/react-menu": "^4.2.3", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.4.0", "react-lazy-load-image-component": "^1.6.3", "react-player": "^2.16.0", "react-router-dom": "^7.0.2", diff --git a/package.json b/package.json index 13e7c31b..37770d24 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@szhsin/react-menu": "^4.2.3", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.4.0", "react-lazy-load-image-component": "^1.6.3", "react-player": "^2.16.0", "react-router-dom": "^7.0.2",