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