feat: implement Collapsible component

src/components/Collapsible.tsx

@@ -0,0 +1,61 @@
+import { FlowComponent, JSX, mergeProps } from "solid-js";
+
+const Collapsible: FlowComponent<
+  {
+    activeTitleColor?: string;
+    onChange?: JSX.EventHandler<HTMLInputElement, Event>;
+    value?: boolean;
+    label: string | JSX.Element;
+  } & JSX.HTMLAttributes<HTMLDivElement>
+> = (p) => {
+  const props = mergeProps({ activeTitleColor: "text-black" }, p);
+  let inputRef: HTMLInputElement = undefined!;
+
+  return (
+    <div
+      tabindex="0"
+      class={
+        "collapse collapse-plus border border-base-300 bg-base-100 " +
+        props.class
+      }
+      onFocus={(evt) => {
+        if (props.value) {
+          return;
+        }
+
+        evt.currentTarget.blur();
+        inputRef.checked = true;
+        inputRef.dispatchEvent(new InputEvent("change", { bubbles: true }));
+      }}
+    >
+      <input
+        ref={inputRef}
+        type="checkbox"
+        aria-label="Open"
+        checked={props.value}
+        onChange={(evt) => {
+          evt.currentTarget.blur();
+          if (props.onChange) {
+            props.onChange.call(this, evt);
+          }
+        }}
+      />
+      <div
+        classList={{
+          "collapse-title transition-colors duration-200 text-xl font-medium":
+            true,
+          [props.activeTitleColor]: props.value,
+        }}
+      >
+        {props.label}
+      </div>
+      <div class="collapse-content">
+        <div classList={{ "py-1": true, invisible: !props.value }}>
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Collapsible;