frontend/app/components/details/attachment.tsx
2025-08-20 18:02:22 +02:00

46 lines
1.4 KiB
TypeScript

import { FileText, Image, File } from "lucide-react";
import type { Attachment } from "~/lib/api";
export default function AttachmentItem({ attachment }: { attachment: Attachment }) {
return (
<a
href={"https://bjcolle.fr/" + attachment.path}
target="_blank"
className="flex items-center gap-2 p-3 border rounded-md hover:bg-muted transition-colors cursor-pointer"
>
{getIcon(attachment.path)}
<span className="font-medium truncate">
{attachment.name}
</span>
</a>
);
}
const getType = (attachment: string) => {
const ext = attachment.split(".").pop();
if (ext === "pdf") {
return "pdf";
} else if (["jpg", "jpeg", "png", "gif"].includes(ext!)) {
return "image";
} else {
console.error(`Unknown attachment type: ${ext}`);
return "other";
}
};
const getIcon = (attachment: string) => {
switch (getType(attachment)) {
case "pdf":
return <FileText className="h-5 w-5 text-red-500" />;
case "image":
return <Image className="h-5 w-5 text-blue-500" />;
// case "document":
// return <FileText className="h-5 w-5 text-blue-500" />
// case "spreadsheet":
// return <FileText className="h-5 w-5 text-green-500" />
// case "code":
// return <FileText className="h-5 w-5 text-purple-500" />
default:
return <File className="h-5 w-5 text-gray-500" />;
}
};