feat: closes #21

This commit is contained in:
Juan Di Toro 2024-03-27 07:22:58 +01:00
parent 7fec1f0543
commit ffef784f50
2 changed files with 34 additions and 10 deletions

View File

@ -589,3 +589,22 @@ export const ExclamationCircleIcon = ({
</svg> </svg>
); );
}; };
export const DownloadIcon = ({ className }: { className?: string }) => {
return (
<svg
aria-hidden="true"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
xmlns="http://www.w3.org/2000/svg"
className={className}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
/>
</svg>
);
};

View File

@ -1,6 +1,6 @@
import { TrashIcon } from "@radix-ui/react-icons"; import { TrashIcon } from "@radix-ui/react-icons";
import type { ColumnDef } from "@tanstack/react-table"; import type { ColumnDef } from "@tanstack/react-table";
import { FileIcon, MoreIcon } from "~/components/icons"; import { DownloadIcon, FileIcon, MoreIcon } from "~/components/icons";
import { Checkbox } from "~/components/ui/checkbox"; import { Checkbox } from "~/components/ui/checkbox";
import { import {
DropdownMenu, DropdownMenu,
@ -14,6 +14,7 @@ import { cn } from "~/utils";
import type { FileItem } from "~/data/file-provider"; import type { FileItem } from "~/data/file-provider";
import { usePinning } from "~/hooks/usePinning"; import { usePinning } from "~/hooks/usePinning";
import filesize from "~/components/lib/filesize"; import filesize from "~/components/lib/filesize";
import { Button } from "~/components/ui/button";
// This type is used to define the shape of our data. // This type is used to define the shape of our data.
@ -50,19 +51,15 @@ export const columns: ColumnDef<FileItem>[] = [
enableHiding: false, enableHiding: false,
}, },
{ {
accessorKey: "name", accessorKey: "cid",
header: "Name", header: "CID",
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<FileIcon /> <FileIcon />
{row.getValue("name")} {row.getValue("name") ?? row.getValue("cid")}
</div> </div>
), ),
}, },
{
accessorKey: "cid",
header: "CID",
},
{ {
accessorKey: "size", accessorKey: "size",
header: "Size", header: "Size",
@ -82,12 +79,20 @@ export const columns: ColumnDef<FileItem>[] = [
size: 20, size: 20,
cell: ({ row }) => { cell: ({ row }) => {
const { unpin } = usePinning(); const { unpin } = usePinning();
const downloadFile = () => {
// TODO: @pcfreak30 download file
const cid = row.getValue("cid");
console.log(cid);
};
return ( return (
<div className="flex w-5 items-center justify-between"> <div className="flex space-x-2 w-10 items-center justify-between">
<Button size={"icon"} variant="ghost" onClick={downloadFile}>
<DownloadIcon className="w-5"/>
</Button>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger <DropdownMenuTrigger
className={cn( className={cn(
"hidden group-hover:block data-[state=open]:block", "opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100",
row.getIsSelected() && "block", row.getIsSelected() && "block",
)}> )}>
<MoreIcon /> <MoreIcon />