Color Selector Component (colors.tsx)

Types

ColorSelectorProps

Props for the ColorSelector component:

• selectedColor: string – The currently selected color (hex code).

• onColorSelect: (color: string) => void – Callback when a color is selected.

ColorOption

Represents a color option:

• value: string – The color's hex code.

• label: string – The color's name.

---

Constants

• commonColors: An array of preset color options (red, orange, yellow, green, cyan, blue, purple, magenta, black, gray).

---

Component

ColorSelector({ selectedColor, onColorSelect }: ColorSelectorProps)

A color picker UI that allows users to select a color for annotation or styling.

State:

• showColorWheel: Boolean to toggle between preset colors and a color wheel input.

UI Features:

• Header with a toggle button to switch between "Presets" and "Color Wheel".

• Presets View:

  • Displays a grid of color swatches.

  • Clicking a swatch selects the color.

  • The selected color is visually highlighted.

• Color Wheel View:

  • Displays an HTML color input for custom color selection.

Accessibility:

• Each color swatch has an aria-label and title for screen readers and tooltips.