39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { HexColorPicker } from 'react-colorful';
|
|
import { Input } from '@/components/ui/input';
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
interface ColorPickerProps {
|
|
color: string;
|
|
onChange: (color: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
// Allow partial input while typing
|
|
onChange(value);
|
|
};
|
|
|
|
return (
|
|
<div className={cn('space-y-4', className)}>
|
|
<HexColorPicker color={color} onChange={onChange} className="w-full" />
|
|
<div className="space-y-2">
|
|
<label htmlFor="color-input" className="text-sm font-medium">
|
|
Color Value
|
|
</label>
|
|
<Input
|
|
id="color-input"
|
|
type="text"
|
|
value={color}
|
|
onChange={handleInputChange}
|
|
placeholder="#ff0099 or rgb(255, 0, 153)"
|
|
className="font-mono"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|