create-vanjs
Version:
🍦 Quick tool for scaffolding your first VanJS project
109 lines (102 loc) • 2.75 kB
text/typescript
import van from "vanjs-core";
import { Meta, Title } from "@vanjs/meta";
import { useRouteData } from "@vanjs/router";
import { getUsers } from "@/api";
type User = {
id: number;
name: string;
country: string;
company: string;
job: string;
color: string;
avatar: string;
};
export const route = {
load: async (_params?: Record<string, string>) => {
return await getUsers();
},
};
export const Page = () => {
const {
h1,
br,
button,
div,
img,
input,
label,
span,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
} = van.tags;
const data = useRouteData<User[]>();
Title("Users");
Meta({ name: "description", content: "Users description" });
return [
div(
{ class: "h-screen" },
div(
{ class: "p-4 m-auto" },
h1({ class: "text-5xl font-bold my-8" }, "Users"),
div(
{ class: "overflow-x-auto" },
table(
{ class: "table" },
thead(
tr(
th(label(input({ type: "checkbox", class: "checkbox" }))),
th("Name"),
th("Job"),
th("Favorite Color"),
th(),
),
),
tbody(
(() => {
return (data || []).map((user) =>
tr(
th(label(input({ type: "checkbox", class: "checkbox" }))),
td(
div(
{ class: "flex items-center gap-3" },
div(
{ class: "avatar" },
div(
{ class: "mask mask-squircle h-12 w-12" },
img({
src: user.avatar,
alt: "Avatar Tailwind CSS Component",
}),
),
),
div(
div({ class: "font-bold" }, user.name),
div({ class: "text-sm opacity-50" }, user.country),
),
),
),
td(
user.company,
br(),
span({ class: "badge badge-ghost badge-sm" }, user.job),
),
td(user.color),
th(button({ class: "btn btn-ghost btn-xs" }, "details")),
)
);
})(),
),
tfoot(
tr(th(), th("Name"), th("Job"), th("Favorite Color"), th()),
),
),
),
),
),
];
};