remove skeleton ui

src/components/event/EventBlock.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PortableText } from '@portabletext/svelte';
+	//import { PortableText } from '@portabletext/svelte';
 	import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } from '@lucide/svelte';
 	import RichText from 'components/RichText.svelte';
 

src/components/event/EventTabsContent.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-	import { Tabs } from '@skeletonlabs/skeleton-svelte';
 	import EventBlock from 'components/event/EventBlock.svelte';
-	import type { EventPost } from '$lib/schemas';
+	import type { EventPost, Category } from '$lib/schemas';
 
-	type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical';
-
-	let { value, category, events } = $props<{
-		value: Category;
+	let { category, events } = $props<{
 		category: Category;
 		events: EventPost[];
 	}>();
@@ -66,18 +62,18 @@
 
 	const upcomingEvents = $derived(
 		filtered
-			.filter((e) => !isPastEvent(e.date))
-			.sort((a, b) => parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime())
+			.filter((e: { date: string; }) => !isPastEvent(e.date))
+			.sort((a: { date: string; }, b: { date: string; }) => parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime())
 	);
 
 	const finishedEvents = $derived(
 		filtered
-			.filter((e) => isPastEvent(e.date))
-			.sort((a, b) => parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime())
+			.filter((e: { date: string; }) => isPastEvent(e.date))
+			.sort((a: { date: string; }, b: { date: string; }) => parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime())
 	);
 </script>
 
-<Tabs.Content {value}>
+<div>
 	<div class="space-y-12 px-4 py-8 lg:px-8">
 		<!-- Upcoming Events -->
 		{#if upcomingEvents.length > 0}
@@ -139,4 +135,4 @@
 			</div>
 		{/if}
 	</div>
-</Tabs.Content>
+</div>

src/components/event/EventTabsTrigger.svelte

@@ -1,15 +1,14 @@
 <script>
-	import { Tabs } from '@skeletonlabs/skeleton-svelte';
-	let { value, children } = $props();
+	let { value, onclick, children } = $props();
+
 </script>
 
-<Tabs.Trigger {value}>
-	{#snippet element(attributes)}
-		<button
-			{...attributes}
-			class="hover:border-b-ecsess-200 data-[state=active]:border-b-ecsess-400 border-b-4 border-b-transparent px-2 pb-2 text-lg transition-all ease-in-out"
-		>
-			{@render children()}
-		</button>
-	{/snippet}
-</Tabs.Trigger>
+<div>
+	<button
+		{value}
+		onclick={() => onclick(value)}
+		class="hover:border-b-ecsess-200 data-[state=active]:border-b-ecsess-400 border-b-4 border-b-transparent px-2 pb-2 text-lg transition-all ease-in-out"
+	>
+		{@render children()}
+	</button>
+</div>

src/lib/schemas.ts

@@ -13,6 +13,9 @@ export type EventPost = {
 	paylink: string; // event payment link (e.g., Zeffy)
 };
 
+export type Category = 'allEvents' | 'academic' | 'professional' | 'social' | 'technical';
+
+
 export type FAQ = {
 	question: string;
 	answer: string;

src/routes/events/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import type { EventPost } from '$lib/schemas';
-	import { Tabs } from '@skeletonlabs/skeleton-svelte';
+	import type { EventPost, Category } from '$lib/schemas';
 	import Section from 'components/layout/Section.svelte';
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import EventTabsTrigger from 'components/event/EventTabsTrigger.svelte';
@@ -9,7 +8,18 @@
 	let { data } = $props();
 
 	let events: EventPost[] = data.events ?? [];
-	let group = $state('allEvents');
+	let group = $state<Category>('allEvents');
+	let categories: {value: Category; label: string}[] = [
+	{ value: 'allEvents', label: 'All Events' },
+	{ value: 'academic', label: 'Academic' },
+	{ value: 'professional', label: 'Professional' },
+	{ value: 'social', label: 'Social' },
+	{ value: 'technical', label: 'Technical' }
+];
+	// Handle tab change
+	function handleTabChange(selectedCategory: Category) {
+		group = selectedCategory;
+	}
 </script>
 
 <SeoMetaTags
@@ -21,19 +31,13 @@
 <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-600" direction="to-b">
 	<p class="page-title">Events</p>
 
-	<Tabs value={group} onValueChange={(e) => (group = e.value)} composite={true}>
-		<Tabs.List>
-			<EventTabsTrigger value="allEvents">All Events</EventTabsTrigger>
-			<EventTabsTrigger value="academic">Academic</EventTabsTrigger>
-			<EventTabsTrigger value="professional">Professional</EventTabsTrigger>
-			<EventTabsTrigger value="social">Social</EventTabsTrigger>
-			<EventTabsTrigger value="technical">Technical</EventTabsTrigger>
-		</Tabs.List>
+	<div>
+		<ul class="flex justify-center flex-wrap gap-2">
+			{#each categories as category}
+				<EventTabsTrigger value={category.value} onclick={handleTabChange}>{category.label}</EventTabsTrigger>
+			{/each}
+		</ul>
 
-		<EventTabsContent value="allEvents" category="allEvents" {events} />
-		<EventTabsContent value="academic" category="academic" {events} />
-		<EventTabsContent value="professional" category="professional" {events} />
-		<EventTabsContent value="social" category="social" {events} />
-		<EventTabsContent value="technical" category="technical" {events} />
-	</Tabs>
+		<EventTabsContent category={group} {events} />
+	</div>
 </Section>