107 lines
3.6 KiB
TypeScript
107 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { X, Download } from "lucide-react";
|
|
|
|
interface DocumentViewModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
document: {
|
|
name: string;
|
|
label: string;
|
|
downloadUrl: string;
|
|
size?: number;
|
|
} | null;
|
|
}
|
|
|
|
export function DocumentViewModal({
|
|
isOpen,
|
|
onClose,
|
|
document
|
|
}: DocumentViewModalProps) {
|
|
if (!isOpen || !document) return null;
|
|
|
|
const isImage = document.name?.match(/\.(jpg|jpeg|png)$/i);
|
|
const isPdf = document.name?.match(/\.pdf$/i);
|
|
|
|
const formatFileSize = (bytes?: number) => {
|
|
if (!bytes && bytes !== 0) return '';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
|
|
<div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b bg-gray-50">
|
|
<div className="flex-1 min-w-0">
|
|
<h2 className="text-lg font-semibold truncate">{document.label}</h2>
|
|
<div className="flex items-center gap-3 text-sm text-gray-500 mt-1">
|
|
<span className="truncate">{document.name}</span>
|
|
{document.size && <span>{formatFileSize(document.size)}</span>}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="ml-4 p-2 hover:bg-gray-200 rounded-lg transition-colors"
|
|
aria-label="Fermer"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-auto bg-gray-100 p-4">
|
|
{isImage && (
|
|
<div className="flex items-center justify-center h-full">
|
|
<img
|
|
src={document.downloadUrl}
|
|
alt={document.name}
|
|
className="max-w-full max-h-full object-contain rounded-lg shadow-lg"
|
|
/>
|
|
</div>
|
|
)}
|
|
{isPdf && (
|
|
<iframe
|
|
src={document.downloadUrl}
|
|
className="w-full h-full min-h-[600px] rounded-lg shadow-lg bg-white"
|
|
title={document.name}
|
|
/>
|
|
)}
|
|
{!isImage && !isPdf && (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="text-center">
|
|
<p className="text-gray-500 mb-4">
|
|
Prévisualisation non disponible pour ce type de fichier
|
|
</p>
|
|
<a
|
|
href={document.downloadUrl}
|
|
download={document.name}
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
|
>
|
|
<Download className="h-4 w-4" />
|
|
Télécharger le fichier
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between p-4 border-t bg-gray-50">
|
|
<div className="flex-1"></div>
|
|
<a
|
|
href={document.downloadUrl}
|
|
download={document.name}
|
|
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
|
>
|
|
<Download className="h-4 w-4" />
|
|
Télécharger
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|