984e7895e8
* 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>
39 lines
1.0 KiB
Svelte
39 lines
1.0 KiB
Svelte
<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>
|