33 lines
1.0 KiB
JavaScript
33 lines
1.0 KiB
JavaScript
// components/List.js
|
|
// import { Tag, If, For } from "../sigpro.js";
|
|
import { ui, val } from "../core/utils.js";
|
|
|
|
/**
|
|
* List component
|
|
*
|
|
* daisyUI classes used:
|
|
* - list, list-row, list-bullet, list-image, list-none
|
|
* - bg-base-100, rounded-box, shadow-md
|
|
* - p-4, pb-2, text-xs, opacity-60
|
|
* - flex, items-center, gap-2
|
|
*/
|
|
export const List = (props) => {
|
|
const { class: className, items, header, render = (item) => item, keyFn = (item, index) => item.id ?? index, ...rest } = props;
|
|
|
|
const listItems = For(
|
|
items,
|
|
(item, index) => Tag("li", {
|
|
class: "list-row",
|
|
style: "width: 100%; display: block;"
|
|
}, [
|
|
Tag("div", { style: "width: 100%;" }, [render(item, index)])
|
|
]),
|
|
keyFn
|
|
);
|
|
|
|
return Tag("ul", {
|
|
...rest,
|
|
style: "display: block; width: 100%;",
|
|
class: ui('list bg-base-100 rounded-box shadow-md', className),
|
|
}, header ? [If(header, () => Tag("li", { class: "p-4 pb-2 text-xs opacity-60", style: "width: 100%;" }, [val(header)])), listItems] : listItems);
|
|
}; |