diff --git a/app/components/pinning-network-banner.tsx b/app/components/pinning-network-banner.tsx index bad556c..f5842d0 100644 --- a/app/components/pinning-network-banner.tsx +++ b/app/components/pinning-network-banner.tsx @@ -15,7 +15,15 @@ import type { PinningStatus } from "~/data/pinning"; export const PinningNetworkBanner = () => { const { progressData: data } = usePinning(); - const itemsLeft = useMemo( + const itemsQueued = useMemo( + () => + data?.items.filter((item: PinningStatus) => + item.status.includes("queued"), + ) || [], + [data], + ); + + const itemsProcessing = useMemo( () => data?.items.filter((item: PinningStatus) => item.status.includes("processing"), @@ -44,12 +52,24 @@ export const PinningNetworkBanner = () => { + Queued In Progress Completed + + {itemsQueued.length ? ( + itemsQueued.map((item: PinningStatus) => ( + + )) + ) : ( +
+ Nothing yet. +
+ )} +
- {itemsLeft.length ? ( - itemsLeft.map((item: PinningStatus) => ( + {itemsProcessing.length ? ( + itemsProcessing.map((item: PinningStatus) => ( )) ) : (