Spaces:
Running
Running
File size: 2,992 Bytes
4bae792 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import { FiX, FiFile, FiImage } from "react-icons/fi";
/**
* FileAttachmentPreview component - shows selected files before sending
*/
function FileAttachmentPreview({ files, onRemove, isDark }) {
if (!files || files.length === 0) return null;
const handleRemove = (index) => {
if (onRemove) {
onRemove(index);
}
};
return (
<div
className="flex flex-wrap gap-2 mb-2 px-3 py-2 rounded-lg text-sm"
style={{
background: isDark ? "var(--bg-surface-tertiary)" : "#f0f2f5",
border: "1px solid var(--border-primary)",
}}
>
{files.map((file, index) => (
<div
key={index}
className="file-preview-item flex items-center gap-2 px-2 py-1.5 rounded-md border"
style={{
background: "var(--card-bg)",
borderColor: "var(--border-primary)",
}}
>
{file.type?.startsWith("image/") ? (
<div className="relative w-10 h-10 rounded overflow-hidden shrink-0">
<img
src={file.preview}
alt={file.name}
className="w-full h-full object-cover"
/>
</div>
) : (
<div
className="flex items-center justify-center w-10 h-10 rounded shrink-0"
style={{
background:
file.type === "application/pdf"
? "#ef4444"
: "var(--bg-surface-secondary)",
color:
file.type === "application/pdf"
? "#fff"
: "var(--text-secondary)",
}}
>
{file.type === "application/pdf" ? (
<FiFile size={16} />
) : (
<FiImage size={16} />
)}
</div>
)}
<div className="min-w-0 flex-1">
<div
className="text-xs font-medium truncate"
style={{ color: "var(--text-primary)" }}
>
{file.name}
</div>
<div
className="text-[10px]"
style={{ color: "var(--text-secondary)" }}
>
{formatFileSize(file.size)}
</div>
</div>
<button
type="button"
className="shrink-0 p-0.5 rounded"
style={{ color: "var(--text-secondary)" }}
onClick={() => handleRemove(index)}
title="Xóa file"
>
<FiX size={14} />
</button>
</div>
))}
</div>
);
}
/**
* Format file size to human-readable format
*/
function formatFileSize(bytes) {
if (!bytes || bytes === 0) return "0 B";
const k = 1024;
const sizes = ["B", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
}
export default FileAttachmentPreview;
|