feature: delete file

frontend/app/components/ui/Button.tsx

@@ -19,6 +19,8 @@ const ButtonVariants = cva(
         tertiary: "text-black dark:text-white bg-transparent py-2 px-4",
         secondary:
           "border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white focus:bg-black dark:focus:bg-white hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black focus:text-white transition-colors py-2 px-4 shadow-none",
+        danger:
+          "border border-red-500 hover:bg-red-500 hover:text-white transition-colors",
       },
       brightness: {
         dim: "",
@@ -55,5 +57,5 @@ const Button: FC<ButtonProps> = forwardRef(
   }
 );
 
-Button.displayName = 'Button';
+Button.displayName = "Button";
 export default Button;

frontend/app/components/ui/Modal.tsx

@@ -10,9 +10,16 @@ interface ModalProps {
   desc: string;
   children?: ReactNode;
   Trigger: ReactNode;
+  CloseTrigger?: ReactNode;
 }
 
-const Modal: FC<ModalProps> = ({ title, desc, children, Trigger }) => {
+const Modal: FC<ModalProps> = ({
+  title,
+  desc,
+  children,
+  Trigger,
+  CloseTrigger,
+}) => {
   const [open, setOpen] = useState(false);
   return (
     <Dialog.Root onOpenChange={setOpen}>
@@ -51,9 +58,13 @@ const Modal: FC<ModalProps> = ({ title, desc, children, Trigger }) => {
                     {children}
 
                     <Dialog.Close asChild>
+                      {CloseTrigger ? (
+                        CloseTrigger
+                      ) : (
                         <Button variant={"secondary"} className="self-end">
                           Done
                         </Button>
+                      )}
                     </Dialog.Close>
 
                     <Dialog.Close asChild>

frontend/app/explore/DocumentItem.tsx

@@ -1,15 +1,31 @@
 "use client";
-import { FC } from "react";
 import { Document } from "./types";
 import Button from "../components/ui/Button";
 import Modal from "../components/ui/Modal";
 import { AnimatedCard } from "../components/ui/Card";
+import { useState } from "react";
+import axios from "axios";
 
 interface DocumentProps {
   document: Document;
 }
 
-const DocumentItem: FC<DocumentProps> = ({ document }) => {
+const DocumentItem = ({ document }: DocumentProps) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const deleteDocument = async (name: string) => {
+    setIsDeleting(true);
+    try {
+      console.log(`Deleting Document ${name}`);
+      const response = await axios.delete(
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/explore/${name}`
+      );
+    } catch (error) {
+      console.error(`Error deleting ${name}`, error);
+    }
+    setIsDeleting(false);
+  };
+
   return (
     <AnimatedCard
       initial={{ x: -64, opacity: 0 }}
@@ -17,6 +33,7 @@ const DocumentItem: FC<DocumentProps> = ({ document }) => {
       className="flex items-center justify-between w-full p-5 gap-10"
     >
       <p className="text-lg leading-tight max-w-sm">{document.name}</p>
+      <div className="flex gap-2">
         <Modal
           title={document.name}
           desc={""}
@@ -26,6 +43,30 @@ const DocumentItem: FC<DocumentProps> = ({ document }) => {
             <pre>{JSON.stringify(document, null, 2)}</pre>
           </div>
         </Modal>
+        <Modal
+          title={"Confirm"}
+          desc={`Do you really want to delete?`}
+          Trigger={
+            <Button isLoading={isDeleting} variant={"danger"} className="">
+              Delete
+            </Button>
+          }
+          CloseTrigger={
+            <Button
+              variant={"danger"}
+              isLoading={isDeleting}
+              onClick={() => {
+                deleteDocument(document.name);
+              }}
+              className="self-end"
+            >
+              Delete forever
+            </Button>
+          }
+        >
+          <p>{document.name}</p>
+        </Modal>
+      </div>
     </AnimatedCard>
   );
 };