ColorPalette() — ui Function Reference

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

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ ColorPalette() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/components/color-palette.tsx lines 5–24

export function ColorPalette({ colorPalette }: { colorPalette: ColorPalette }) {
  return (
    <div id={colorPalette.name} className="scroll-mt-20 rounded-lg">
      <div className="flex items-center px-4">
        <div className="flex-1 pl-1 text-sm font-medium">
          <h2 className="capitalize">{colorPalette.name}</h2>
        </div>
        <ColorFormatSelector
          color={colorPalette.colors[0]}
          className="ml-auto"
        />
      </div>
      <div className="flex flex-col gap-4 py-4 sm:flex-row sm:gap-2">
        {colorPalette.colors.map((color) => (
          <Color key={color.hex} color={color} />
        ))}
      </div>
    </div>
  )
}