101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
"use client"
|
||
|
||
import {
|
||
Menubar,
|
||
MenubarContent,
|
||
MenubarItem,
|
||
MenubarMenu,
|
||
MenubarSeparator,
|
||
MenubarTrigger,
|
||
} from "@/components/ui/menubar"
|
||
import { PAGE_FORMATS, type PageFormatId } from "@/lib/drive/page-formats"
|
||
import { cn } from "@/lib/utils"
|
||
|
||
const MENU_LABELS = [
|
||
"Fichier",
|
||
"Édition",
|
||
"Affichage",
|
||
"Insertion",
|
||
"Format",
|
||
"Outils",
|
||
"Aide",
|
||
] as const
|
||
|
||
export function DocsMenubar({
|
||
pageFormatId,
|
||
onPageFormatChange,
|
||
zoom,
|
||
onZoomChange,
|
||
className,
|
||
}: {
|
||
pageFormatId: PageFormatId
|
||
onPageFormatChange: (id: PageFormatId) => void
|
||
zoom: number
|
||
onZoomChange: (zoom: number) => void
|
||
className?: string
|
||
}) {
|
||
return (
|
||
<Menubar
|
||
className={cn(
|
||
"docs-menubar h-auto gap-0 border-0 bg-transparent p-0 shadow-none",
|
||
className
|
||
)}
|
||
>
|
||
{MENU_LABELS.map((label) => {
|
||
if (label === "Affichage") {
|
||
return (
|
||
<MenubarMenu key={label}>
|
||
<MenubarTrigger className="docs-menu-trigger">{label}</MenubarTrigger>
|
||
<MenubarContent align="start" className="min-w-52">
|
||
<MenubarItem disabled className="text-xs text-muted-foreground">
|
||
Mode (bientôt)
|
||
</MenubarItem>
|
||
<MenubarSeparator />
|
||
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||
Taille de page
|
||
</div>
|
||
{PAGE_FORMATS.map((format) => (
|
||
<MenubarItem
|
||
key={format.id}
|
||
onClick={() => onPageFormatChange(format.id)}
|
||
className={cn(pageFormatId === format.id && "bg-accent")}
|
||
>
|
||
{format.label}
|
||
<span className="ml-auto text-xs text-muted-foreground">
|
||
{format.widthMm} × {format.heightMm} mm
|
||
</span>
|
||
</MenubarItem>
|
||
))}
|
||
<MenubarSeparator />
|
||
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||
Zoom
|
||
</div>
|
||
{[50, 75, 100, 125, 150, 200].map((value) => (
|
||
<MenubarItem
|
||
key={value}
|
||
onClick={() => onZoomChange(value)}
|
||
className={cn(zoom === value && "bg-accent")}
|
||
>
|
||
{value}%
|
||
</MenubarItem>
|
||
))}
|
||
</MenubarContent>
|
||
</MenubarMenu>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<MenubarMenu key={label}>
|
||
<MenubarTrigger className="docs-menu-trigger">{label}</MenubarTrigger>
|
||
<MenubarContent align="start">
|
||
<MenubarItem disabled className="text-muted-foreground">
|
||
Bientôt disponible
|
||
</MenubarItem>
|
||
</MenubarContent>
|
||
</MenubarMenu>
|
||
)
|
||
})}
|
||
</Menubar>
|
||
)
|
||
}
|