81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import type { DriveFileInfo } from "@/lib/api/types"
|
|
import { displayFileBaseName, displayFileName } from "@/lib/drive/display-file-name"
|
|
import {
|
|
DRIVE_DIALOG_BODY,
|
|
DRIVE_DIALOG_CONTENT,
|
|
DRIVE_DIALOG_HEADER,
|
|
DRIVE_DIALOG_OVERLAY,
|
|
DRIVE_TEXT_SECONDARY,
|
|
DRIVE_TEXT_TITLE,
|
|
} from "@/lib/drive/drive-dialog-styles"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
function formatBytes(size: number): string {
|
|
if (size < 1024) return `${size} o`
|
|
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} Ko`
|
|
return `${(size / (1024 * 1024)).toFixed(1)} Mo`
|
|
}
|
|
|
|
function formatDate(iso: string): string {
|
|
const date = new Date(iso)
|
|
if (Number.isNaN(date.getTime())) return iso
|
|
return date.toLocaleString("fr-FR", {
|
|
dateStyle: "medium",
|
|
timeStyle: "short",
|
|
})
|
|
}
|
|
|
|
function DetailRow({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="grid grid-cols-[120px_1fr] gap-3 py-2 text-sm">
|
|
<span className="text-muted-foreground">{label}</span>
|
|
<span className="break-all">{value}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function DocsDetailsDialog({
|
|
open,
|
|
onOpenChange,
|
|
file,
|
|
}: {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
file: DriveFileInfo
|
|
}) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent
|
|
overlayClassName={DRIVE_DIALOG_OVERLAY}
|
|
className={cn(DRIVE_DIALOG_CONTENT, "sm:max-w-[480px]")}
|
|
>
|
|
<DialogHeader className={DRIVE_DIALOG_HEADER}>
|
|
<DialogTitle className={cn("text-base font-medium", DRIVE_TEXT_TITLE)}>
|
|
Détails
|
|
</DialogTitle>
|
|
<DialogDescription className={cn("text-sm", DRIVE_TEXT_SECONDARY)}>
|
|
Informations sur le document.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className={cn(DRIVE_DIALOG_BODY, "divide-y divide-border")}>
|
|
<DetailRow label="Nom" value={displayFileBaseName(file.name)} />
|
|
<DetailRow label="Fichier" value={displayFileName(file.name)} />
|
|
<DetailRow label="Emplacement" value={file.path} />
|
|
<DetailRow label="Type" value={file.mime_type || "—"} />
|
|
<DetailRow label="Taille" value={formatBytes(file.size)} />
|
|
<DetailRow label="Modifié" value={formatDate(file.last_modified)} />
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|