@theguild/components
Version:
51 lines (50 loc) • 1.6 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { cn } from "@theguild/components";
const Table = ({ className, scheme = "green", ...props }) => {
return /* @__PURE__ */ jsx(
"table",
{
className: cn(
"x:block x:overflow-x-auto nextra-scrollbar overflow-x-auto rounded-2xl border border-[--border]",
scheme === "green" && "[--border:theme(colors.green.200)] [--highlight-bg:theme(colors.green.100)]",
scheme === "neutral" && "[--border:theme(colors.beige.400)] [--highlight-bg:theme(colors.beige.100)] dark:[--border:theme(colors.neutral.800)]",
className
),
...props
}
);
};
const TableRow = ({
highlight,
className,
...props
}) => {
return /* @__PURE__ */ jsx(
"tr",
{
className: cn(
"bg-[--highlight,var(--highlight-bg)] [--highlight:0]",
highlight && "[--highlight:initial]",
className
),
...props
}
);
};
const cellStyle = cn(
"border border-[--border] p-4 first:sticky first:left-0 first:border-l-0 first:bg-[--highlight,var(--highlight-bg)] last:border-r-0 max-sm:first:drop-shadow-2xl [tbody_&]:border-b-0 [thead_&]:border-t-0"
);
const TableHeader = ({ className, ...props }) => {
return /* @__PURE__ */ jsx("th", { className: cn(cellStyle, "font-medium", className), ...props });
};
const TableCell = ({ className, ...props }) => {
return /* @__PURE__ */ jsx("td", { className: cn(cellStyle, className), ...props });
};
const ComparisonTable = Object.assign(Table, {
Row: TableRow,
Header: TableHeader,
Cell: TableCell
});
export {
ComparisonTable
};