From 1cb7afda8fd203547789e649e29e7c0689032d82 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Mon, 25 Mar 2024 09:02:09 +0100
Subject: [PATCH] fix: only completed items can be unpinned. Maybe cross iscon
 is not the best

---
 app/components/pinning-network-banner.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/components/pinning-network-banner.tsx b/app/components/pinning-network-banner.tsx
index 68f3f48..bad556c 100644
--- a/app/components/pinning-network-banner.tsx
+++ b/app/components/pinning-network-banner.tsx
@@ -78,12 +78,26 @@ export const PinningNetworkBanner = () => {
 };
 
 const PinCidItem = ({ item }: { item: PinningStatus }) => {
+  const { unpin } = usePinning();
+
   return (
     <div className="px-4 mb-4">
-      <div className="flex flex-col items-center rounded-lg py-2 px-4 hover:bg-primary/50 group">
+      <div className="relative flex flex-col items-center rounded-lg py-2 px-4 hover:bg-primary/50 group">
         <div className="flex justify-between items-center w-full">
           <span className="font-semibold">{item.id}</span>
           <span className="group-hover:hidden">{item.progress}%</span>
+          {item.status === "completed" ? (
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2 hidden group-hover:flex rounded-full h-3"
+              onClick={() =>
+                unpin({
+                  cid: item.id,
+                })
+              }>
+              <Cross2Icon />
+            </Button>
+          ) : null}
         </div>
         <Progress value={item.progress} className="h-2" />
       </div>