69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import {
|
|
LABEL_MENU_COLOR_SWATCHES,
|
|
} from "@/components/gmail/sidebar/sidebar-nav-constants"
|
|
import {
|
|
MAIL_SIDEBAR_COLOR_SWATCH_RING_CLASS,
|
|
} from "@/lib/mail-chrome-classes"
|
|
import { normalizeNavColorClass } from "@/lib/nav-color"
|
|
|
|
export type NavColorPickerVariant = "menu" | "sheet" | "field"
|
|
|
|
const SWATCH_SIZE: Record<NavColorPickerVariant, string> = {
|
|
menu: "size-6",
|
|
sheet: "size-8",
|
|
field: "size-8",
|
|
}
|
|
|
|
export function NavColorPicker({
|
|
value,
|
|
onChange,
|
|
variant = "field",
|
|
swatches = LABEL_MENU_COLOR_SWATCHES,
|
|
className,
|
|
"aria-label": ariaLabel = "Couleur",
|
|
}: {
|
|
value: string
|
|
onChange: (swatch: string) => void
|
|
variant?: NavColorPickerVariant
|
|
swatches?: readonly string[]
|
|
className?: string
|
|
"aria-label"?: string
|
|
}) {
|
|
const active = normalizeNavColorClass(value)
|
|
const swatchClass = SWATCH_SIZE[variant]
|
|
|
|
return (
|
|
<div
|
|
role="group"
|
|
aria-label={ariaLabel}
|
|
className={cn("grid grid-cols-6 gap-1.5", className)}
|
|
>
|
|
{swatches.map((sw) => (
|
|
<button
|
|
key={sw}
|
|
type="button"
|
|
title={sw}
|
|
aria-label={sw}
|
|
aria-pressed={active === sw}
|
|
onClick={() => onChange(sw)}
|
|
className={cn(
|
|
swatchClass,
|
|
"rounded-full border border-black/10 outline-none ring-offset-1",
|
|
variant === "menu"
|
|
? cn(
|
|
"hover:ring-2",
|
|
MAIL_SIDEBAR_COLOR_SWATCH_RING_CLASS
|
|
)
|
|
: "hover:ring-2 hover:ring-muted-foreground focus-visible:ring-2 focus-visible:ring-ring",
|
|
sw,
|
|
active === sw && "ring-2 ring-primary ring-offset-1"
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|