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>