90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
"use client"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog"
|
||
import {
|
||
DRIVE_BTN_GHOST,
|
||
DRIVE_BTN_PRIMARY,
|
||
DRIVE_DIALOG_BODY,
|
||
DRIVE_DIALOG_CONTENT,
|
||
DRIVE_DIALOG_FOOTER,
|
||
DRIVE_DIALOG_HEADER,
|
||
DRIVE_DIALOG_OVERLAY,
|
||
DRIVE_TEXT_SECONDARY,
|
||
DRIVE_TEXT_TITLE,
|
||
} from "@/lib/drive/drive-dialog-styles"
|
||
import { PAGE_FORMATS, type PageFormatId } from "@/lib/drive/page-formats"
|
||
import { cn } from "@/lib/utils"
|
||
|
||
export function DocsPageSetupDialog({
|
||
open,
|
||
onOpenChange,
|
||
pageFormatId,
|
||
onPageFormatChange,
|
||
}: {
|
||
open: boolean
|
||
onOpenChange: (open: boolean) => void
|
||
pageFormatId: PageFormatId
|
||
onPageFormatChange: (id: PageFormatId) => void
|
||
}) {
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent
|
||
overlayClassName={DRIVE_DIALOG_OVERLAY}
|
||
className={cn(DRIVE_DIALOG_CONTENT, "sm:max-w-[420px]")}
|
||
>
|
||
<DialogHeader className={DRIVE_DIALOG_HEADER}>
|
||
<DialogTitle className={cn("text-base font-medium", DRIVE_TEXT_TITLE)}>
|
||
Configuration de la page
|
||
</DialogTitle>
|
||
<DialogDescription className={cn("text-sm", DRIVE_TEXT_SECONDARY)}>
|
||
Format de page utilisé pour l'affichage et l'impression.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className={cn(DRIVE_DIALOG_BODY, "space-y-1")}>
|
||
{PAGE_FORMATS.map((format) => (
|
||
<button
|
||
key={format.id}
|
||
type="button"
|
||
className={cn(
|
||
"flex w-full items-center justify-between rounded-md px-3 py-2 text-sm hover:bg-accent",
|
||
pageFormatId === format.id && "bg-accent"
|
||
)}
|
||
onClick={() => onPageFormatChange(format.id)}
|
||
>
|
||
<span>{format.label}</span>
|
||
<span className="text-xs text-muted-foreground">
|
||
{format.widthMm} × {format.heightMm} mm
|
||
</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
<DialogFooter className={DRIVE_DIALOG_FOOTER}>
|
||
<Button
|
||
type="button"
|
||
className={DRIVE_BTN_PRIMARY}
|
||
onClick={() => onOpenChange(false)}
|
||
>
|
||
OK
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
className={DRIVE_BTN_GHOST}
|
||
onClick={() => onOpenChange(false)}
|
||
>
|
||
Annuler
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|