Deletes old project

app/src/lib/components/SettingsCard.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import Down from '~icons/tabler/chevron-down';
+	export let open = true;
+	export let collapsible = true;
+</script>
+
+{#if collapsible}
+	<div
+		class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+	>
+		<div
+			class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+		>
+			<span class="inline-flex items-baseline">
+				<slot name="icon" />
+				<slot name="title" />
+			</span>
+			<button
+				class="btn btn-circle btn-ghost btn-sm"
+				on:click={() => {
+					open = !open;
+				}}
+			>
+				<Down
+					class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open
+						? 'rotate-180'
+						: ''}"
+				/>
+			</button>
+		</div>
+		{#if open}
+			<div
+				class="flex flex-col gap-2 p-4 pt-0"
+				transition:slide|local={{ duration: 300, easing: cubicOut }}
+			>
+				<slot />
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div
+		class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+	>
+		<div class="min-h-16 w-full p-4 text-xl font-medium">
+			<span class="inline-flex items-baseline">
+				<slot name="icon" />
+				<slot name="title" />
+			</span>
+		</div>
+		<div class="flex flex-col gap-2 p-4 pt-0">
+			<slot />
+		</div>
+	</div>
+{/if}