@tohuhono/puck-blocks
Version:
A collection of puck components for building pages in OberonCMS
272 lines (271 loc) • 9.91 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { CaretSortIcon, DotsHorizontalIcon, ChevronDownIcon } from "../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js";
import { useReactTable, flexRender } from "../../node_modules/.pnpm/@tanstack_react-table@8.20.5_react-dom@18.3.1_react@18.3.1/node_modules/@tanstack/react-table/build/lib/index.js";
import { Button } from "@tohuhono/ui/button";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@tohuhono/ui/card";
import { Checkbox } from "@tohuhono/ui/checkbox";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem } from "@tohuhono/ui/dropdown-menu";
import { Input } from "@tohuhono/ui/input";
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@tohuhono/ui/table";
import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel } from "../../node_modules/.pnpm/@tanstack_table-core@8.20.5/node_modules/@tanstack/table-core/build/lib/index.js";
const data = [
{
id: "m5gr84i9",
amount: 316,
status: "success",
email: "ken99@yahoo.com"
},
{
id: "3u1reuv4",
amount: 242,
status: "success",
email: "Abe45@gmail.com"
},
{
id: "derv1ws0",
amount: 837,
status: "processing",
email: "Monserrat44@gmail.com"
},
{
id: "5kma53ae",
amount: 874,
status: "success",
email: "Silas22@gmail.com"
},
{
id: "bhqecj4p",
amount: 721,
status: "failed",
email: "carmella@hotmail.com"
}
];
const columns = [
{
id: "select",
header: ({ table }) => /* @__PURE__ */ jsx(
Checkbox,
{
checked: table.getIsAllPageRowsSelected(),
onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
"aria-label": "Select all"
}
),
cell: ({ row }) => /* @__PURE__ */ jsx(
Checkbox,
{
checked: row.getIsSelected(),
onCheckedChange: (value) => row.toggleSelected(!!value),
"aria-label": "Select row"
}
),
enableSorting: false,
enableHiding: false
},
{
accessorKey: "status",
header: "Status",
cell: ({ row }) => /* @__PURE__ */ jsx("div", { className: "capitalize", children: row.getValue("status") })
},
{
accessorKey: "email",
header: ({ column }) => {
return /* @__PURE__ */ jsxs(
Button,
{
variant: "ghost",
onClick: () => column.toggleSorting(column.getIsSorted() === "asc"),
children: [
"Email",
/* @__PURE__ */ jsx(CaretSortIcon, { className: "ml-2 h-4 w-4" })
]
}
);
},
cell: ({ row }) => /* @__PURE__ */ jsx("div", { className: "lowercase", children: row.getValue("email") })
},
{
accessorKey: "amount",
header: () => /* @__PURE__ */ jsx("div", { className: "text-right", children: "Amount" }),
cell: ({ row }) => {
const amount = parseFloat(row.getValue("amount"));
const formatted = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
}).format(amount);
return /* @__PURE__ */ jsx("div", { className: "text-right font-medium", children: formatted });
}
},
{
id: "actions",
enableHiding: false,
cell: ({ row }) => {
const payment = row.original;
return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "h-8 w-8 p-0", children: [
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open menu" }),
/* @__PURE__ */ jsx(DotsHorizontalIcon, { className: "h-4 w-4" })
] }) }),
/* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Actions" }),
/* @__PURE__ */ jsx(
DropdownMenuItem,
{
onClick: () => navigator.clipboard.writeText(payment.id),
children: "Copy payment ID"
}
),
/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
/* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => {
}, children: "View customer" }),
/* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => {
}, children: "View payment details" })
] })
] });
}
}
];
function CardsDataTable() {
var _a, _b;
const [sorting, setSorting] = React.useState([]);
const [columnFilters, setColumnFilters] = React.useState(
[]
);
const [columnVisibility, setColumnVisibility] = React.useState({});
const [rowSelection, setRowSelection] = React.useState({});
const table = useReactTable({
data,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection
}
});
return /* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsxs(CardHeader, { children: [
/* @__PURE__ */ jsx(CardTitle, { children: "Payments" }),
/* @__PURE__ */ jsx(CardDescription, { children: "Manage your payments." })
] }),
/* @__PURE__ */ jsxs(CardContent, { children: [
/* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-4", children: [
/* @__PURE__ */ jsx(
Input,
{
placeholder: "Filter emails...",
value: ((_a = table.getColumn("email")) == null ? void 0 : _a.getFilterValue()) ?? "",
onChange: (event) => {
var _a2;
return (_a2 = table.getColumn("email")) == null ? void 0 : _a2.setFilterValue(event.target.value);
},
className: "max-w-sm"
}
),
/* @__PURE__ */ jsxs(DropdownMenu, { children: [
/* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "ml-auto", children: [
"Columns ",
/* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-2 h-4 w-4" })
] }) }),
/* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
return /* @__PURE__ */ jsx(
DropdownMenuCheckboxItem,
{
className: "capitalize",
checked: column.getIsVisible(),
onCheckedChange: (value) => column.toggleVisibility(!!value),
children: column.id
},
column.id
);
}) })
] })
] }),
/* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
return /* @__PURE__ */ jsx(
TableHead,
{
className: "[&:has([role=checkbox])]:pl-3",
children: header.isPlaceholder ? null : flexRender(
header.column.columnDef.header,
header.getContext()
)
},
header.id
);
}) }, headerGroup.id)) }),
/* @__PURE__ */ jsx(TableBody, { children: ((_b = table.getRowModel().rows) == null ? void 0 : _b.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
TableRow,
{
"data-state": row.getIsSelected() && "selected",
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
TableCell,
{
className: "[&:has([role=checkbox])]:pl-3",
children: flexRender(
cell.column.columnDef.cell,
cell.getContext()
)
},
cell.id
))
},
row.id
)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
TableCell,
{
colSpan: columns.length,
className: "h-24 text-center",
children: "No results."
}
) }) })
] }) }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end space-x-2 pt-4", children: [
/* @__PURE__ */ jsxs("div", { className: "flex-1 text-sm text-muted-foreground", children: [
table.getFilteredSelectedRowModel().rows.length,
" of",
" ",
table.getFilteredRowModel().rows.length,
" row(s) selected."
] }),
/* @__PURE__ */ jsxs("div", { className: "space-x-2", children: [
/* @__PURE__ */ jsx(
Button,
{
variant: "outline",
size: "sm",
onClick: () => table.previousPage(),
disabled: !table.getCanPreviousPage(),
children: "Previous"
}
),
/* @__PURE__ */ jsx(
Button,
{
variant: "outline",
size: "sm",
onClick: () => table.nextPage(),
disabled: !table.getCanNextPage(),
children: "Next"
}
)
] })
] })
] })
] });
}
export {
CardsDataTable,
columns
};