Event carousel

frontend/src/components/Event.jsx

@@ -1,6 +1,6 @@
 import { format } from 'date-fns';
 
-const Event = ({ image, virtual, title, description, where, when }) => {
+const Event = ({ image, virtual, title, description, where, registration, when }) => {
   return (
     <div className="flex flex-col md:flex-row mb-12 drop-shadow-lg">
       <div className="flex mr-16 justify-center align-center w-full md:w-auto">
@@ -25,6 +25,10 @@ const Event = ({ image, virtual, title, description, where, when }) => {
             <span className="font-bold">When: </span>
             {format(when.toDate(), 'h:mm a, E MMM d, yyyy')}
           </div>
+          <div>
+            <span className="font-bold">Register Here: </span>
+            {registration}
+          </div>
         </div>
       </div>
     </div>

frontend/src/components/Events.jsx

@@ -1,13 +1,23 @@
 import { useState } from "react";
 import { useCollection } from "../firebase/hooks/useCollection";
 
-const EventCard = ({ image, virtual, title, description, where, when }) => {
+const EventCard = ({
+  image,
+  virtual,
+  title,
+  description,
+  where,
+  registration,
+  when,
+}) => {
   return (
     <div className="bg-gray-200 rounded-md">
-      <img className="object-cover rounded-t-md" src={image} alt=""/>
+      <img className="object-cover rounded-t-md" src={image} alt="" />
       <div className="pt-2 pb-4 px-4">
         <h3 className="font-bold text-2xl mb-0">{title}</h3>
-        <p className="text-slate-600 mb-2">{virtual ? "Virtual" : "In-Person"}</p>
+        <p className="text-slate-600 mb-2">
+          {virtual ? "Virtual" : "In-Person"}
+        </p>
         <p className="mb-3">{description}</p>
         <p>
           <span className="font-bold">Where: </span>
@@ -23,6 +33,12 @@ const EventCard = ({ image, virtual, title, description, where, when }) => {
           <span className="font-bold">When: </span>
           {when}
         </p>
+        <p style={{display: registration? "in-line" : "none"}}>
+          <span className="font-bold">Register Here: </span>
+          <a className="text-cyan-600 hover:text-blue-800" href={registration}>
+            Link
+          </a>
+        </p>
       </div>
     </div>
   );

frontend/src/components/Home.jsx

@@ -1,28 +1,62 @@
 import { useCollection } from "../firebase/hooks/useCollection";
 import Event from "./Event";
+import ScrollEvent from "./ScrollEvent";
 import EventHeader from "./EventHeader";
 import Hero from "./Hero";
+import { useState } from "react";
 
 const Home = () => {
+  const [upcoming, setUpcoming] = useState(true);
+
   const currentDate = new Date();
   const events = useCollection("events");
-  const filteredEvents = (filterFunc) => events
-  .filter(filterFunc)
-  .map((event, i) => (
-      <Event
-        key={i}
-        {...event}
-      />
-    )
-  )
+  const filteredEvents = (filterFunc) =>
+    events
+      .filter(filterFunc)
+      .map((event, i) => <ScrollEvent key={i} {...event} />);
   return (
     <>
       <Hero />
-      <div className="mt-32 pb-16 mx-auto max-w-screen-md px-8">
-        <EventHeader text="Upcoming Events" />
-        {filteredEvents((event) => event.when.toDate() >= currentDate)}
-        <EventHeader text="Past Events" />
-        {filteredEvents((event) => event.when.toDate() < currentDate)}
+      <div className="flex flex-col mt-24 pt-16 pl-16 pb-16 gap-10 bg-[#F0E0A0]">
+        <h2 className="uppercase"> Events </h2>
+        {upcoming ? (
+          <div className="pr-16">
+            <div className="flex justify-between mb-2">
+              <h1 className="text-3xl"> Coming up at the BPU </h1>
+              <button
+                className="bg-[#9D0600] text-white py-2 px-3 uppercase"
+                onClick={() => setUpcoming(false)}
+              >
+                Past Events
+              </button>
+            </div>
+            Brown Political Union hosts events all year round.
+          </div>
+        ) : (
+          <div className="pr-16">
+            <div className="flex justify-between mb-2">
+              <h1 className="text-3xl"> Previously at the BPU </h1>
+              <button
+                className="bg-[#9D0600] text-white py-2 px-3 uppercase"
+                onClick={() => setUpcoming(true)}
+              >
+                Upcoming Events
+              </button>
+            </div>
+            <div style={{ maxWidth: '60%'}}>
+              Brown Political Union hosts events all year round.
+            </div>
+          </div>
+        )}
+        {upcoming ? (
+          <div className="flex overflow-x-auto gap-10">
+            {filteredEvents((event) => event.when.toDate() >= currentDate)}
+          </div>
+        ) : (
+          <div className="flex overflow-x-auto gap-10 pr-16">
+            {filteredEvents((event) => event.when.toDate() < currentDate)}
+          </div>
+        )}
       </div>
     </>
   );

frontend/src/components/Modifiable/ModifiableAddEventCard.jsx

@@ -11,12 +11,13 @@ const baseEvent = {
     virtual: true,
     when: Timestamp.now(),
     where: "",
+    registration: "",
 }
 
 const ModifiableAddEventCard = () => {
     const [currentImage, setCurrentImage] = useState();
     const [newEvent, setNewEvent] = useState(baseEvent);
-    const { title, image, description, virtual, when, where } = newEvent;
+    const { title, image, description, virtual, when, where, registration } = newEvent;
     const submitEvent = async () => {
         setCurrentImage(newEvent.image);
         const firestore = getFirestore();
@@ -37,84 +38,102 @@ const ModifiableAddEventCard = () => {
         });
     };
     return (
-        <div className="bg-gray-200 rounded-md flex justify-between">
-            <div className="pt-2 pb-4 px-4">
-                <h2 className="text-2xl font-bold pb-2">Create a New Event</h2>
-                <hr className="flex-grow border-t border-gray-400 pb-3"/> 
-                <span className="font-bold">Title: </span>
-                <input
-                    name="title"
-                    type="text"
-                    className="font-bold text-2xl mb-1 p-1"
-                    value={title}
-                    onChange={handleInputChange}
-                />
-                <div className="my-2">
-                    <span className="font-bold">Mode: </span>
-                    <select
-                        name="virtual"
-                        className="bg-white p-1"
-                        value={virtual ? "virtual" : "in-person"}
-                        onChange={(v) => setNewEvent({
-                            ...newEvent,
-                            virtual: v === "virtual",
-                        })}
-                    >
-                        <option value="virtual">Virtual</option>
-                        <option value="in-person">In-Person</option>
-                    </select>
-                </div>
-                <span className="font-bold">Description: </span>
-                <textarea
-                    name="description"
-                    rows="6"
-                    cols="40"
-                    value={description}
-                    className="mb-1 p-1"
-                    onChange={handleInputChange}
-                />
-                <p className="my-2">
-                    <span className="font-bold">Where: </span>
-                    <input
-                        name="where"
-                        onChange={handleInputChange}
-                        type="text"
-                        value={where}
-                        className="p-1"
-                    />
-                </p>
-                <div className="my-2">
-                    <span className="font-bold">When: </span>
-                    <DatePicker
-                        showIcon
-                        selected={when.toDate()}
-                        onChange={(date) => setNewEvent({
-                            ...newEvent,
-                            when: Timestamp.fromDate(date),
-                        })}
-                        showTimeInput
-                        dateFormat="Pp"
-                    />
-                </div>
-                <p className="my-2">
-                    <span className="font-bold">Image: </span>
-                    <input
-                        className="w-100"
-                        name="image"
-                        onChange={handleInputChange}
-                        type="text"
-                        value={image}
-                    />
-                </p>
-                <button
-                    className="font-bold border-2 p-1 mt-5 rounded-md border-slate-400 bg-green-600 text-white hover:bg-green-800"
-                    onClick={submitEvent}
-                >
-                    Submit
-                </button>
-            </div>
-            <img className="rounded-t-md w-1/2" src={currentImage} alt={"Not found"} />
+      <div className="bg-gray-200 rounded-md flex justify-between">
+        <div className="pt-2 pb-4 px-4">
+          <h2 className="text-2xl font-bold pb-2">Create a New Event</h2>
+          <hr className="flex-grow border-t border-gray-400 pb-3" />
+          <span className="font-bold">Title: </span>
+          <input
+            name="title"
+            type="text"
+            className="font-bold text-2xl mb-1 p-1"
+            value={title}
+            onChange={handleInputChange}
+          />
+          <div className="my-2">
+            <span className="font-bold">Mode: </span>
+            <select
+              name="virtual"
+              className="bg-white p-1"
+              value={virtual ? "virtual" : "in-person"}
+              onChange={(v) =>
+                setNewEvent({
+                  ...newEvent,
+                  virtual: v === "virtual",
+                })
+              }
+            >
+              <option value="virtual">Virtual</option>
+              <option value="in-person">In-Person</option>
+            </select>
+          </div>
+          <span className="font-bold">Description: </span>
+          <textarea
+            name="description"
+            rows="6"
+            cols="40"
+            value={description}
+            className="mb-1 p-1"
+            onChange={handleInputChange}
+          />
+          <p className="my-2">
+            <span className="font-bold">Where: </span>
+            <input
+              name="where"
+              onChange={handleInputChange}
+              type="text"
+              value={where}
+              className="p-1"
+            />
+          </p>
+          <div className="my-2">
+            <span className="font-bold">When: </span>
+            <DatePicker
+              showIcon
+              selected={when.toDate()}
+              onChange={(date) =>
+                setNewEvent({
+                  ...newEvent,
+                  when: Timestamp.fromDate(date),
+                })
+              }
+              showTimeInput
+              dateFormat="Pp"
+            />
+          </div>
+          <p className="my-2">
+            <span className="font-bold">Image: </span>
+            <input
+              className="w-100"
+              name="image"
+              onChange={handleInputChange}
+              type="text"
+              value={image}
+            />
+          </p>
+          <p className="my-2">
+            <span className="font-bold">Registration Link: </span>
+            <input
+              className="p-1"
+              name="registration"
+              onChange={handleInputChange}
+              type="text"
+              value={registration}
+            />
+          </p>
+          <button
+            className="font-bold border-2 p-1 mt-5 rounded-md border-slate-400 bg-green-600 text-white hover:bg-green-800"
+            onClick={submitEvent}
+          >
+            Submit
+          </button>
         </div>
+        <img
+          className="rounded-t-md w-1/2"
+          src={currentImage}
+          alt={"Not found"}
+        />
+      </div>
     );
 };