66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { NavColorPicker } from "@/components/gmail/nav/nav-color-picker"
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover"
|
|
import { cn } from "@/lib/utils"
|
|
import { normalizeNavColorClass } from "@/lib/nav-color"
|
|
|
|
export function NavColorPickerTrigger({
|
|
value,
|
|
onChange,
|
|
rounded = "full",
|
|
className,
|
|
"aria-label": ariaLabel = "Couleur",
|
|
}: {
|
|
value: string
|
|
onChange: (swatch: string) => void
|
|
rounded?: "sm" | "full"
|
|
className?: string
|
|
"aria-label"?: string
|
|
}) {
|
|
const [open, setOpen] = useState(false)
|
|
const colorClass = normalizeNavColorClass(value)
|
|
const isFull = rounded === "full"
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<button
|
|
type="button"
|
|
aria-label={ariaLabel}
|
|
className={cn(
|
|
"flex shrink-0 items-center justify-center border border-black/10 outline-none ring-offset-1 hover:ring-2 hover:ring-muted-foreground focus-visible:ring-2 focus-visible:ring-ring",
|
|
isFull ? "size-7 rounded-full p-0.5" : "size-7 rounded-sm bg-background hover:bg-muted",
|
|
className
|
|
)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"block border border-black/10",
|
|
isFull ? "size-full rounded-full" : "size-4 rounded-sm",
|
|
colorClass
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-2" align="start" sideOffset={6}>
|
|
<NavColorPicker
|
|
variant="menu"
|
|
value={value}
|
|
onChange={(sw) => {
|
|
onChange(sw)
|
|
setOpen(false)
|
|
}}
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|