IconLibraryPicker() — ui Function Reference

Architecture documentation for the IconLibraryPicker() function in icon-library-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ IconLibraryPicker() — ui Function Reference

Dependency Diagram

graph TD
  108f2f05_a83f_aeb8_b106_fda0b26b0c4d["IconLibraryPicker()"]
  f4a0adba_f490_99de_9ed8_5f1516b92ce0["icon-library-picker.tsx"]
  108f2f05_a83f_aeb8_b106_fda0b26b0c4d -->|defined in| f4a0adba_f490_99de_9ed8_5f1516b92ce0
  style 108f2f05_a83f_aeb8_b106_fda0b26b0c4d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/icon-library-picker.tsx lines 232–293

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

  const currentIconLibrary = React.useMemo(
    () => iconLibraries[params.iconLibrary as keyof typeof iconLibraries],
    [params.iconLibrary]
  )

  return (
    <div className="group/picker relative">
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
            <div className="text-muted-foreground text-xs">Icon Library</div>
            <div className="text-foreground text-sm font-medium">
              {currentIconLibrary?.title}
            </div>
          </div>
          <div className="text-foreground *:[svg]: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">
            {logos[currentIconLibrary?.name as keyof typeof logos]}
          </div>
        </PickerTrigger>
        <PickerContent
          anchor={isMobile ? anchorRef : undefined}
          side={isMobile ? "top" : "right"}
          align={isMobile ? "center" : "start"}
        >
          <PickerRadioGroup
            value={currentIconLibrary?.name}
            onValueChange={(value) => {
              setParams({ iconLibrary: value as IconLibraryName })
            }}
          >
            <PickerGroup>
              {Object.values(iconLibraries).map((iconLibrary, index) => (
                <React.Fragment key={iconLibrary.name}>
                  <IconLibraryPickerItem
                    iconLibrary={iconLibrary}
                    value={iconLibrary.name}
                  />
                  {index < Object.values(iconLibraries).length - 1 && (
                    <PickerSeparator className="opacity-50" />
                  )}
                </React.Fragment>
              ))}
            </PickerGroup>
          </PickerRadioGroup>
        </PickerContent>
      </Picker>
      <LockButton
        param="iconLibrary"
        className="absolute top-1/2 right-10 -translate-y-1/2"
      />
    </div>
  )
}