From 71d01b1b3273c1873a5943dd4643e46416275d60 Mon Sep 17 00:00:00 2001
From: Shivani Nandakumar <snand021@ucr.edu>
Date: Wed, 22 Jan 2025 21:41:22 -0800
Subject: [PATCH 1/3] built an event, still need to add icons

---
 src/app/events/page.tsx         | 13 +++++++++--
 src/components/events/event.tsx | 39 +++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/components/events/event.tsx

diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 6d9ecf7..3f3321f 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -1,7 +1,16 @@
+import EventCard from "@/components/events/event";
+
 const Events = () => {
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      This is the Events Page
+    <div className="flex h-screen w-screen items-center justify-center bg-blue-950">
+      <EventCard
+        day="Mon"
+        date="09"
+        title="General Meeting"
+        location="Location"
+        time="3 pm"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan urna nec libero fringilla, ac fermentum purus tempus. Sed et nisi velit."
+      />
     </div>
   );
 };
diff --git a/src/components/events/event.tsx b/src/components/events/event.tsx
new file mode 100644
index 0000000..d6348ef
--- /dev/null
+++ b/src/components/events/event.tsx
@@ -0,0 +1,39 @@
+const EventCard = (props: {
+  day: string;
+  date: string;
+  title: string;
+  location: string;
+  time: string;
+  description: string;
+}) => {
+  return (
+    <div className="flex h-[251px] w-[1184px] items-center rounded-3xl bg-[#FFFFFF61]">
+      <div className="flex h-full w-1/5 flex-col items-center justify-center">
+        <div className="text-center font-questrial text-xl text-[#A7D6FD]">
+          {props.day}
+        </div>
+        <div className="text-center font-questrial text-7xl text-[#C3D0DF]">
+          {props.date}
+        </div>
+      </div>
+      <div className="flex h-full w-4/5 flex-col">
+        <div className="justify-start pl-[30px] pt-[45px] font-questrial text-4xl font-medium text-[#FFFFFF]">
+          {props.title}
+        </div>
+        <div className="flex h-[45px] w-[415px] flex-row gap-20 pl-[30px]">
+          <div className="h-[32px] w-[107px] pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+            {props.location}
+          </div>
+          <div className="h-[32px] w-[107px] pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+            {props.time}
+          </div>
+        </div>
+        <div className="h-[72px] w-[914px] pl-[30px] font-roboto text-lg text-[#BDBDBD]">
+          {props.description}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventCard;

From 29adc378b917d3c419c99760f0f0783fa9ab2cfc Mon Sep 17 00:00:00 2001
From: Shivani Nandakumar <snand021@ucr.edu>
Date: Tue, 28 Jan 2025 00:21:41 -0800
Subject: [PATCH 2/3] removed hard coded vals

---
 src/components/events/event.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/events/event.tsx b/src/components/events/event.tsx
index d6348ef..d9798cf 100644
--- a/src/components/events/event.tsx
+++ b/src/components/events/event.tsx
@@ -7,7 +7,7 @@ const EventCard = (props: {
   description: string;
 }) => {
   return (
-    <div className="flex h-[251px] w-[1184px] items-center rounded-3xl bg-[#FFFFFF61]">
+    <div className="flex h-1/4 w-3/4 items-center rounded-3xl bg-[#FFFFFF61]">
       <div className="flex h-full w-1/5 flex-col items-center justify-center">
         <div className="text-center font-questrial text-xl text-[#A7D6FD]">
           {props.day}
@@ -20,15 +20,15 @@ const EventCard = (props: {
         <div className="justify-start pl-[30px] pt-[45px] font-questrial text-4xl font-medium text-[#FFFFFF]">
           {props.title}
         </div>
-        <div className="flex h-[45px] w-[415px] flex-row gap-20 pl-[30px]">
-          <div className="h-[32px] w-[107px] pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+        <div className="flex h-2/8 w-1/2 flex-row gap-20 pl-[30px]">
+          <div className="h-1/8 w-1/5 pl-[40px] font-roboto text-lg text-[#A7D6FD]">
             {props.location}
           </div>
-          <div className="h-[32px] w-[107px] pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+          <div className="h-7/8 w-1/2 pl-[40px] font-roboto text-lg text-[#A7D6FD]">
             {props.time}
           </div>
         </div>
-        <div className="h-[72px] w-[914px] pl-[30px] font-roboto text-lg text-[#BDBDBD]">
+        <div className="h-full w-5/6 pl-[30px] font-roboto text-lg text-[#BDBDBD]">
           {props.description}
         </div>
       </div>

From c462dcad7263892d761bdd7277085aa4cfb8c5da Mon Sep 17 00:00:00 2001
From: Shivani Nandakumar <snand021@ucr.edu>
Date: Tue, 28 Jan 2025 00:40:51 -0800
Subject: [PATCH 3/3] fixed issue

---
 public/icons/locationIcon.svg   |  1 +
 public/icons/timeIcon.svg       |  1 +
 src/components/events/event.tsx | 17 ++++++++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 public/icons/locationIcon.svg
 create mode 100644 public/icons/timeIcon.svg

diff --git a/public/icons/locationIcon.svg b/public/icons/locationIcon.svg
new file mode 100644
index 0000000..94fb406
--- /dev/null
+++ b/public/icons/locationIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
\ No newline at end of file
diff --git a/public/icons/timeIcon.svg b/public/icons/timeIcon.svg
new file mode 100644
index 0000000..dea1ba9
--- /dev/null
+++ b/public/icons/timeIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
\ No newline at end of file
diff --git a/src/components/events/event.tsx b/src/components/events/event.tsx
index d9798cf..7a6b381 100644
--- a/src/components/events/event.tsx
+++ b/src/components/events/event.tsx
@@ -1,3 +1,7 @@
+import Image from "next/image";
+import locationIcon from "@/public/icons/locationIcon.svg";
+import timeIcon from "@/public/icons/timeIcon.svg";
+
 const EventCard = (props: {
   day: string;
   date: string;
@@ -20,11 +24,18 @@ const EventCard = (props: {
         <div className="justify-start pl-[30px] pt-[45px] font-questrial text-4xl font-medium text-[#FFFFFF]">
           {props.title}
         </div>
-        <div className="flex h-2/8 w-1/2 flex-row gap-20 pl-[30px]">
-          <div className="h-1/8 w-1/5 pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+        <div className="h-2/8 flex w-1/2 flex-row gap-20 pl-[30px]">
+          <div className="h-1/8 flex w-1/5 flex-row gap-2 pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+            <Image
+              src={locationIcon}
+              alt="Location Icon"
+              width={24}
+              height={24}
+            />
             {props.location}
           </div>
-          <div className="h-7/8 w-1/2 pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+          <div className="h-7/8 flex w-1/2 flex-row gap-2 pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+            <Image src={timeIcon} alt="Time Icon" width={24} height={24} />
             {props.time}
           </div>
         </div>