kff

import React from 'react'

interface RadioButtonProps {
  color: 'black' | 'white' | 'grey'
  isSelected: boolean
  onChange: (color: string) => void
}

export default function RadioButton({ color, isSelected, onChange }: RadioButtonProps) {
  const bgColors = {
    black: 'bg-black',
    white: 'bg-white',
    grey: 'bg-gray-500',
  }

  const borderColors = {
    black: 'border-black',
    white: 'border-gray-300',
    grey: 'border-gray-500',
  }

  return (
    <label className="relative inline-block cursor-pointer">
      <input
        type="radio"
        className="absolute opacity-0 w-0 h-0"
        checked={isSelected}
        onChange={() => onChange(color)}
      />
      <span
        className={`block w-10 h-10 rounded-full border-2 ${borderColors[color]} ${bgColors[color]}`}
      >
        {isSelected && (
          <svg
            className={`absolute inset-0 w-full h-full ${color === 'white' ? 'text-black' : 'text-white'}`}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        )}
      </span>
    </label>
  )
}





---------------------------------------------------------------------
import React, { useState } from 'react'
import RadioButton from './radio-button'

export default function ColorSelector() {
  const [selectedColor, setSelectedColor] = useState<string>('')

  const handleColorChange = (color: string) => {
    setSelectedColor(color)
  }

  return (
    <div className="flex flex-col items-center space-y-4">
      <h2 className="text-2xl font-bold mb-2">Select a Color</h2>
      <div className="flex space-x-4">
        {['black', 'white', 'grey'].map((color) => (
          <RadioButton
            key={color}
            color={color as 'black' | 'white' | 'grey'}
            isSelected={selectedColor === color}
            onChange={handleColorChange}
          />
        ))}
      </div>
      {selectedColor && (
        <p className="mt-4 text-lg">
          Selected color: <span className="font-semibold capitalize">{selectedColor}</span>
        </p>
      )}
    </div>
  )
}