first commit

src/components/display/accordion/Accordion.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import clsx from "clsx";
+// import "./accordion.css";
+
+
+export type AccordionItemData = {
+  value: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+};
+
+export function Accordion(props: {
+  items: AccordionItemData[];
+  type?: "single" | "multiple";
+  defaultValue?: string | string[];
+  collapsible?: boolean;
+  className?: string;
+  chevron?: React.ReactNode;
+}) {
+  const { items, type = "single", defaultValue, collapsible = true, className, chevron } = props;
+
+  return (
+    <RadixAccordion.Root
+      className={clsx("ui-acc", className)}
+      type={type as any}
+      defaultValue={defaultValue as any}
+      collapsible={collapsible}
+    >
+      {items.map((it) => (
+        <RadixAccordion.Item key={it.value} className="ui-acc__item" value={it.value}>
+          <RadixAccordion.Header>
+            <RadixAccordion.Trigger className="ui-acc__trigger">
+              <span className="ui-acc__title">{it.title}</span>
+              <span className="ui-acc__chevron" aria-hidden>
+                {chevron ?? "▾"}
+              </span>
+            </RadixAccordion.Trigger>
+          </RadixAccordion.Header>
+          <RadixAccordion.Content className="ui-acc__content">{it.content}</RadixAccordion.Content>
+        </RadixAccordion.Item>
+      ))}
+    </RadixAccordion.Root>
+  );
+}