Added Accordion and AccordionItem Components

src/components/Content/Accordion/AccordionItem/AccordionItem.module.css

@@ -0,0 +1,56 @@
+.item {
+  & .summary {
+    --el-summary-marker-symbol-closed: "▾";
+    --el-summary-marker-symbol-open: "▾";
+    --el-summary-marker-symbol-transform-open: rotate(180deg);
+
+    position: relative;
+
+    padding: var(--spacing-snug);
+
+    font-family: var(--el-summary-font-family);
+    font-size: var(--el-summary-font-size);
+    font-weight: var(--el-summary-font-weight);
+    line-height: var(--el-summary-line-height);
+    color: var(--el-summary-fg);
+    text-transform: var(--el-summary-text-transform);
+    list-style: none;
+
+    background: var(--el-summary-bg);
+
+    &::before {
+      content: var(--el-summary-marker-symbol-closed);
+
+      position: absolute;
+      right: 0;
+
+      font-size: 1em;
+
+      transition: transform 0.2s ease;
+    }
+  }
+
+  & .content {
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 2s ease;
+
+    & .inner {
+      min-height: 0;
+    }
+  }
+
+  &[open] {
+    & .summary {
+      &::before {
+        content: var(--el-summary-marker-symbol-open);
+        transform: var(--el-summary-marker-symbol-transform-open);
+      }
+    }
+
+    & .content {
+      grid-template-rows: 1fr;
+    }
+  }
+}

src/components/Content/Accordion/AccordionItem/index.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+
+import styles from './AccordionItem.module.css';
+
+interface AccordionItemProps {
+  title: string;
+  defaultOpen: boolean;
+  children: React.ReactNode;
+}
+
+export default function AccordionItem({
+  title,
+  defaultOpen,
+  children,
+}: AccordionItemProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  return (
+    <details
+      className={styles.item}
+      open={isOpen}
+      onToggle={(e) => setIsOpen(e.currentTarget.open)}
+    >
+      <summary
+        className={styles.summary}
+        onClick={(e) => {
+          e.preventDefault();
+          setIsOpen(!isOpen);
+        }}
+      >
+        {title}
+      </summary>
+      <div className={styles.content}>
+        <div className={styles.inner}>{children}</div>
+      </div>
+    </details>
+  );
+}

src/components/Content/Accordion/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import styles from './Accordion.module.css';
+
+interface AccordionProps {
+  children: React.ReactNode;
+}
+
+export default function Accordion({ children }: AccordionProps) {
+  return <div className={styles.accordion}>{children}</div>;
+}