ColorFormatSelector() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ColorFormatSelector() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

deprecated/www/components/color-format-selector.tsx lines 17–58

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
        className={cn("h-7 w-auto gap-1.5 rounded-lg pr-2 text-xs", className)}
        {...props}
      >
        <span className="font-medium">Format: </span>
        <span className="font-mono text-xs text-muted-foreground">
          {format}
        </span>
      </SelectTrigger>
      <SelectContent align="end" 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="font-mono text-xs text-muted-foreground">
              {value}
            </span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}