aaa1776293
<!-- .github/pull_request_template.md --> ## Description <!-- Provide a clear description of the changes in this PR --> ## DCO Affirmation I affirm that all code in every commit of this pull request conforms to the terms of the Topoteretes Developer Certificate of Origin. --------- Co-authored-by: Daulet Amirkhanov <damirkhanov01@gmail.com>
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|