import { TrashIcon } from "@radix-ui/react-icons"; import type { ColumnDef } from "@tanstack/react-table"; import { FileIcon, MoreIcon } from "~/components/icons"; import { Checkbox } from "~/components/ui/checkbox"; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, } from "~/components/ui/dropdown-menu"; import { cn } from "~/utils"; import type { FileItem } from "~/data/file-provider"; import { usePinning } from "~/hooks/usePinning"; import filesize from "~/components/lib/filesize"; // This type is used to define the shape of our data. // You can use a Zod schema here if you want. export type File = { name: string; cid: string; size: string; createdOn: string; }; export const columns: ColumnDef[] = [ { id: "select", size: 20, header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" /> ), enableSorting: false, enableHiding: false, }, { accessorKey: "name", header: "Name", cell: ({ row }) => (
{row.getValue("name")}
), }, { accessorKey: "cid", header: "CID", }, { accessorKey: "size", header: "Size", cell: ({ row }) => { const size = row.getValue("size"); return size ? filesize(size as number, 2) : ""; }, }, { accessorKey: "pinned", header: "Pinned On", cell: ({ row }) => new Date(row.getValue("pinned")).toLocaleString(), }, { accessorKey: "actions", header: () => null, size: 20, cell: ({ row }) => { const { unpin } = usePinning(); return (
{ unpin(row.getValue("cid")); }}> Delete
); }, }, ];