recipe_app/frontend/src/components/StarRating.tsx

interface StarRatingProps {
  rating: number;
  onRatingChange: (newRating: number) => void;
}

const StarRating = ({ rating, onRatingChange }: StarRatingProps) => {

  return (
    <div>
      {[...Array(5)].map((_, index) => {
        index += 1;
        return (
          <span
            key={index}
            onClick={() => onRatingChange(index)}
            style={{ color: index <= rating ? 'gold' : 'gray', fontSize: '2rem', cursor: 'pointer' }}
          >
            ★
          </span>
        );
      })}
    </div>
  );
};

export default StarRating;