fix Uploaded file display

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/case-attachments-editor.tsx

@@ -1,6 +1,6 @@
-import { Image, Button, Tooltip } from "@nextui-org/react";
+import { Image, Button, Tooltip, Card, CardBody } from "@nextui-org/react";
 import { AttachmentType } from "./caseTypes";
-import { Trash } from "lucide-react";
+import { Trash, ArrowDownToLine } from "lucide-react";
 
 type Props = {
   attachments: AttachmentType[];
@@ -32,15 +32,18 @@ export default function CaseAttachmentsEditor({
   });
   return (
     <>
+      <div className="flex flex-wrap mt-3">
         {images.map((image, index) => (
-        <div key={index} className="flex">
+          <Card key={index} radius="sm" className="mt-2 me-2 max-w-md">
+            <CardBody>
               <Image
                 alt={image.title}
                 src={image.path}
                 className="object-cover h-40 w-40"
               />
-          <div className="mt-3 ms-1">
-            <Tooltip content="Delete this image file" placement="left">
+              <div className="flex items-center justify-between">
+                <p>{image.title}</p>
+                <Tooltip content="Delete">
                   <Button
                     isIconOnly
                     size="sm"
@@ -51,15 +54,28 @@ export default function CaseAttachmentsEditor({
                   </Button>
                 </Tooltip>
               </div>
-        </div>
+            </CardBody>
+          </Card>
         ))}
+      </div>
 
       {others.map((file, index) => (
-        <div key={index} className="flex">
-          <div>{file.title}</div>
-          <div>{file.path}</div>
-          <div className="mt-3 ms-1">
-            <Tooltip content="Delete this attachment file" placement="left">
+        <Card key={index} radius="sm" className="mt-2 max-w-md">
+          <CardBody>
+            <div className="flex items-center justify-between">
+              <p>{file.title}</p>
+              <div>
+                <Tooltip content="Download">
+                  <Button
+                    isIconOnly
+                    size="sm"
+                    className="bg-transparent rounded-full"
+                    onPress={() => console.log("download")}
+                  >
+                    <ArrowDownToLine size={16} />
+                  </Button>
+                </Tooltip>
+                <Tooltip content="Delete">
                   <Button
                     isIconOnly
                     size="sm"
@@ -71,6 +87,8 @@ export default function CaseAttachmentsEditor({
                 </Tooltip>
               </div>
             </div>
+          </CardBody>
+        </Card>
       ))}
     </>
   );