Finish delete button

app/routes/short-links.tsx

@@ -1,7 +1,7 @@
 import {
-  Button,
   Container,
   Heading,
+  IconButton,
   Link,
   Table,
   TableCaption,
@@ -76,6 +76,7 @@ export default function () {
 
     toast({
       description: `Link ${path} was successfully deleted.`,
+      onCloseComplete: location.reload,
       status: "success",
       title: "Deleted",
     });
@@ -101,7 +102,23 @@ export default function () {
                   <Td>{entry.destination}</Td>
                   <Td>{entry.path}</Td>
                   <Td>
-                    <Button colorScheme="red">Delete</Button>
+                    <IconButton
+                      aria-label="Delete link"
+                      colorScheme="red"
+                      icon={
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          fill="currentColor"
+                          viewBox="0 0 16 16"
+                        >
+                          <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
+                          <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
+                        </svg>
+                      }
+                      onClick={async () => await deleteLink(entry.path)}
+                    />
                   </Td>
                 </Tr>
               );