یک مؤلفه رتبه بندی ⭐ ستاره با Tailwindcss ایجاد کنید

interface StarRatingBasicProps {
  value: number;              // Current rating value
  onChange?: (value: number) => void;  // Callback when rating changes
  className?: string;         // Custom CSS classes
  iconSize?: number;          // Size of star icons
  maxStars?: number;         // Maximum number of stars
  readOnly?: boolean;        // Whether rating can be changed
  color?: string;           // Color of filled stars
}

const StarIcon = React.memo(({
  iconSize,
  index,
  isInteractive,
  onClick,
  onMouseEnter,
  style,
}: {
  index: number;
  style: React.CSSProperties;
  iconSize: number;
  onClick: () => void;
  onMouseEnter: () => void;
  isInteractive: boolean;
}) => (
  <Star
    key={index}
    size={iconSize}
    fill={style.fill}
    color={style.color}
    onClick={onClick}
    onMouseEnter={onMouseEnter}
    className={cn(
      "transition-colors duration-200",
      isInteractive && "cursor-pointer hover:scale-110"
    )}
    style={style}
  />
));

const StarRating_Basic = ({
  className,
  color = "#FFD700",      // Default gold color
  iconSize = 24,          // Default size
  maxStars = 5,          // Default max stars
  onChange,
  readOnly = false,
  value,
}: StarRatingBasicProps) => {
  const [hoverRating, setHoverRating] = React.useState<number | null>(null);

  const handleStarClick = React.useCallback(
    (index: number) => {
      if (readOnly || !onChange) return;
      const newRating = index + 1;
      onChange(newRating);
    },
    [readOnly, onChange]
  );

  const handleStarHover = React.useCallback(
    (index: number) => {
      if (!readOnly) {
        setHoverRating(index + 1);
      }
    },
    [readOnly]
  );

  const handleMouseLeave = React.useCallback(() => {
    if (!readOnly) {
      setHoverRating(null);
    }
  }, [readOnly]);

  const getStarStyle = React.useCallback(
    (index: number) => {
      const ratingToUse =
        !readOnly && hoverRating !== null ? hoverRating : value;
      return {
        color: ratingToUse > index ? color : "gray",
        fill: ratingToUse > index ? color : "transparent",
      } as React.CSSProperties;
    },
    [readOnly, hoverRating, value, color]
  );  

  const stars = React.useMemo(() => {
    return Array.from({ length: maxStars }).map((_, index) => {
      const style = getStarStyle(index);
      return (
        <StarIcon
          key={index}
          index={index}
          style={style}
          iconSize={iconSize}
          onClick={() => handleStarClick(index)}
          onMouseEnter={() => handleStarHover(index)}
          isInteractive={!readOnly}
        />
      );
    });
  }, [maxStars, getStarStyle, iconSize, handleStarClick, handleStarHover, readOnly]);

  return (
    <div
      className={cn("flex items-center gap-x-0.5", className)}
      onMouseLeave={handleMouseLeave}
    >
      {stars}
    div>
  );

// Interactive rating
<StarRating_Basic
  value={3}
  onChange={(newValue) => console.log(`New rating: ${newValue}`)} />
// Read-only rating with custom color
<StarRating_Basic
  value={4.5}
  readOnly={true}
  color="#FF0000"
  iconSize={32}
/>