Accordion

1import { Accordion as KobalteAccordion } from "@kobalte/core/accordion";
2import { ChevronDown } from "lucide-solid";
3import type { Component, ComponentProps, JSX } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7const Accordion = KobalteAccordion;
8 
9const AccordionItem: Component<ComponentProps<typeof KobalteAccordion.Item>> = (props) => {
10  const [local, rest] = splitProps(props, ["class"]);
11  return <KobalteAccordion.Item class={cn("border-b", local.class)} {...rest} />;
12};
13 
14const AccordionTrigger: Component<
15  ComponentProps<typeof KobalteAccordion.Trigger> & { children?: JSX.Element }
16> = (props) => {
17  const [local, rest] = splitProps(props, ["class", "children"]);
18  return (
19    <KobalteAccordion.Header class="flex">
20      <KobalteAccordion.Trigger
21        class={cn(
22          "flex flex-1 items-center justify-between py-4 font-medium transition-all",
23          "hover:underline [&[data-expanded]>svg]:rotate-180",
24          local.class,
25        )}
26        {...rest}
27      >
28        {local.children}
29        <ChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" />
30      </KobalteAccordion.Trigger>
31    </KobalteAccordion.Header>
32  );
33};
34 
35const AccordionContent: Component<ComponentProps<typeof KobalteAccordion.Content>> = (props) => {
36  const [local, rest] = splitProps(props, ["class", "children"]);
37  return (
38    <KobalteAccordion.Content
39      class={cn(
40        "overflow-hidden text-sm transition-all",
41        "data-[expanded]:animate-accordion-down data-[closed]:animate-accordion-up",
42        local.class,
43      )}
44      {...rest}
45    >
46      <div class="pb-4 pt-0">{local.children}</div>
47    </KobalteAccordion.Content>
48  );
49};
50 
51export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };