BasePicker() — ui Function Reference

Architecture documentation for the BasePicker() function in base-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ BasePicker() — ui Function Reference

Dependency Diagram

graph TD
  7b5ec3c0_bf93_47e5_a69b_d8a8a3e03ea4["BasePicker()"]
  d22e0735_8a61_2573_f093_c81b998a1bba["base-picker.tsx"]
  7b5ec3c0_bf93_47e5_a69b_d8a8a3e03ea4 -->|defined in| d22e0735_8a61_2573_f093_c81b998a1bba
  style 7b5ec3c0_bf93_47e5_a69b_d8a8a3e03ea4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/base-picker.tsx lines 16–88

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

  const currentBase = React.useMemo(
    () => BASES.find((base) => base.name === params.base),
    [params.base]
  )

  const handleValueChange = React.useCallback(
    (value: string) => {
      const newBase = BASES.find((base) => base.name === value)
      if (!newBase) {
        return
      }

      setParams({ base: newBase.name })
    },
    [setParams]
  )

  return (
    <Picker>
      <PickerTrigger>
        <div className="flex flex-col justify-start text-left">
          <div className="text-muted-foreground text-xs">Component Library</div>
          <div className="text-foreground text-sm font-medium">
            {currentBase?.title}
          </div>
        </div>
        {currentBase?.meta?.logo && (
          <div
            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
            dangerouslySetInnerHTML={{
              __html: currentBase.meta.logo,
            }}
          />
        )}
      </PickerTrigger>
      <PickerContent
        anchor={isMobile ? anchorRef : undefined}
        side={isMobile ? "top" : "right"}
        align={isMobile ? "center" : "start"}
      >
        <PickerRadioGroup
          value={currentBase?.name}
          onValueChange={handleValueChange}
        >
          <PickerGroup>
            {BASES.map((base) => (
              <PickerRadioItem key={base.name} value={base.name}>
                {base.meta?.logo && (
                  <div
                    className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
                    dangerouslySetInnerHTML={{
                      __html: base.meta.logo,
                    }}
                  />
                )}
                {base.title}
              </PickerRadioItem>
            ))}
          </PickerGroup>
        </PickerRadioGroup>
      </PickerContent>
    </Picker>
  )
}