created event display page

calblueprint · Oct 26, 2024 · bb5fee7 · bb5fee7
1 parent 6b0eec8
commit bb5fee7
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 83 deletions.
diff --git a/app/events/page.style.ts b/app/events/page.style.ts
@@ -12,15 +12,30 @@ export const Image = styled(NextImage)`
 `;
 
 export const Page = styled.main`
-  background: ${COLORS.gray1};
+  background-color: ${COLORS.gray1};
+  flex-direction: column;
+  min-width: 100%;
+  min-height: 100svh;
+  overflow: hidden;
+`;
+
+export const AllEventsHolder = styled.main`
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 `;
 
 export const Title = styled(H3)`
   font-style: normal;
   line-height: normal;
+  height: 50px;
 `;
 
 export const MonthYear = styled(H6)`
   font-style: normal;
   line-height: normal;
+  gap: 24px;
+  display: flex;
+  margin-top: 24px;
 `;
diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -37,21 +37,40 @@ export default function EventPage() {
 
   const eventsByMonth = groupEventsByMonth(data);
 
+  // Sort the events by month
+  const sortedEntries = Object.entries(eventsByMonth).sort((a, b) => {
+    const dateA = new Date(a[0]); // Month Year string from a
+    const dateB = new Date(b[0]); // Month Year string from b
+    return dateA.getTime() - dateB.getTime(); // Compare timestamps
+  });
+
+  // Sort events within each month by their start date
+  sortedEntries.forEach(([, events]) => {
+    events.sort((a, b) => {
+      return (
+        new Date(a.start_date_time).getTime() -
+        new Date(b.start_date_time).getTime()
+      );
+    });
+  });
+
   return (
     <styles.Page>
-      <styles.Title $fontWeight="500" $color="#000" $align="left">
-        Upcoming Events
-      </styles.Title>
-      {Object.entries(eventsByMonth).map(([month, events]) => (
-        <div key={month}>
-          <styles.MonthYear $fontWeight="500" $color="#000" $align="left">
-            {month}
-          </styles.MonthYear>
-          {events.map(event => (
-            <MyEventCard key={event.event_id} {...event} />
-          ))}
-        </div>
-      ))}
+      <styles.AllEventsHolder>
+        <styles.Title $fontWeight="500" $color="#000" $align="left">
+          Upcoming Events
+        </styles.Title>
+        {sortedEntries.map(([month, events]) => (
+          <div key={month}>
+            <styles.MonthYear $fontWeight="500" $color="#000" $align="left">
+              {month}
+            </styles.MonthYear>
+            {events.map(event => (
+              <MyEventCard key={event.event_id} {...event} />
+            ))}
+          </div>
+        ))}
+      </styles.AllEventsHolder>
     </styles.Page>
   );
 }
diff --git a/components/MyEventCard/MyEventCard.tsx b/components/MyEventCard/MyEventCard.tsx
@@ -1,22 +1,28 @@
 import React from 'react';
 import BPLogo from '@/assets/images/bp-logo.png';
