attachments list

2026-06-17 16:33:01 +03:30
parent 9c6aa47cf7
commit 73d1ad3492
6 changed files with 141 additions and 1 deletions
@@ -0,0 +1,54 @@
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { Document, Link2, More } from "iconsax-react";
+import { type FC } from "react";
+import { timeAgo } from "../../../../../config/func";
+
+type Props = {
+  title: string;
+  createdAt: string;
+  type: "file" | "link";
+  url?: string;
+  onEdit: () => void;
+  onDelete: () => void;
+};
+
+const AttachmentItem: FC<Props> = ({ title, createdAt, type, url, onEdit, onDelete }) => {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        <div className="shrink-0 size-9 bg-white rounded-[10px] flex items-center justify-center">
+          {type === "file" ? <Document size={20} color="#292D32" /> : <Link2 size={20} color="#292D32" />}
+        </div>
+
+        <div className="min-w-0">
+          {type === "link" && url ? (
+            <a href={url} target="_blank" rel="noopener noreferrer" className="text-xs font-bold text-[#0047FF] underline truncate block">
+              {title}
+            </a>
+          ) : (
+            <div className="text-xs font-bold truncate">{title}</div>
+          )}
+          <div className="text-[11px] mt-0.5">{timeAgo(createdAt)}</div>
+        </div>
+      </div>
+
+      <Popover className="relative shrink-0">
+        <PopoverButton className="size-7 bg-white/60 rounded-[8px] flex items-center justify-center outline-none">
+          <More size={18} color="#292D32" />
+        </PopoverButton>
+
+        <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
+          <button type="button" onClick={onEdit} className="w-full text-sm text-right">
+            ویرایش
+          </button>
+
+          <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
+            پاک کردن
+          </button>
+        </PopoverPanel>
+      </Popover>
+    </div>
+  );
+};
+
+export default AttachmentItem;