|
|
|
@ -4,18 +4,24 @@ import Collapsible from "./Collapsible";
|
|
|
|
|
const createAccordion = (defaultItem: number | null = 0) => {
|
|
|
|
|
const [item, setItem] = createSignal(defaultItem);
|
|
|
|
|
const AccordionItem: FlowComponent<{
|
|
|
|
|
alignCenter?: boolean;
|
|
|
|
|
label?: JSX.Element;
|
|
|
|
|
item?: number;
|
|
|
|
|
activeTitleColor?: string;
|
|
|
|
|
}> = (p) => {
|
|
|
|
|
const props = mergeProps({ item: Math.random() }, p);
|
|
|
|
|
const props = mergeProps({ alignCenter: true, item: Math.random() }, p);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Collapsible
|
|
|
|
|
class="border-b-0 last:border-b first:rounded-t last:rounded-b"
|
|
|
|
|
value={item() === props.item}
|
|
|
|
|
label={
|
|
|
|
|
<div class="flex justify-center items-center gap-2">
|
|
|
|
|
<div
|
|
|
|
|
classList={{
|
|
|
|
|
"flex items-center gap-2": true,
|
|
|
|
|
"justify-center": props.alignCenter,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{props.label}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|