EyeDropper

import { ColorPicker, useColorState } from 'react-beautiful-color';
import { Pipette } from 'lucide-react';

export function EyeDropperExample() {
  const [{ colorInput, colorState }, setColor] = useColorState({ 
    type: 'hex', 
    value: '#ff6b9d' 
  });

  return (
    <div className="flex items-center gap-4">
      <ColorPicker color={colorInput} onChange={setColor}>
        <ColorPicker.EyeDropper>
          <Pipette size={20} />
        </ColorPicker.EyeDropper>
      </ColorPicker>

      {/* Show selected color */}
      <div 
        className="w-16 h-16 rounded border"
        style={{ backgroundColor: colorState.hex }}
      />
    </div>
  );
}