46 lines
		
	
	
	
		
			1.4 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			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.name)}
 | |
|       <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" />;
 | |
|   }
 | |
| };
 | 
