feat: Created Pinning banner to show inprogress and completed PinningProcess
This commit is contained in:
parent
140a9d222f
commit
b646fc4887
GPG Key ID:
53133EB28EB7E801
|
|
@ -30,123 +30,129 @@ import { Avatar } from "@radix-ui/react-avatar";
|
|||
import { cn } from "~/utils";
|
||||
import { useGetIdentity, useLogout } from "@refinedev/core";
|
||||
import { Identity } from "~/data/auth-provider";
|
||||
import { PinningNetworkBanner } from "./pinnning-network-banner";
|
||||
import { PinningProvider } from "~/providers/PinningProvider";
|
||||
|
||||
|
||||
export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
|
||||
const location = useLocation();
|
||||
const { data: identity } = useGetIdentity<Identity>();
|
||||
const{ mutate: logout } = useLogout()
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-row">
|
||||
<header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
|
||||
<img src={logoPng} alt="Lume logo" className="h-10 w-32" />
|
||||
<PinningProvider>
|
||||
<div className="h-full flex flex-row">
|
||||
<header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
|
||||
<img src={logoPng} alt="Lume logo" className="h-10 w-32" />
|
||||
|
||||
<nav className="my-10 flex-1">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/dashboard">
|
||||
<NavigationButton
|
||||
active={location.pathname.includes("dashboard")}>
|
||||
<ClockIcon className="w-5 h-5 mr-2" />
|
||||
Dashboard
|
||||
</NavigationButton>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/file-manager">
|
||||
<NavigationButton
|
||||
active={location.pathname.includes("file-manager")}>
|
||||
<DriveIcon className="w-5 h-5 mr-2" />
|
||||
File Manager
|
||||
</NavigationButton>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/account">
|
||||
<NavigationButton
|
||||
active={location.pathname.includes("account")}>
|
||||
<CircleLockIcon className="w-5 h-5 mr-2" />
|
||||
Account
|
||||
</NavigationButton>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<span className="text-primary-2 mb-3 -space-y-1 opacity-40">
|
||||
<p>Freedom</p>
|
||||
<p>Privacy</p>
|
||||
<p>Ownership</p>
|
||||
</span>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button size={"lg"} className="w-[calc(100%-3rem)] font-semibold">
|
||||
<CloudUploadIcon className="w-5 h-5 mr-2" />
|
||||
Upload Files
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="border rounded-lg p-8">
|
||||
<UploadFileForm />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-10">
|
||||
<div className="flex items-center gap-x-4 justify-end">
|
||||
<Button variant="ghost" className="rounded-full w-fit">
|
||||
<ThemeIcon className="text-ring" />
|
||||
</Button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold">
|
||||
<Avatar className="bg-ring h-7 w-7 rounded-full" />
|
||||
{`${identity?.firstName} ${identity?.lastName}`}
|
||||
<ChevronDownIcon />
|
||||
<nav className="my-10 flex-1">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/dashboard">
|
||||
<NavigationButton
|
||||
active={location.pathname.includes("dashboard")}>
|
||||
<ClockIcon className="w-5 h-5 mr-2" />
|
||||
Dashboard
|
||||
</NavigationButton>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/file-manager">
|
||||
<NavigationButton
|
||||
active={location.pathname.includes("file-manager")}>
|
||||
<DriveIcon className="w-5 h-5 mr-2" />
|
||||
File Manager
|
||||
</NavigationButton>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/account">
|
||||
<NavigationButton
|
||||
active={location.pathname.includes("account")}>
|
||||
<CircleLockIcon className="w-5 h-5 mr-2" />
|
||||
Account
|
||||
</NavigationButton>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<span className="text-primary-2 mb-3 -space-y-1 opacity-40">
|
||||
<p>Freedom</p>
|
||||
<p>Privacy</p>
|
||||
<p>Ownership</p>
|
||||
</span>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button size={"lg"} className="w-[calc(100%-3rem)] font-semibold">
|
||||
<CloudUploadIcon className="w-5 h-5 mr-2" />
|
||||
Upload Files
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem onClick={() => logout()}>
|
||||
<ExitIcon className="mr-2" />
|
||||
Logout
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="border rounded-lg p-8">
|
||||
<UploadFileForm />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-10">
|
||||
<div className="flex items-center gap-x-4 justify-end">
|
||||
<Button variant="ghost" className="rounded-full w-fit">
|
||||
<ThemeIcon className="text-ring" />
|
||||
</Button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold">
|
||||
<Avatar className="bg-ring h-7 w-7 rounded-full" />
|
||||
{`${identity?.firstName} ${identity?.lastName}`}
|
||||
<ChevronDownIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem onClick={() => logout()}>
|
||||
<ExitIcon className="mr-2" />
|
||||
Logout
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
|
||||
<footer className="mt-5">
|
||||
<ul className="flex flex-row">
|
||||
<li>
|
||||
<Link to="https://discord.lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img
|
||||
className="h-5"
|
||||
src={discordLogoPng}
|
||||
alt="Discord Logo"
|
||||
/>
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
|
||||
<footer className="mt-5">
|
||||
<ul className="flex flex-row">
|
||||
<li>
|
||||
<Link to="https://discord.lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img
|
||||
className="h-5"
|
||||
src={discordLogoPng}
|
||||
alt="Discord Logo"
|
||||
/>
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<PinningNetworkBanner />
|
||||
</PinningProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
import { useEffect, useMemo } from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "./ui/accordion";
|
||||
import { Progress } from "./ui/progress";
|
||||
import { usePinning } from "~/hooks/usePinnning";
|
||||
import { IPinningData } from "~/providers/PinningProvider";
|
||||
import { Tabs, TabsTrigger, TabsList, TabsContent } from "./ui/tabs";
|
||||
import { Button } from "./ui/button";
|
||||
import { Cross2Icon } from "@radix-ui/react-icons";
|
||||
|
||||
export const PinningNetworkBanner = () => {
|
||||
const { cidList } = usePinning();
|
||||
|
||||
const itemsLeft = useMemo(
|
||||
() => cidList.filter((item) => item.progress < 100),
|
||||
[cidList],
|
||||
);
|
||||
|
||||
const completedItems = useMemo(
|
||||
() => cidList.filter((item) => item.progress === 100),
|
||||
[cidList],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`border border-border rounded-lg absolute w-1/3 bottom-4 right-4 ${
|
||||
!cidList.length ? "hidden" : "block"
|
||||
}`}>
|
||||
<Accordion type="single" defaultValue="item-1" collapsible>
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger className="font-bold bg-primary px-4 rounded-tr-lg rounded-tl-lg">
|
||||
{itemsLeft.length > 0 ? `${itemsLeft.length} left` : "Completed"}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<Tabs className="w-full" defaultValue="inProgress">
|
||||
<TabsList className="rounded-none">
|
||||
<TabsTrigger value="inProgress">In Progress</TabsTrigger>
|
||||
<TabsTrigger value="completed">Completed</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="inProgress">
|
||||
{itemsLeft.length ? (
|
||||
itemsLeft.map((cid) => (
|
||||
<PinCidItem key={cid.cid} item={cid} />
|
||||
))
|
||||
) : (
|
||||
<div className="text-primary-2 text-sm flex justify-center items-center h-10">
|
||||
Nothing yet.
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
<TabsContent value="completed">
|
||||
{completedItems.length ? (
|
||||
completedItems.map((cid) => (
|
||||
<PinCidItem key={cid.cid} item={cid} />
|
||||
))
|
||||
) : (
|
||||
<div className="text-muted text-sm flex justify-center items-center h-10">
|
||||
Nothing yet.
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PinCidItem = ({ item }: { item: IPinningData }) => {
|
||||
const { getProgress, onRemoveCidFromList } = usePinning();
|
||||
|
||||
useEffect(() => {
|
||||
if (item.progress < 100) {
|
||||
const intervalId = setInterval(() => {
|
||||
getProgress(item.cid);
|
||||
}, 1000); // Adjust the interval time (1000ms = 1 second) as needed
|
||||
|
||||
return () => clearInterval(intervalId); // Clear interval on component unmount
|
||||
}
|
||||
}, [getProgress, item]); // Add dependencies to ensure the effect runs correctly
|
||||
|
||||
return (
|
||||
<div className="px-4 mb-4">
|
||||
<div className="flex justify-between items-center rounded-lg h-10 py-2 px-4 hover:bg-primary/50 group">
|
||||
<span className="font-semibold">{item.cid}</span>
|
||||
<span className="group-hover:hidden">{item.progress}%</span>
|
||||
<div className="gap-x-2 hidden group-hover:flex">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="p-2 rounded-full h-6"
|
||||
onClick={() => onRemoveCidFromList(item.cid)}>
|
||||
<Cross2Icon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Progress
|
||||
value={item.progress}
|
||||
className="h-2 w-[calc(100%-1rem)] ml-2"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import * as React from "react";
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||
import { ChevronDownIcon } from "@radix-ui/react-icons";
|
||||
|
||||
import { cn } from "~/utils";
|
||||
|
||||
const Accordion = AccordionPrimitive.Root;
|
||||
|
||||
const AccordionItem = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AccordionPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn("border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AccordionItem.displayName = "AccordionItem";
|
||||
|
||||
const AccordionTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
|
||||
className,
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
<ChevronDownIcon className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
));
|
||||
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
||||
|
||||
const AccordionContent = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Content
|
||||
ref={ref}
|
||||
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||
{...props}>
|
||||
<div className={cn("pb-4 pt-0", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
));
|
||||
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
||||
|
||||
export {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
AccordionContent,
|
||||
};
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import * as React from "react";
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
||||
|
||||
import { cn } from "~/utils";
|
||||
|
||||
const Tabs = TabsPrimitive.Root;
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-9 items-center justify-center rounded-lg bg-primary-dark p-1 text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsList.displayName = TabsPrimitive.List.displayName;
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-primary-1 data-[state=active]:shadow",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
||||
|
|
@ -1,96 +1,111 @@
|
|||
import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
|
||||
import type { ColumnDef, RowData } from "@tanstack/react-table";
|
||||
import type { ColumnDef, Row } from "@tanstack/react-table";
|
||||
import { FileIcon, MoreIcon } from "~/components/icons";
|
||||
import { Checkbox } from "~/components/ui/checkbox";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/ui/dropdown-menu";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/dropdown-menu";
|
||||
|
||||
import { usePinning } from "~/hooks/usePinnning";
|
||||
import { cn } from "~/utils";
|
||||
|
||||
// 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;
|
||||
name: string;
|
||||
cid: string;
|
||||
size: string;
|
||||
createdOn: string;
|
||||
};
|
||||
|
||||
declare module '@tanstack/table-core' {
|
||||
interface TableMeta<TData extends RowData> {
|
||||
hoveredRowId: string,
|
||||
}
|
||||
}
|
||||
const CreatedOnCell = ({ row }: { row: Row<File> }) => {
|
||||
// const { open } = useNotification();
|
||||
const { onPin } = usePinning();
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
{row.getValue("createdOn")}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className={cn(
|
||||
"hidden group-hover:block data-[state=open]:block",
|
||||
row.getIsSelected() && "block",
|
||||
)}>
|
||||
<MoreIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
console.log(`Adding ${row.getValue("cid")} for pinning...`);
|
||||
onPin(row.getValue("cid"));
|
||||
}}>
|
||||
<DrawingPinIcon className="mr-2" />
|
||||
Ping CID
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem variant="destructive">
|
||||
<TrashIcon className="mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<File>[] = [
|
||||
{
|
||||
id: "select",
|
||||
size: 20,
|
||||
header: ({ table }) => (
|
||||
<Checkbox
|
||||
|
||||
checked={
|
||||
table.getIsAllPageRowsSelected() ||
|
||||
(table.getIsSomePageRowsSelected() && "indeterminate")
|
||||
}
|
||||
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||
aria-label="Select all"
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
checked={row.getIsSelected()}
|
||||
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
aria-label="Select row"
|
||||
/>
|
||||
),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Name",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<FileIcon />
|
||||
{row.getValue("name")}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
accessorKey: "cid",
|
||||
header: "CID",
|
||||
},
|
||||
{
|
||||
accessorKey: "size",
|
||||
header: "Size",
|
||||
},
|
||||
{
|
||||
accessorKey: "createdOn",
|
||||
size: 200,
|
||||
header: "Created On",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center justify-between">
|
||||
{row.getValue("createdOn")}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className={
|
||||
cn("hidden group-hover:block data-[state=open]:block", row.getIsSelected() && "block")
|
||||
}>
|
||||
<MoreIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<DrawingPinIcon className="mr-2" />
|
||||
Ping CID
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem variant="destructive">
|
||||
<TrashIcon className="mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
id: "select",
|
||||
size: 20,
|
||||
header: ({ table }) => (
|
||||
<Checkbox
|
||||
checked={
|
||||
table.getIsAllPageRowsSelected() ||
|
||||
(table.getIsSomePageRowsSelected() && "indeterminate")
|
||||
}
|
||||
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||
aria-label="Select all"
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => (
|
||||
<Checkbox
|
||||
checked={row.getIsSelected()}
|
||||
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
aria-label="Select row"
|
||||
/>
|
||||
),
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Name",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<FileIcon />
|
||||
{row.getValue("name")}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "cid",
|
||||
header: "CID",
|
||||
},
|
||||
{
|
||||
accessorKey: "size",
|
||||
header: "Size",
|
||||
},
|
||||
{
|
||||
accessorKey: "createdOn",
|
||||
size: 200,
|
||||
header: "Created On",
|
||||
cell: ({ row }) => <CreatedOnCell row={row} />,
|
||||
},
|
||||
];
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
"@conform-to/zod": "^1.0.2",
|
||||
"@fontsource-variable/manrope": "^5.0.19",
|
||||
"@lumeweb/portal-sdk": "0.0.0-20240319140708",
|
||||
"@radix-ui/react-accordion": "^1.1.2",
|
||||
"@radix-ui/react-avatar": "^1.0.4",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
"@radix-ui/react-progress": "^1.0.3",
|
||||
"@radix-ui/react-select": "^2.0.0",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-tabs": "^1.0.4",
|
||||
"@radix-ui/react-toast": "^1.1.5",
|
||||
"@refinedev/cli": "^2.16.1",
|
||||
"@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
|
||||
|
|
|
|||
Loading…
Reference in New Issue