Color Utils

import { ColorPicker } from 'src/components/color-utils';
 
const COLOR_OPTIONS = ['#00A76F', '#8E33FF', '#00B8D9', '#22C55E', '#FFAB00', '#FF5630', '#78070A', '#5119B7'];
 
export function App() {
  const [selected, setSelected] = useState(COLOR_OPTIONS[0]);
 
  const onSelected = useCallback((inputValue) => {
    setSelected(inputValue);
  }, []);
 
  return <ColorPicker selected={selected} onSelectColor={onSelected} colors={COLOR_OPTIONS} />;
}

import { ColorPicker } from 'src/components/color-utils';
 
const COLOR_OPTIONS = ['#00A76F', '#8E33FF', '#00B8D9', '#22C55E', '#FFAB00', '#FF5630', '#78070A', '#5119B7'];
 
export function App() {
  const [selected, setSelected] = useState(COLOR_OPTIONS.slice(1, 3));
 
  const onSelected = useCallback((inputValue) => {
    setSelected(inputValue);
  }, []);
 
  return <ColorPicker selected={selected} onSelectColor={onSelected} colors={COLOR_OPTIONS} />;
}

import { ColorPreview } from 'src/components/color-utils';
 
const COLOR_OPTIONS = ['#FC5B25', '#8E33FF', '#00B8D9', '#22C55E', '#FFAB00', '#FF5630', '#78070A', '#5119B7'];
 
export function App() {
  return (
    <>
      <ColorPreview colors={COLOR_OPTIONS.slice(0, 2)} />
      <ColorPreview colors={COLOR_OPTIONS} />
      <ColorPreview colors={COLOR_OPTIONS} limit={6} />
    </>
  );
}