54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
"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>
|
|
)
|
|
}
|