simple-react-app-kit/packages/appearance/docs/sandboxes/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,
  title,
  variant,
}: {
  config: ThemeColorConfig
  onConfigChange: (config: ThemeColorConfig) => void
  title: string
  variant?: ThemeColorPickerVariant
}) {
  return (
    <ThemeColorPicker
      title={title}
      swatches={accentColorSwatches}
      value={config.accentColor}
      variant={variant}
      onValueChange={(accentColor) =>
        onConfigChange({ ...config, accentColor })
      }
    />
  )
}