New Dashboard

src/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/components/utils.js";
+
+	type $$Props = AccordionPrimitive.TriggerProps;
+	type $$Events = AccordionPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let level: AccordionPrimitive.HeaderProps["level"] = 3;
+	export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>