Accordion.tsx•1.57 kB
import classNames from "classnames";
import { CaretIcon } from "../Icons";
export interface AccordionProps {
isOpen: boolean;
title: React.ReactNode;
openAccordion: () => void;
closeAccordion: () => void;
tools?: React.ReactNode;
children: React.ReactNode;
className?: string;
contentClassName?: string;
switchCaretPosition?: boolean;
}
export default function Accordion({ title, tools, children, isOpen, openAccordion, closeAccordion, className, contentClassName, switchCaretPosition = false }: AccordionProps) {
return (
<div className={classNames("flex flex-col", className)}>
<div className="flex flex-row justify-between items-center">
<button className={classNames("flex flex-row items-center pr-2", switchCaretPosition ? "gap-1.5" : "gap-4")} onClick={isOpen ? closeAccordion : openAccordion}>
{switchCaretPosition ? (
<>
<CaretIcon className={classNames("transition-transform", isOpen ? "rotate-360" : "rotate-270")} />
{title}
</>
) : (
<>
{title}
<CaretIcon className={classNames("transition-transform", isOpen ? "rotate-0" : "rotate-180")} />
</>
)}
</button>
{tools}
</div>
{isOpen && (
<div className={classNames("grid transition-[grid-template-rows] duration-300 ease-in-out [grid-template-rows:0fr]", contentClassName, {
"[grid-template-rows:1fr]": isOpen,
})}>
{children}
</div>
)}
</div>
);
}