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