Add List component for rendering item lists
This commit is contained in:
18
src/components/List.js
Normal file
18
src/components/List.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { $html, $if, $for } from "sigpro";
|
||||||
|
import { joinClass, val } from "../core/utils.js";
|
||||||
|
|
||||||
|
/** LIST */
|
||||||
|
export const List = (props) => {
|
||||||
|
const { items, header, render, keyFn, class: className } = props;
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"ul",
|
||||||
|
{
|
||||||
|
class: joinClass("list bg-base-100 rounded-box shadow-md", className),
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])),
|
||||||
|
$for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user