feat: implement Accordion component
parent
794606072e
commit
50b736e4a7
@ -0,0 +1,39 @@
|
||||
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<{
|
||||
label?: JSX.Element;
|
||||
item?: number;
|
||||
activeTitleColor?: string;
|
||||
}> = (p) => {
|
||||
const props = mergeProps({ 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">
|
||||
{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;
|
Loading…
Reference in New Issue