ColorPicker

ColorPicker.tsx

import React, { useState } from "react";
import "./ColorPicker.css";

interface ColorPickerProps {
  defaultColor?: string;
  onColorChange?: (color: string) => void;
}

const ColorPicker = ({
  defaultColor = "#ffffff",
  onColorChange = () => {},
}: ColorPickerProps) => {
  const [color, setColor] = useState(defaultColor);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newColor = e.target.value;
    setColor(newColor);
    onColorChange(newColor);
  };

  return (
    <div className="colorPicker">
      <div className="colorPreview" style={{ backgroundColor: color }}></div>
      <input
        type="color"
        value={color}
        onChange={handleChange}
        className="colorInput"
      />
    </div>
  );
};

export default ColorPicker;

ColorPicker.module.css

.colorPicker {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: #f2f2f2;
  border-radius: 4px;
}

.colorPreview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;
  border: 1px solid #ccc;
}

.colorInput {
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}