| 1 | "use client"; |
| 2 | |
| 3 | import { type ThemeProperties } from "@/lib/presentation/themes"; |
| 4 | import { ColorField } from "./ColorField"; |
| 5 | |
| 6 | interface ColorEditorProps { |
| 7 | modeColors: ThemeProperties["colors"]; |
| 8 | onColorChange: (key: keyof ThemeProperties["colors"], value: string) => void; |
| 9 | } |
| 10 | |
| 11 | export function ColorEditor({ modeColors, onColorChange }: ColorEditorProps) { |
| 12 | return ( |
| 13 | <div className="space-y-4"> |
| 14 | <div className="grid grid-cols-2 gap-3"> |
| 15 | <ColorField |
| 16 | label="Background" |
| 17 | value={modeColors.background} |
| 18 | onChange={(v) => onColorChange("background", v)} |
| 19 | /> |
| 20 | <ColorField |
| 21 | label="Primary" |
| 22 | value={modeColors.primary} |
| 23 | onChange={(v) => onColorChange("primary", v)} |
| 24 | /> |
| 25 | |
| 26 | <ColorField |
| 27 | label="Accent" |
| 28 | value={modeColors.accent} |
| 29 | onChange={(v) => onColorChange("accent", v)} |
| 30 | /> |
| 31 | </div> |
| 32 | </div> |
| 33 | ); |
| 34 | } |
| 35 |