MenuColorPicker() — ui Function Reference

Architecture documentation for the MenuColorPicker() function in menu-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ MenuColorPicker() — ui Function Reference

Dependency Diagram

graph TD
  ec7ee62d_d372_04e6_df9b_6419d455344a["MenuColorPicker()"]
  aca902aa_9741_9a88_1d21_a117db8a54f9["menu-picker.tsx"]
  ec7ee62d_d372_04e6_df9b_6419d455344a -->|defined in| aca902aa_9741_9a88_1d21_a117db8a54f9
  style ec7ee62d_d372_04e6_df9b_6419d455344a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/menu-picker.tsx lines 107–163

export function MenuColorPicker({
  isMobile,
  anchorRef,
}: {
  isMobile: boolean
  anchorRef: React.RefObject<HTMLDivElement | null>
}) {
  const { resolvedTheme } = useTheme()
  const mounted = useMounted()
  const [params, setParams] = useDesignSystemSearchParams()
  const currentMenu = MENU_OPTIONS.find(
    (menu) => menu.value === params.menuColor
  )

  return (
    <div className="group/picker relative">
      <Picker>
        <PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
          <div className="flex flex-col justify-start text-left">
            <div className="text-muted-foreground text-xs">Menu Color</div>
            <div className="text-foreground text-sm font-medium">
              {currentMenu?.label}
            </div>
          </div>
          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
            {currentMenu?.icon}
          </div>
        </PickerTrigger>
        <PickerContent
          anchor={isMobile ? anchorRef : undefined}
          side={isMobile ? "top" : "right"}
          align={isMobile ? "center" : "start"}
        >
          <PickerRadioGroup
            value={currentMenu?.value}
            onValueChange={(value) => {
              setParams({ menuColor: value as MenuColorValue })
            }}
          >
            <PickerGroup>
              {MENU_OPTIONS.map((menu) => (
                <PickerRadioItem key={menu.value} value={menu.value}>
                  {menu.icon}
                  {menu.label}
                </PickerRadioItem>
              ))}
            </PickerGroup>
          </PickerRadioGroup>
        </PickerContent>
      </Picker>
      <LockButton
        param="menuColor"
        className="absolute top-1/2 right-10 -translate-y-1/2"
      />
    </div>
  )
}