MenuAccentPicker() — ui Function Reference

Architecture documentation for the MenuAccentPicker() function in accent-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ MenuAccentPicker() — ui Function Reference

Dependency Diagram

graph TD
  e66cfe21_eb4c_7968_eac6_d00e986c4ccb["MenuAccentPicker()"]
  8d6f6beb_9b34_dd9c_681a_8111617c0794["accent-picker.tsx"]
  e66cfe21_eb4c_7968_eac6_d00e986c4ccb -->|defined in| 8d6f6beb_9b34_dd9c_681a_8111617c0794
  style e66cfe21_eb4c_7968_eac6_d00e986c4ccb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/accent-picker.tsx lines 15–95

export function MenuAccentPicker({
  isMobile,
  anchorRef,
}: {
  isMobile: boolean
  anchorRef: React.RefObject<HTMLDivElement | null>
}) {
  const [params, setParams] = useDesignSystemSearchParams()

  const currentAccent = MENU_ACCENTS.find(
    (accent) => accent.value === params.menuAccent
  )

  return (
    <div className="group/picker relative">
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
            <div className="text-muted-foreground text-xs">Menu Accent</div>
            <div className="text-foreground text-sm font-medium">
              {currentAccent?.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">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="128"
              height="128"
              viewBox="0 0 24 24"
              fill="none"
              className="text-foreground"
            >
              <path
                d="M19 12.1294L12.9388 18.207C11.1557 19.9949 10.2641 20.8889 9.16993 20.9877C8.98904 21.0041 8.80705 21.0041 8.62616 20.9877C7.53195 20.8889 6.64039 19.9949 4.85726 18.207L2.83687 16.1811C1.72104 15.0622 1.72104 13.2482 2.83687 12.1294M19 12.1294L10.9184 4.02587M19 12.1294H2.83687M10.9184 4.02587L2.83687 12.1294M10.9184 4.02587L8.89805 2"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                data-accent={currentAccent?.value}
                className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
              ></path>
              <path
                d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                data-accent={currentAccent?.value}
                className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
              ></path>
            </svg>
          </div>
        </PickerTrigger>
        <PickerContent
          anchor={isMobile ? anchorRef : undefined}
          side={isMobile ? "top" : "right"}
          align={isMobile ? "center" : "start"}
        >
          <PickerRadioGroup
            value={currentAccent?.value}
            onValueChange={(value) => {
              setParams({ menuAccent: value as MenuAccentValue })
            }}
          >
            <PickerGroup>
              {MENU_ACCENTS.map((accent) => (
                <PickerRadioItem key={accent.value} value={accent.value}>
                  {accent.label}
                </PickerRadioItem>
              ))}
            </PickerGroup>
          </PickerRadioGroup>
        </PickerContent>
      </Picker>
      <LockButton
        param="menuAccent"
        className="absolute top-1/2 right-10 -translate-y-1/2"
      />
    </div>
  )
}