Rating feature in tailwind css React js

Sore Starling answered on July 21, 2023 Popularity 7/10 Helpfulness 7/10

answer Rating feature in tailwind css React js

Rating feature in tailwind css React js

Comment

// src/components/Rating.js

import React from 'react';

const Rating = ({ rating }) => {
  const maxRating = 5;
  const filledStars = Math.round(rating);
  const emptyStars = maxRating - filledStars;

  return (
    <div className="flex items-center">
      {Array.from({ length: filledStars }).map((_, index) => (
        <svg
          key={`star-filled-${index}`}
          className="h-6 w-6 fill-current text-yellow-500"
          viewBox="0 0 20 20"
        >
          <path
            d="M10 1l2.39 6.14h6.22l-4.95 3.82 1.9 5.86L10 12.29l-4.57 3.63 1.9-5.86L1.39 7.14h6.22L10 1z"
          />
        </svg>
      ))}
      {Array.from({ length: emptyStars }).map((_, index) => (
        <svg
          key={`star-empty-${index}`}
          className="h-6 w-6 fill-current text-gray-300"
          viewBox="0 0 20 20"
        >
          <path
            d="M10 1l2.39 6.14h6.22l-4.95 3.82 1.9 5.86L10 12.29l-4.57 3.63 1.9-5.86L1.39 7.14h6.22L10 1z"
          />
        </svg>
      ))}
    </div>
  );
};

export default Rating;

Popularity 7/10 Helpfulness 7/10 Language javascript

Source: chat.openai.com

Tags: javascript rating tailwind-css

Link to this answer
Share Copy Link

Contributed on Jul 21 2023

Sore Starling

0 Answers Avg Quality 2/10

Rating feature in tailwind css React js

Contents

More Related Answers

Rating feature in tailwind css React js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.