laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
60 lines (59 loc) • 2.57 kB
JavaScript
"use client";
import { jsx as e, jsxs as r, Fragment as p } from "react/jsx-runtime";
import { ScrollArea as x, ScrollBar as N } from "./scroll-area.js";
import { Table as w, TableHeader as g, TableRow as i, TableHead as t, TableBody as v, TableCell as c } from "./table.js";
import { Skeleton as d } from "./skeleton.js";
function S({
headerRow: a = [],
rowCount: h = 5,
columnCount: b = 5,
className: u,
cornerHeaderFrom: n,
cornerHeaderTo: m
}) {
const s = a.length > 0 ? a.length : b;
return /* @__PURE__ */ e("div", { className: `w-full ${u || ""}`, children: /* @__PURE__ */ e("div", { className: "border-d-border rounded-md border", children: /* @__PURE__ */ r(x, { className: "h-full w-full", children: [
/* @__PURE__ */ r(w, { className: "w-full table-fixed", children: [
/* @__PURE__ */ e(g, { children: /* @__PURE__ */ r(i, { children: [
/* @__PURE__ */ e(t, { className: "border-d-border relative min-h-[50px] min-w-[50px] border-r", children: n && m && /* @__PURE__ */ r(p, { children: [
/* @__PURE__ */ e("div", { className: "absolute top-2 left-2 text-xs", children: n }),
/* @__PURE__ */ e("div", { className: "absolute right-2 bottom-2 text-xs", children: m })
] }) }),
a.length > 0 ? a.map((o, l) => /* @__PURE__ */ e(
t,
{
className: "border-d-border w-auto min-w-[100px] border-r",
children: o
},
`header-col-${l}`
)) : Array.from({ length: s }).map(
(o, l) => /* @__PURE__ */ e(
t,
{
className: "border-d-border w-auto min-w-[100px] border-r",
children: /* @__PURE__ */ e(d, { className: "mx-auto h-6 w-full" })
},
`skeleton-header-${l}`
)
)
] }) }),
/* @__PURE__ */ e(v, { children: Array.from({ length: h }).map((o, l) => /* @__PURE__ */ r(i, { children: [
/* @__PURE__ */ e(c, { className: "w-auto min-w-[100px]", children: /* @__PURE__ */ e(d, { className: "h-6 w-full" }) }),
Array.from({ length: s }).map(
(T, f) => /* @__PURE__ */ e(
c,
{
className: "border-d-border w-auto min-w-[100px] border-l text-center",
children: /* @__PURE__ */ e(d, { className: "mx-auto h-6 w-full" })
},
`skeleton-cell-${l}-${f}`
)
)
] }, `skeleton-row-${l}`)) })
] }),
/* @__PURE__ */ e(N, { orientation: "horizontal" })
] }) }) });
}
export {
S as TableSkeleton
};