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