Merge pull request #15 from nandanpi/dev

Event Page

src/lib/components/CardGrids/EventCardgrid.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+
+    import type EventCardType from "$lib/components/types/EventCardType";
+    const options: Intl.DateTimeFormatOptions = {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    };
+    export let data:EventCardType;
+
+</script>
+
+
+<div class={`grid-container gap-10 mx-20 py-16 `}>
+    {#each data.Data as event}
+        <div class="flex flex-col w-full">
+            <div class={'bg-muted-light dark:bg-muted-dark rounded-lg shadow-xl dark:drop-shadow-md dark:custom-shadow-black py-8 px-5 flex-1'}>
+                <div class={'flex justify-center'}>
+                    {#if event.image}
+                        <img src={event?.image} alt={event.title} class={'object-cover border border-muted-light dark:border-muted-dark'}/>
+                    {/if}
+                </div>
+                <h1 class={'text-2xl font-bold py-4 text-center'}>{event.title}</h1>
+                {#if event.date}
+                    <h2 class={'text-xl'}>Date: {event.date.toDate().toLocaleDateString(undefined, options)}</h2>
+                {/if}
+                {#if event.time}
+                    <h2 class={'text-xl'}>Time: {event.time}</h2>
+                {/if}
+                {#if event.venue}
+                    <h2 class={'text-xl'}>Venue: {event?.venue}</h2>
+                {/if}
+
+                <div class="flex justify-center items-center pt-4">
+                    {#if event.registrationLink}
+                        <a href={`${event.registrationLink}`} target="_blank">
+                            <button class="bg-brand text-white px-4 py-2 rounded-xl hover:scale-110 duration-200">
+                                Register Now
+                            </button>
+                        </a>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style>
+    .grid-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+        justify-items: center;
+        justify-content: end;
+        align-content: end;
+        row-gap: 4rem;
+    }
+</style>

src/lib/components/types/EventCardType.ts

@@ -0,0 +1,16 @@
+export default interface EventCardType {
+    Data: Array<{
+        id: number;
+        title: string;
+        image: string;
+        date: Date;
+        time: string;
+        venue: string;
+        organizers: string;
+        description: string;
+        guests: string;
+        winners: string;
+        reportLink: string;
+        registrationLink: string;
+    }>
+}

src/lib/data/NavItems.ts

@@ -13,7 +13,7 @@ export const NAVITEM = [
     },
     {
         title: 'Events',
-        href: '/events'
+        href: '/events/upcoming'
     },
     {
         title: 'Handbook',

src/routes/events/[type]/+page.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import EventCardgrid from "$lib/components/CardGrids/EventCardgrid.svelte";
+    import {page} from "$app/stores";
+    let eventType = $page.params.type;
+    import type EventCardType from "$lib/components/types/EventCardType";
+    export let data: EventCardType;
+
+</script>
+
+<div class={`${eventType === 'upcoming' ? 'h-screen' : ''}`}>
+    <div class={'flex w-full justify-center md:space-x-16 space-x-8 font-bold pt-16'}>
+        <a href="/events/previous">
+            <button class={`md:text-2xl text-xl ${eventType === 'previous' ? 'underline underline-offset-4' : 'no-underline'}`} on:click={() => eventType = "previous"}>
+                Previous Events
+            </button>
+        </a>
+        <a href="/events/upcoming">
+            <button class={`md:text-2xl text-xl ${eventType === 'upcoming' ? 'underline underline-offset-4' : 'no-underline'}`}  on:click={() => eventType = "upcoming" }>
+                Upcoming Events
+            </button>
+        </a>
+    </div>
+
+    <EventCardgrid data={data}/>
+</div>

src/routes/events/[type]/+page.ts

@@ -0,0 +1,19 @@
+import { db } from '$lib/firebase/firebase';
+import { collection, getDocs } from "firebase/firestore";
+import type { PageLoad } from './$types';
+
+// @ts-ignore
+export const load = (async ({params}) => {
+    const postSnapshot = await getDocs(collection(db, 'events',params.type,'eventId'));
+    const Data = [];
+    for (const doc of postSnapshot.docs) {
+        Data.push(doc.data());
+    }
+    if(params.type === 'previous'){
+        Data.reverse();
+    }
+    return {Data};
+})satisfies PageLoad;
+
+
+