Event Page (#36)

* created event block component, tabs wip

* adding icons and changing type to EventPost

* refactor event block to tailwind (antoine help)

* revert nav bar to black

* using tabs from skeleton

* Fix Event tabs CSS classses and create Tab Control component

* adding space between the tabs

* created EventTabPanel component

* small styling fix

* sorting events by date

---------

Co-authored-by: Antoine Phan <antoine.phan@mail.mcgill.ca>

src/components/EventTabPanel.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+	import EventBlock from 'components/EventBlock.svelte';
+	import type { EventPost } from '$lib/schemas';
+
+	type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical';
+
+	let { value, category, events } = $props<{
+		value: Category; 
+		category: Category;
+		events: EventPost[];
+	}>();
+
+	const matchCategory = (e: EventPost): boolean => {
+		if (category === 'allEvents') return true;
+		const c: unknown = e.category ?? [];
+		return Array.isArray(c) ? c.includes(category) : (c as string) === category;
+	};
+
+	const filtered = $derived((events ?? []).filter(matchCategory));
+</script>
+
+<Tabs.Panel {value}>
+	<div class="flex flex-wrap gap-4 m-1 lg:m-4">
+		{#each filtered as e (e._id ?? e.name)}
+			<EventBlock
+				eventTitle={e.name}
+				date={e.date}
+				location={e.location}
+				eventDescription={e.description}
+				thumbnail={e.thumbnail}
+				registrationLink={e.reglink}
+				paymentLink={e.paylink}
+				eventCategory={e.category}
+			/>
+		{/each}
+	</div>
+</Tabs.Panel>