Add Dropdown component for UI
This commit is contained in:
37
src/components/Dropdown.js
Normal file
37
src/components/Dropdown.js
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val } from "../core/utils.js";
|
||||||
|
|
||||||
|
/** DROPDOWN */
|
||||||
|
export const Dropdown = (props, children) => {
|
||||||
|
const { label, icon, ...rest } = props;
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
class: () => `dropdown ${val(props.class) || props.class || ""}`,
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
tabindex: 0,
|
||||||
|
role: "button",
|
||||||
|
class: "btn m-1 flex items-center gap-2",
|
||||||
|
},
|
||||||
|
[
|
||||||
|
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||||
|
label ? (typeof label === "function" ? label() : label) : null
|
||||||
|
],
|
||||||
|
),
|
||||||
|
$html(
|
||||||
|
"ul",
|
||||||
|
{
|
||||||
|
tabindex: 0,
|
||||||
|
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
|
||||||
|
},
|
||||||
|
[typeof children === "function" ? children() : children],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user