feat: added accordion component

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { useRef } from "react"
+
+import { ChevronDownIcon } from "@/components/Icons"
+
+import { AccordionItemProps } from "./accordionItem"
+import { accordionItemVariants } from "./variants"
+
+import styles from "./accordionItem.module.css"
+
+export default function AccordionItem({
+  children,
+  title,
+  variant,
+}: AccordionItemProps) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const detailsRef = useRef<HTMLDetailsElement>(null)
+
+  function toggleAccordion() {
+    const details = detailsRef.current
+    const content = contentRef.current
+    if (details && content) {
+      if (details.open) {
+        content.style.maxHeight = `${content.scrollHeight}px`
+        content.addEventListener(
+          "transitionend",
+          () => {
+            // Remove maxHeight after transition to allow content to transition multiple times
+            content.style.maxHeight = "none"
+          },
+          { once: true }
+        )
+      } else {
+        content.style.maxHeight = "0"
+      }
+    }
+  }
+
+  return (
+    <li className={accordionItemVariants({ variant })}>
+      <details ref={detailsRef} onToggle={toggleAccordion}>
+        <summary className={styles.summary}>
+          <span>{title}</span>
+          <ChevronDownIcon className={styles.chevron} color="burgundy" />
+        </summary>
+        <div ref={contentRef} className={styles.content}>
+          {children}
+        </div>
+      </details>
+    </li>
+  )
+}