Merge pull request #136 from acm-ucr/dev

merge to main

package.json

@@ -13,10 +13,12 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "axios": "^1.6.2",
     "bootstrap": "^5.3.0",
     "framer-motion": "^10.16.4",
     "next": "^14.0.2",
     "react": "^18.2.0",
+    "react-big-calendar": "^1.8.5",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0"

src/app/board/page.js

@@ -8,7 +8,7 @@ const page = () => {
       <div className="absolute aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <Title title="MEET THE TEAM" />
-      <div className="relative grid grid-cols-1 md:grid-cols-4 w-full md:w-9/12 gap-8 my-14">
+      <div className="relative grid grid-cols-1 lg:grid-cols-4 md:grid-cols-3 w-full md:w-9/12 gap-8 my-14">
         {BOARD.map((item, index) => (
           <Board
             key={index}

src/app/events/page.js

@@ -1,5 +1,50 @@
-const page = () => {
-  return <div>page</div>;
+"use client";
+import EventDescriptions from "@/components/events/EventDescriptions";
+import CalendarEvent from "@/components/events/Calendar";
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+const EvnetsPage = () => {
+  const [events, setEvents] = useState([]);
+  useEffect(() => {
+    axios
+      .get(
+        `https://www.googleapis.com/calendar/v3/calendars/${
+          process.env.NEXT_PUBLIC_CALENDAR_ID
+        }/events?key=${
+          process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY
+        }&singleEvents=true&orderBy=starttime&timeMin=${new Date(
+          new Date().getFullYear(),
+          new Date().getMonth(),
+          1
+        ).toISOString()}&timeMax=${new Date(
+          new Date().getMonth() === 11
+            ? new Date().getFullYear() + 1
+            : new Date().getFullYear(),
+          new Date().getMonth() === 11 ? 0 : new Date().getMonth() + 1,
+          1
+        ).toISOString()}`
+      )
+      .then((result) => {
+        setEvents(
+          result.data.items.map((event) => ({
+            ...event,
+            allDay: event.start.dateTime ? false : true,
+            start: event.start.dateTime
+              ? new Date(event.start.dateTime)
+              : new Date(event.start.date + "T00:00:00-07:00"),
+            end: new Date(event.end.dateTime || event.end.date),
+            color: "green",
+          }))
+        );
+      });
+  }, []);
+  return (
+    <>
+      <CalendarEvent events={events} />
+      <EventDescriptions events={events} />
+    </>
+  );
 };
 
-export default page;
+export default EvnetsPage;

src/app/globals.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.rbc-header {
+  padding: 0;
+  background: #1051d3;
+}

src/app/page.js

@@ -2,16 +2,15 @@ import About from "@/components/home/About";
 import Landing from "@/components/home/Landing";
 import Projects from "@/components/home/Projects";
 import WhyJoin from "@/components/home/WhyJoin";
-import Events from "@/components/home/Events";
 import Join from "@/components/home/Join";
+
 const Home = () => {
   return (
     <div className="w-full flex flex-col items-center gap-20">
       <Landing />
       <About />
       <WhyJoin />
       <Projects />
-      <Events />
       <Join />
     </div>
   );

src/app/projects/robotics/page.js

@@ -1,7 +1,11 @@
 import Robotics from "@/components/projects/Robotics";
+import header from "../../../../public/images/robotics/RoboticsHeader.webp";
+import Header from "@/components/projects/Header";
+
 const page = () => {
   return (
     <>
+      <Header img={header.src} title="Robotics" />
       <Robotics />
     </>
   );

src/components/Footer.jsx

@@ -6,21 +6,21 @@ import { LINKS } from "@/data/links";
 
 const Footer = () => {
   return (
-    <div className="w-full bg-ewb-blue-200 border-t-[20px] border-t-ewb-green pt-32 flex justify-between relative">
-      <div className="flex items-end m-3 gap-3 text-white font-bold text-xl w-1/2">
+    <div className="w-full bg-ewb-blue-200 border-t-[20px] border-t-ewb-green pt-8 flex justify-between relative">
+      <div className="flex itemrs-end m-3 gap-3 text-white font-bold text-xl w-1/2">
         <Image src={whiteLogo} alt="EWB Logo" />
         <p className="text-xs md:text-lg">EWB at UCR</p>
       </div>
 
-      <div className="text-right text-white text-sm flex flex-col m-0 p-0 mx-4 w-1/2">
+      <div className="text-right text-white text-sm md:text-base lg:text-lg flex flex-col m-0 p-0 mx-4 w-1/2">
         <div className="flex flex-row ml-20 self-end">
           {LINKS.map((social, index) => (
             <Link
               key={index}
               href={social.link}
-              className="no-underline text-white hover:text-ewb-white mx-1 flex flex-col items-center hover:-translate-y-0.5 duration-300"
+              className="no-underline text-white hover:text-ewb-white mx-1 flex flex-col items-center hover:-translate-y-0.5 duration-300 text-3xl"
             >
-              <icons className="text-2xl">{ICONS[social.text]}</icons>
+              {ICONS[social.text]}
             </Link>
           ))}
         </div>
@@ -29,7 +29,6 @@ const Footer = () => {
           <div>Riverside, CA 92521</div>
           <div>United States</div>
           <div>[email protected]</div>
-          <div>619-395-3534</div>
         </div>
       </div>
     </div>

src/components/Navigation.jsx

@@ -11,6 +11,7 @@ import { FaBars } from "react-icons/fa";
 
 const Navigation = () => {
   const [selected, setSelected] = useState("");
+  const [show, setShow] = useState(false);
 
   return (
     <Navbar
@@ -19,13 +20,14 @@ const Navigation = () => {
       fixed="top"
       className="w-full m-0 md:h-[8vh] p-0 flex px-3 !bg-white justify-between items-center"
     >
-      <Navbar.Brand className="p-0 min-h-full">
+      <Navbar.Brand className="p-0 min-h-full text-ewb-blue-200 font-bold hover:text-ewb-green duration-150">
         <Link
           onClick={() => setSelected("")}
           href="/"
           className="items-center flex min-h-full"
         >
           <Image src={blueLogo} className="h-full p-2" />
+          EWB at UCR
         </Link>
       </Navbar.Brand>
       <Navbar.Toggle
@@ -34,13 +36,19 @@ const Navigation = () => {
       >
         <FaBars className="text-ewb-blue-200 text-xl" />
       </Navbar.Toggle>
-      <Navbar.Collapse className="items-center md:justify-end justify-center h-full">
-        <Nav className="mb-2 no-underline text-lg flex items-center gap-2 mr-4 h-full">
+      <Navbar.Collapse className="md:justify-end justify-center h-full items-center">
+        <Nav className="no-underline text-lg flex items-center gap-2 mr-4 h-full">
           {navigation.map((item, index) => (
             <div key={index}>
               {item.sub.length > 0 ? (
                 <NavDropdown
-                  onClick={() => setSelected(item.name)}
+                  show={show}
+                  onMouseEnter={() => setShow(true)}
+                  onMouseLeave={() => setShow(false)}
+                  onClick={() => {
+                    setSelected(item.name);
+                    setShow(!show);
+                  }}
                   className="[&>*]:!border-0 [&>*]:!p-0 [&>*]:!m-0 [&>*]:!bg-transparent"
                   title={
                     <span

src/components/Title.jsx

@@ -17,7 +17,7 @@ const Title = ({ subTitle, title }) => {
       className="relative flex flex-col justify-center items-center z-20"
     >
       <p className={COLORS.green.text + " font-semibold mb-0"}>{subTitle}</p>
-      <p className="mt-0 font-bold text-2xl md:text-3xl">
+      <p className="mt-0 font-bold text-2xl md:text-4xl">
         <span
           className={
             COLORS.blue.bg +

src/components/events/Calendar.jsx

@@ -0,0 +1,67 @@
+"use client";
+import { useState } from "react";
+import { Calendar, momentLocalizer } from "react-big-calendar";
+import moment from "moment";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import CustomToolbar from "./CustomToolbar.jsx";
+import CustomEvent from "./CustomEvents.jsx";
+import Modal from "./Modal.jsx";
+import CustomHeader from "./CustomHeader.jsx";
+
+const localizer = momentLocalizer(moment);
+
+const CalendarEvent = ({ events }) => {
+  const [event, setEvent] = useState(null);
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <section className="w-full flex justify-center items-center flex-col mt-[2vh]">
+      <div className="w-10/12 flex justify-center items-center">
+        <div className="h-[80vh] w-full relative mb-24">
+          <Calendar
+            date={date}
+            className="w-full m-0 p-0 !text-sm md:!text-xl 2xl:!text-2xl"
+            allDayAccessor="allDay"
+            showAllEvents={true}
+            events={events}
+            localizer={localizer}
+            defaultView="month"
+            views={["month"]}
+            components={{
+              event: CustomEvent,
+              toolbar: CustomToolbar,
+              header: CustomHeader,
+              eventContainerWrapper: CustomHeader,
+            }}
+            onNavigate={(newDate) => {
+              setDate(newDate);
+            }}
+            eventPropGetter={() => {
+              return {
+                className: `p-0 !active:ring-0 !focus:outline-0 !bg-transparent`,
+              };
+            }}
+            onSelectEvent={(event) => setEvent(event)}
+            dayPropGetter={(event) => {
+              return {
+                className: `${
+                  new Date(event).toLocaleDateString() ==
+                  new Date().toLocaleDateString()
+                    ? "!bg-opacity-40 !bg-grey-300"
+                    : "!bg-transparent"
+                }`,
+                style: {
+                  margin: 0,
+                  padding: 0,
+                },
+              };
+            }}
+          />
+        </div>
+        {event && <Modal event={event} setEvent={setEvent} />}
+      </div>
+    </section>
+  );
+};
+
+export default CalendarEvent;

src/components/events/CustomEvents.jsx

@@ -0,0 +1,19 @@
+import { COLORS } from "@/data/colors";
+
+const CustomEvent = ({ event }) => {
+  return (
+    <div className={`${COLORS[event.color].bg}  text-sm flex justify-start`}>
+      <p className="whitespace-nowrap m-0">
+        {!event.allDay &&
+          new Date(event.start).toLocaleTimeString(navigator.language, {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
+        &nbsp;
+        {event.summary}
+      </p>
+    </div>
+  );
+};
+
+export default CustomEvent;

src/components/events/CustomHeader.jsx

@@ -0,0 +1,10 @@
+const CustomHeader = (prop) => {
+  console.log(prop);
+  return (
+    <div className="bg-ewb-blue-200 text-white w-full p-0 m-0">
+      {prop.label}
+    </div>
+  );
+};
+
+export default CustomHeader;

src/components/events/CustomToolbar.jsx

@@ -0,0 +1,40 @@
+import { AiOutlineArrowLeft, AiOutlineArrowRight } from "react-icons/ai";
+const monthNames = [
+  "Jan",
+  "Feb",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "Aug",
+  "Sept",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+const CustomToolbar = (event) => {
+  return (
+    <div className="flex justify-center items-center w-full py-3 flex-row">
+      <AiOutlineArrowLeft
+        onClick={() => {
+          console.log("hi");
+          event.onNavigate("PREV");
+        }}
+        className="hover:cursor-pointer text-3xl text-ewb-blue-200 font-bold mx-3"
+      />
+      <p className="m-0 text-3xl text-ewb-blue-200 font-bold">
+        {monthNames[event.date.getMonth()]}
+      </p>
+      <p className="m-0 text-3xl text-ewb-blue-200 font-bold">
+        {event.date.getFullYear()}
+      </p>
+      <AiOutlineArrowRight
+        onClick={() => event.onNavigate("NEXT")}
+        className="hover:cursor-pointer text-3xl text-ewb-blue-200 font-bold mx-3"
+      />
+    </div>
+  );
+};
+
+export default CustomToolbar;