You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { createSignal, FlowComponent, JSX, mergeProps } from "solid-js";
|
|
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({ 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
|
|
classList={{
|
|
"flex items-center gap-2": true,
|
|
"justify-center": props.alignCenter,
|
|
}}
|
|
>
|
|
{props.label}
|
|
</div>
|
|
}
|
|
activeTitleColor={props.activeTitleColor}
|
|
onChange={(evt: any) =>
|
|
setItem(evt.currentTarget.checked && props.item)
|
|
}
|
|
>
|
|
{props.children}
|
|
</Collapsible>
|
|
);
|
|
};
|
|
|
|
return [AccordionItem, item, setItem] as [
|
|
typeof AccordionItem,
|
|
typeof item,
|
|
typeof setItem
|
|
];
|
|
};
|
|
|
|
export default createAccordion;
|