feat: closes #21
This commit is contained in:
parent
7fec1f0543
commit
ffef784f50
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
Loading…
Reference in New Issue