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