-import { Event } from '../../types/schema';
+import COLORS from '@/styles/colors';
+import { Event } from '@/types/schema';
 import * as styles from './style';
 
 export default function MyEventCard(eventData: Event) {
   const eventStart = new Date(eventData.start_date_time);
   const eventEnd = new Date(eventData.end_date_time);
 
-  const startTime = eventStart.toLocaleTimeString([], {
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: true,
-  });
-  const endTime = eventEnd.toLocaleTimeString([], {
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: true,
-  });
+  const formatTime = (date: Date) => {
+    const hour = date.toLocaleTimeString([], { hour: 'numeric', hour12: true });
+    const minutes = date.getMinutes();
+
+    return minutes === 0
+      ? hour
+      : date.toLocaleTimeString([], {
+          hour: 'numeric',
+          minute: '2-digit',
+          hour12: true,
+        });
+  };
+
+  const startTime = formatTime(eventStart);
+  const endTime = formatTime(eventEnd);
 
   const monthNames = [
     'Jan',
@@ -36,19 +42,27 @@ export default function MyEventCard(eventData: Event) {
 
   return (
     <styles.EventContainer>
-      <styles.DateContainer>
-        <styles.MonthText>{monthText}</styles.MonthText>
-        <styles.DateText>{eventStart.getDate()}</styles.DateText>
-      </styles.DateContainer>
       <styles.EventCardContainer>
+        <styles.BPImage src={BPLogo} alt="Blueprint Logo" />
         <div>
-          <styles.TimeText>
-            {startTime} - {endTime}
+          <styles.TimeText $fontWeight="400" $color="#000" $align="left">
+            {monthText} {eventStart.getDate()}, {startTime} - {endTime}
           </styles.TimeText>
-          <styles.EventDescriptionText>placeholder</styles.EventDescriptionText>
-          <styles.LocationText>placeholder</styles.LocationText>
+          <styles.EventDescriptionText
+            $fontWeight="500"
+            $color="#000"
+            $align="left"
+          >
+            placeholder
+          </styles.EventDescriptionText>
+          <styles.LocationText
+            $fontWeight="500"
+            $color={COLORS.gray10}
+            $align="left"
+          >
+            placeholder
+          </styles.LocationText>
         </div>
-        <styles.Image src={BPLogo} alt="Blueprint Logo" />
       </styles.EventCardContainer>
     </styles.EventContainer>
   );

diff --git a/components/MyEventCard/style.ts b/components/MyEventCard/style.ts
@@ -2,10 +2,10 @@
 
 import NextImage from 'next/image';
 import styled from 'styled-components';
+import { P, SMALLER } from '@/styles/text';
 import COLORS from '../../styles/colors';
-import { BespokeSans } from '../../styles/fonts';
 
-export const Image = styled(NextImage)`
+export const BPImage = styled(NextImage)`
   layout: responsive;
   width: 20%;
   height: 90%;
@@ -14,70 +14,33 @@ export const Image = styled(NextImage)`
 export const EventContainer = styled.main`
   margin: auto;
   width: 100%;
-  display: flex;
-  padding: 16px;
-  justify-content: flex-start;
-  align-items: flex-start;
-`;
-
-export const DateContainer = styled.main`
-  width: 10%;
+  padding-top: 24px;
 `;
-
 export const EventCardContainer = styled.main`
-  width: 65%;
+  width: 100%;
   padding: 16px;
   background: ${COLORS.bread1};
   border-radius: 8px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
+  gap: 1.5rem;
 `;
 
-export const MonthText = styled.main`
-  color: #000;
-  text-align: center;
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-`;
-
-export const DateText = styled.main`
-  color: #000;
-  text-align: center;
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-`;
-
-export const TimeText = styled.main`
-  color: #000;
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 12px;
+export const TimeText = styled(SMALLER)`
   font-style: normal;
-  font-weight: 400;
   line-height: normal;
 `;
 
-export const EventDescriptionText = styled.main`
-  color: #000;
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 16px;
+export const EventDescriptionText = styled(P)`
   font-style: normal;
-  font-weight: 500;
   line-height: normal;
 `;
 
-export const LocationText = styled.main`
+export const LocationText = styled(SMALLER)`
   color: ${COLORS.gray10};
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 12px;
   font-style: normal;
-  font-weight: 400;
   line-height: normal;
 `;
 

diff --git a/styles/text.ts b/styles/text.ts
@@ -51,11 +51,17 @@ export const H6 = styled.h6<TextProps>`
 export const P = styled.p<TextProps>`
   ${TextStyles}
   font-size: 1rem;
-  font-weight: 400;
+  // font-weight: 400;
 `;
 
 export const SMALL = styled.p<TextProps>`
   ${TextStyles}
   font-size: .875rem;
-  font-weight: 400;
+  // font-weight: 400;
+`;
+
+export const SMALLER = styled.p<TextProps>`
+  ${TextStyles}
+  font-size: .75rem;
+  // font-weight: 400;
 `;