From 50b736e4a7ca8bcf2558c78db7e87e106adbda87 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Wed, 22 Jun 2022 21:22:13 +0200
Subject: [PATCH] feat: implement Accordion component

---
 src/components/Accordion.tsx | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/Accordion.tsx

diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
new file mode 100644
index 0000000..14e8a53
--- /dev/null
+++ b/src/components/Accordion.tsx
@@ -0,0 +1,39 @@
+import { createSignal, FlowComponent, JSX, mergeProps } from "solid-js";
+import Collapsible from "./Collapsible";
+
+const createAccordion = (defaultItem: number | null = 0) => {
+  const [item, setItem] = createSignal(defaultItem);
+  const AccordionItem: FlowComponent<{
+    label?: JSX.Element;
+    item?: number;
+    activeTitleColor?: string;
+  }> = (p) => {
+    const props = mergeProps({ item: Math.random() }, p);
+
+    return (
+      <Collapsible
+        class="border-b-0 last:border-b first:rounded-t last:rounded-b"
+        value={item() === props.item}
+        label={
+          <div class="flex justify-center items-center gap-2">
+            {props.label}
+          </div>
+        }
+        activeTitleColor={props.activeTitleColor}
+        onChange={(evt: any) =>
+          setItem(evt.currentTarget.checked && props.item)
+        }
+      >
+        {props.children}
+      </Collapsible>
+    );
+  };
+
+  return [AccordionItem, item, setItem] as [
+    typeof AccordionItem,
+    typeof item,
+    typeof setItem
+  ];
+};
+
+export default createAccordion;