46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import * as RadixAccordion from "@radix-ui/react-accordion";
|
|
import clsx from "clsx";
|
|
// import "./accordion.css";
|
|
|
|
|
|
export type AccordionItemData = {
|
|
value: string;
|
|
title: React.ReactNode;
|
|
content: React.ReactNode;
|
|
};
|
|
|
|
export function Accordion(props: {
|
|
items: AccordionItemData[];
|
|
type?: "single" | "multiple";
|
|
defaultValue?: string | string[];
|
|
collapsible?: boolean;
|
|
className?: string;
|
|
chevron?: React.ReactNode;
|
|
}) {
|
|
const { items, type = "single", defaultValue, collapsible = true, className, chevron } = props;
|
|
|
|
return (
|
|
<RadixAccordion.Root
|
|
className={clsx("ui-acc", className)}
|
|
type={type as any}
|
|
defaultValue={defaultValue as any}
|
|
collapsible={collapsible}
|
|
>
|
|
{items.map((it) => (
|
|
<RadixAccordion.Item key={it.value} className="ui-acc__item" value={it.value}>
|
|
<RadixAccordion.Header>
|
|
<RadixAccordion.Trigger className="ui-acc__trigger">
|
|
<span className="ui-acc__title">{it.title}</span>
|
|
<span className="ui-acc__chevron" aria-hidden>
|
|
{chevron ?? "▾"}
|
|
</span>
|
|
</RadixAccordion.Trigger>
|
|
</RadixAccordion.Header>
|
|
<RadixAccordion.Content className="ui-acc__content">{it.content}</RadixAccordion.Content>
|
|
</RadixAccordion.Item>
|
|
))}
|
|
</RadixAccordion.Root>
|
|
);
|
|
}
|