simple-react-app-kit/docs/src/sandboxes/appearance/theme-toggle/AccentPicker.tsx

import {
  ThemeColorPicker,
  accentColorSwatches,
  type ThemeColorPickerVariant,
} from "@workspace/appearance/components/theme-color-picker"
import type { ThemeColorConfig } from "@workspace/appearance/theme"

export function AccentPicker({
  config,
  onConfigChange,
  variant,
}: {
  config: ThemeColorConfig
  onConfigChange: (config: ThemeColorConfig) => void
  variant?: ThemeColorPickerVariant
}) {
  return (
    <ThemeColorPicker
      title="Accent color"
      swatches={accentColorSwatches}
      value={config.accentColor}
      variant={variant}
      onValueChange={(accentColor) =>
        onConfigChange({ ...config, accentColor })
      }
    />
  )
}