feat: discover page

added new event components and page that shows all the active events in teh events database

api/supabase/queries/events.ts

@@ -10,3 +10,16 @@ export async function fetchAllEvents() {
 
   return data;
 }
+
+// fetches all events that have event_status = 'ACTIVE'
+export async function fetchAllActiveEvents() {
+  const { data, error } = await supabase
+    .from('events')
+    .select('*')
+    .eq('event_status', 'ACTIVE');
+  if (error) {
+    throw new Error(error.message);
+  }
+
+  return data;
+}

app/activeEvents/page.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { H6, SMALL } from '@/styles/text';
+import { fetchAllActiveEvents } from '../../api/supabase/queries/events';
+import EventListingCard from '../../components/EventListingCard/EventListingCard';
+import { Event } from '../../types/schema';
+import {
+  Container,
+  Discover,
+  EventListingDiv,
+  SearchBar,
+  TitleBar,
+} from './styles';
+
+function MenuBar() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z"
+        fill="#621D1E"
+      />
+    </svg>
+  );
+}
+export default function Page() {
+  const [events, setEvents] = useState<Event[]>([]);
+
+  useEffect(() => {
+    const getActiveEvents = async () => {
+      const fetchedActiveEvents: Event[] = await fetchAllActiveEvents();
+      setEvents(fetchedActiveEvents);
+    };
+    getActiveEvents();
+  }, [events]);
+
+  return (
+    <Container>
+      {MenuBar()}
+      <Discover $fontWeight="500"> Discover </Discover>
+      <SearchBar>
+        <SMALL> Search... </SMALL>
+      </SearchBar>
+      <TitleBar>
+        <H6 $fontWeight="500"> Near You </H6>
+        <SMALL $color="purple"> show all </SMALL>
+      </TitleBar>
+      <EventListingDiv>
+        {events.map(event => (
+          <EventListingCard key={event.event_id} genre={event.genre} />
+        ))}
+      </EventListingDiv>
+    </Container>
+  );
+}

app/activeEvents/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { H3 } from '@/styles/text';
+
+export const EventListingDiv = styled.div`
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  scrollbar-width: none;
+  gap: 1.5rem;
+  display: flex;
+  &::-website-scrollbar {
+    display: none;
+  }
+`;
+
+export const SearchBar = styled.div`
+  width: 90%;
+  height: 2.25rem;
+  line-height: 2.25rem;
+  padding-left: 1rem;
+  border-radius: 0.5rem;
+  background-color: #d9d9d940;
+  margin-top: 1.25rem;
+`;
+
+export const TitleBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 2rem;
+  margin-bottom: 0.25rem;
+`;
+
+export const Container = styled.div`
+  padding: 2rem;
+`;
+
+export const Discover = styled(H3)`
+  padding-top: 1.5rem;
+`;

components/EventListingCard/EventListingCard.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { EventListing } from './styles';
+
+export default function EventListingCard({ genre }: { genre: string }) {
+  return <EventListing> {genre} </EventListing>;
+}

components/EventListingCard/styles.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const EventListing = styled.div`
+  height: 9.625rem;
+  width: 12.375rem;
+  display: inline-block;
+  background-color: #d9d9d940;
+  border-radius: 1rem;
+`;