From 922aa1a4d4100c85892751d0f1c80c03ae37f99e Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Thu, 8 Jan 2026 21:03:02 -0500
Subject: [PATCH] Phase out Skeleton UI in FAQ Accordion

---
 src/components/homepage/FAQAccordion.svelte | 73 +++++++++++++--------
 1 file changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/components/homepage/FAQAccordion.svelte b/src/components/homepage/FAQAccordion.svelte
index 5fa9f38..34422f5 100644
--- a/src/components/homepage/FAQAccordion.svelte
+++ b/src/components/homepage/FAQAccordion.svelte
@@ -1,26 +1,47 @@
 <script lang="ts">
 	import type { FAQ } from '$lib/schemas';
-	import { Accordion } from '@skeletonlabs/skeleton-svelte';
 	import { slide } from 'svelte/transition';
 
 	// Variable to be included into the component
 	let { entries }: { entries: FAQ[] } = $props();
+
+	// Track which items are open (supports multiple)
+	let openItems = $state<Set<number>>(new Set());
+
+	function toggleItem(index: number) {
+		const newSet = new Set(openItems);
+		if (newSet.has(index)) {
+			newSet.delete(index);
+		} else {
+			newSet.add(index);
+		}
+		openItems = newSet;
+	}
+
+	function isOpen(index: number): boolean {
+		return openItems.has(index);
+	}
 </script>
 
-<Accordion multiple class="space-y-3">
+<div class="space-y-3">
 	{#each entries as entry, index}
-		<Accordion.Item
-			value={index.toString()}
-			class="border-ecsess-300 hover:bg-ecsess-500/30 rounded-md border-2 transition-colors duration-200"
+		<div
+			class="border-ecsess-300 rounded-md border-2 transition-colors duration-200"
 		>
 			<!-- Question -->
-			<Accordion.ItemTrigger
-				class="flex w-full items-center gap-3 px-3 py-2 text-left text-lg font-bold"
+			<button
+				type="button"
+				onclick={() => toggleItem(index)}
+				class="flex w-full bg-ecsess-600/20 items-center gap-3 px-3 py-2 text-left text-lg font-bold hover:bg-ecsess-500/40 transition-colors duration-200 {isOpen(index)
+					? 'rounded-t-md'
+					: 'rounded-md'}"
 			>
 				{entry.question}
-				<Accordion.ItemIndicator class="group ml-auto">
+				<span class="ml-auto">
 					<svg
-						class="size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90"
+						class="size-5 shrink-0 transition-transform duration-200 {isOpen(index)
+							? 'rotate-90'
+							: ''}"
 						width="20"
 						height="20"
 						fill="none"
@@ -29,28 +50,24 @@
 						stroke-width="2"
 						viewBox="0 0 24 24"
 						stroke="currentColor"
-						><path d="M9 5l7 7-7 7" />
+					>
+						<path d="M9 5l7 7-7 7" />
 					</svg>
-				</Accordion.ItemIndicator>
-			</Accordion.ItemTrigger>
+				</span>
+			</button>
 
 			<!-- Panel -->
-			<Accordion.ItemContent class="border-t-ecsess-300 bg-ecsess-400/50 h-fit overflow-hidden">
-				{#snippet element(attributes)}
-					{#if !attributes.hidden}
-						<div
-							{...attributes}
-							class="border-t-ecsess-300 overflow-hidden border-t-2 px-4 py-3
-							 text-base leading-relaxed transition-all duration-200"
-							transition:slide={{ duration: 200 }}
-						>
-							{entry.answer}
-						</div>
-					{/if}
-				{/snippet}
-			</Accordion.ItemContent>
-		</Accordion.Item>
+			{#if isOpen(index)}
+				<div
+					class="border-t-ecsess-300 bg-transparent h-fit overflow-hidden border-t-2 px-4 py-3
+					 text-base leading-relaxed transition-all duration-200"
+					transition:slide={{ duration: 200 }}
+				>
+					{entry.answer}
+				</div>
+			{/if}
+		</div>
 	{/each}
-</Accordion>
+</div>
 
 <!--  -->