Add confirmation on withdraw request

src/components/Friends/FriendProgressItem.tsx

@@ -238,9 +238,24 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
                 Request Sent
               </span>
             </div>
-            <span class="flex cursor-default items-center justify-center border-t py-2 text-center text-sm">
+            <>
+              {isConfirming !== 'sent' && (
                 <button
-                className="ml-2 flex items-center font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                  className="flex w-full items-center justify-center border-t py-2 text-sm font-medium text-red-700 hover:bg-red-50/50 hover:text-red-500"
+                  onClick={() => {
+                    setIsConfirming('sent');
+                  }}
+                >
+                  <TrashIcon className="mr-1 h-4 w-4" />
+                  Withdraw Request
+                </button>
+              )}
+
+              {isConfirming === 'sent' && (
+                <span className="flex w-full items-center justify-center border-t py-2 text-sm text-red-700">
+                  Are you sure?{' '}
+                  <button
+                    className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
                     onClick={() => {
                       deleteFriend(
                         friend.userId,
@@ -250,10 +265,19 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
                       });
                     }}
                   >
-                <TrashIcon className="mr-1 h-4 w-4" />
-                Withdraw Request
+                    Yes
+                  </button>{' '}
+                  <button
+                    className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                    onClick={() => {
+                      setIsConfirming(undefined);
+                    }}
+                  >
+                    No
                   </button>
                 </span>
+              )}
+            </>
           </>
         )}