import { useMemo } from "react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "./ui/accordion"; import { Progress } from "./ui/progress"; import { usePinning } from "~/hooks/usePinning"; import { Tabs, TabsTrigger, TabsList, TabsContent } from "./ui/tabs"; import { Button } from "./ui/button"; import { Cross2Icon } from "@radix-ui/react-icons"; import { PinningStatus } from "~/data/pinning"; export const PinningNetworkBanner = () => { const { data } = usePinning(); // TODO: Adapt to real API const itemsLeft = useMemo( () => data?.items.filter((item: PinningStatus) => item.status.includes("inprogress")) || [], [data], ); const completedItems = useMemo( () => data?.items.filter((item: PinningStatus) => item.status.includes("completed")) || [], [data], ); return (
{`${completedItems.length}/${data?.items.length} items completed`} In Progress Completed {itemsLeft.length ? ( itemsLeft.map((item: PinningStatus) => ( )) ) : (
Nothing yet.
)}
{completedItems.length ? ( completedItems.map((item: PinningStatus) => ( )) ) : (
Nothing yet.
)}
); }; const PinCidItem = ({ item }: { item: PinningStatus }) => { const { mutate } = usePinning(); return (
{item.id} {item.progress}%
); };