-
Notifications
You must be signed in to change notification settings - Fork 449
Expand file tree
/
Copy pathfile-item.tsx
More file actions
108 lines (100 loc) · 3.45 KB
/
Copy pathfile-item.tsx
File metadata and controls
108 lines (100 loc) · 3.45 KB
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
103
104
105
106
107
108
"use client";
import { FileText, Folder, Trash2 } from "lucide-react";
import AwsLogo from "@/components/icons/aws-logo";
import GoogleDriveIcon from "@/components/icons/google-drive-logo";
import IBMCOSIcon from "@/components/icons/ibm-cos-icon";
import OneDriveIcon from "@/components/icons/one-drive-logo";
import SharePointIcon from "@/components/icons/share-point-logo";
import { Button } from "@/components/ui/button";
import type { CloudFile } from "./types";
interface FileItemProps {
provider: string;
file: CloudFile;
shouldDisableActions: boolean;
onRemove: (fileId: string) => void;
}
const getFileIcon = (mimeType: string) => {
if (mimeType.includes("folder")) {
return <Folder className="h-6 w-6" />;
}
return <FileText className="h-6 w-6" />;
};
const getMimeTypeLabel = (mimeType: string) => {
const typeMap: { [key: string]: string } = {
"application/vnd.google-apps.document": "Google Doc",
"application/vnd.google-apps.spreadsheet": "Google Sheet",
"application/vnd.google-apps.presentation": "Google Slides",
"application/vnd.google-apps.folder": "Folder",
"application/pdf": "PDF",
"text/plain": "Text",
"text/csv": "CSV",
"text/html": "HTML",
"application/xml": "XML",
"application/json": "JSON",
"application/msword": "Word Doc",
"application/vnd.ms-excel": "Excel",
"application/vnd.ms-powerpoint": "PowerPoint",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document":
"Word Doc",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
"Excel",
"application/vnd.openxmlformats-officedocument.presentationml.presentation":
"PowerPoint",
"application/octet-stream": "File",
"image/jpeg": "JPEG",
"image/png": "PNG",
"image/gif": "GIF",
"image/svg+xml": "SVG",
};
return typeMap[mimeType] || mimeType?.split("/").pop() || "Document";
};
const formatFileSize = (bytes?: number) => {
if (!bytes) return "";
const sizes = ["B", "KB", "MB", "GB", "TB"];
if (bytes === 0) return "0 B";
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
};
const getProviderIcon = (provider: string) => {
switch (provider) {
case "google_drive":
return <GoogleDriveIcon />;
case "onedrive":
return <OneDriveIcon />;
case "sharepoint":
return <SharePointIcon />;
case "ibm_cos":
return <IBMCOSIcon />;
case "aws_s3":
return <AwsLogo />;
default:
return <FileText className="h-6 w-6" />;
}
};
export const FileItem = ({ file, onRemove, provider }: FileItemProps) => (
<div
key={file.id}
className="flex items-center justify-between p-1.5 rounded-md text-xs"
>
<div className="flex items-center gap-2 flex-1 min-w-0">
{provider ? getProviderIcon(provider) : getFileIcon(file.mimeType)}
<span className="truncate font-medium text-sm mr-2">{file.name}</span>
<span className="text-sm text-muted-foreground">
{getMimeTypeLabel(file.mimeType)}
</span>
</div>
<div className="flex items-center gap-1">
<span className="text-xs text-muted-foreground mr-4" title="file size">
{formatFileSize(file.size) || "—"}
</span>
<Button
className="text-muted-foreground hover:text-destructive"
size="icon"
variant="ghost"
onClick={() => onRemove(file.id)}
>
<Trash2 size={16} />
</Button>
</div>
</div>
);