ColorPalette() — ui Function Reference

Architecture documentation for the ColorPalette() function in color-palette.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ColorPalette() — ui Function Reference

Dependency Diagram

graph TD
  5587aac3_cd2e_5fc0_3dcf_5f9dd884b5fc["ColorPalette()"]
  b67d35c7_52e9_adcc_f607_978c4358de1c["color-palette.tsx"]
  5587aac3_cd2e_5fc0_3dcf_5f9dd884b5fc -->|defined in| b67d35c7_52e9_adcc_f607_978c4358de1c
  style 5587aac3_cd2e_5fc0_3dcf_5f9dd884b5fc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/color-palette.tsx lines 10–34

export function ColorPalette({ colorPalette }: { colorPalette: ColorPalette }) {
  return (
    <div
      id={colorPalette.name}
      className="rounded-lg shadow-sm ring-1 ring-border"
    >
      <div className="flex items-center p-2 pb-0">
        <div className="flex-1 pl-1 text-sm font-medium">
          <h2 className="capitalize">{colorPalette.name}</h2>
        </div>
        <React.Suspense fallback={<ColorFormatSelectorSkeleton />}>
          <ColorFormatSelector
            color={colorPalette.colors[0]}
            className="ml-auto"
          />
        </React.Suspense>
      </div>
      <div className="flex flex-col gap-1 p-2 sm:flex-row sm:gap-2">
        {colorPalette.colors.map((color) => (
          <Color key={color.hex} color={color} />
        ))}
      </div>
    </div>
  )
}