Tables

import { AvatarColor, AvatarSize } from "@hedia/windfall/css/avatars";
import { BadgeColor } from "@hedia/windfall/css/badges";
import { ChartColor, ChartSize } from "@hedia/windfall/css/charts";
import { LinkKind } from "@hedia/windfall/css/links";
import { avatar } from "@hedia/windfall/html/avatars";
import { badge } from "@hedia/windfall/html/badges";
import { chart, ChartKind } from "@hedia/windfall/html/charts";
import { link } from "@hedia/windfall/html/links";
import { caption, table, tbody, td, th, thead, tr } from "@hedia/html/elements";

table(
	{ class: "table" },
	caption("Users"),
	thead(tr(th(), th("Name"), th("Email"), th("Status"), th("Role"), th(), th())),
	tbody(
		users.map((user) =>
			tr(
				td(avatar({ color: AvatarColor.Green, size: AvatarSize.Small }, user.initials)),
				td(user.name),
				td(user.email),
				td(badge({ color: BadgeColor.Green }, "Active")),
				td(user.role),
				td(
					chart({
						color: ChartColor.Green,
						data: new Array(7).fill(0).map(() => Math.random() * 1000),
						kind: ChartKind.Column,
						size: ChartSize.Small,
					}),
				),
				td(link({ href: "#", kind: LinkKind.Plain }, "Edit")),
			),
		),
	),
),