36 lines
1.0 KiB
JavaScript
36 lines
1.0 KiB
JavaScript
// components/Drawer.js
|
|
import { Tag } from "sigpro";
|
|
|
|
export const Drawer = (props) => {
|
|
const { class: className, id, open, content, children, ...rest } = props;
|
|
|
|
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
|
|
|
|
return Tag("div", {
|
|
...rest,
|
|
class: `drawer ${className || ''}`.trim()
|
|
}, [
|
|
Tag("input", {
|
|
id: drawerId,
|
|
type: "checkbox",
|
|
class: "drawer-toggle",
|
|
checked: () => typeof open === "function" ? open() : open,
|
|
onchange: (e) => {
|
|
if (typeof open === "function") open(e.target.checked);
|
|
}
|
|
}),
|
|
Tag("div", { class: "drawer-content" }, children),
|
|
Tag("div", { class: "drawer-side" }, [
|
|
Tag("label", {
|
|
for: drawerId,
|
|
class: "drawer-overlay",
|
|
onclick: () => {
|
|
if (typeof open === "function") open(false);
|
|
}
|
|
}),
|
|
Tag("div", { class: "min-h-full bg-base-200 w-80 p-4" }, [
|
|
typeof content === "function" ? content() : content
|
|
])
|
|
])
|
|
]);
|
|
}; |