ColorFormatSelector() — ui Function Reference

Architecture documentation for the ColorFormatSelector() function in color-format-selector.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ColorFormatSelector() — ui Function Reference

Dependency Diagram

graph TD
  754b1c41_1dc4_9f63_61f2_7c95355f362e["ColorFormatSelector()"]
  e950130f_aa57_3b99_c944_ccb5f1c8dcd1["color-format-selector.tsx"]
  754b1c41_1dc4_9f63_61f2_7c95355f362e -->|defined in| e950130f_aa57_3b99_c944_ccb5f1c8dcd1
  style 754b1c41_1dc4_9f63_61f2_7c95355f362e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/color-format-selector.tsx lines 16–59

export function ColorFormatSelector({
  color,
  className,
  ...props
}: Omit<React.ComponentProps<typeof SelectTrigger>, "color"> & {
  color: Color
}) {
  const { format, setFormat, isLoading } = useColors()
  const formats = React.useMemo(() => getColorFormat(color), [color])

  if (isLoading) {
    return <ColorFormatSelectorSkeleton />
  }

  return (
    <Select value={format} onValueChange={setFormat}>
      <SelectTrigger
        size="sm"
        className={cn(
          "bg-secondary text-secondary-foreground border-secondary shadow-none",
          className
        )}
        {...props}
      >
        <span className="font-medium">Format: </span>
        <span className="text-muted-foreground font-mono">{format}</span>
      </SelectTrigger>
      <SelectContent align="end" position="popper" className="rounded-xl">
        {Object.entries(formats).map(([format, value]) => (
          <SelectItem
            key={format}
            value={format}
            className="gap-2 rounded-lg [&>span]:flex [&>span]:items-center [&>span]:gap-2"
          >
            <span className="font-medium">{format}</span>
            <span className="text-muted-foreground font-mono text-xs">
              {value}
            </span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}