import * as React from "react";

import { cn } from "@/lib/utils";

const SIZE_STYLES = {
  sm: "h-3.5 w-3.5",
  md: "h-4 w-4",
  lg: "h-5 w-5",
} as const;

export interface RatingDisplayProps
  extends React.HTMLAttributes<HTMLDivElement> {
  value: number;
  max?: number;
  reviewCount?: number;
  size?: keyof typeof SIZE_STYLES;
  showReviewCount?: boolean;
}

export function RatingDisplay({
  value,
  max = 5,
  reviewCount,
  size = "md",
  showReviewCount = true,
  className,
  ...props
}: RatingDisplayProps) {
  const clampedValue = Math.min(max, Math.max(0, value));
  const iconSize = SIZE_STYLES[size];
  const shouldShowReviews = showReviewCount && reviewCount !== undefined;

  return (
    <div
      className={cn("inline-flex items-center gap-2", className)}
      {...props}
    >
      <div
        className="inline-flex items-center gap-1"
        aria-label={`Rated ${clampedValue} out of ${max}`}
      >
        {Array.from({ length: max }, (_, index) => {
          const fillPercent = Math.min(1, Math.max(0, clampedValue - index));
          return (
            <span key={`rating-star-${index}`} className="relative inline-flex">
              <StarIcon className={cn(iconSize, "text-muted-foreground")} />
              <span
                className="absolute inset-0 overflow-hidden text-primary"
                style={{ width: `${fillPercent * 100}%` }}
              >
                <StarIcon className={iconSize} />
              </span>
            </span>
          );
        })}
      </div>
      {shouldShowReviews ? (
        <span className="text-xs text-muted-foreground">
          {reviewCount} reviews
        </span>
      ) : null}
    </div>
  );
}

function StarIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className={className}>
      <path
        d="M11.48 3.5c.2-.5.84-.5 1.04 0l2.16 5.3a1 1 0 0 0 .77.6l5.72.54c.54.05.76.73.35 1.08l-4.33 3.8a1 1 0 0 0-.32.98l1.3 5.6c.12.53-.45.95-.92.67l-4.9-2.92a1 1 0 0 0-1.02 0l-4.9 2.92c-.47.28-1.04-.14-.92-.67l1.3-5.6a1 1 0 0 0-.32-.98l-4.33-3.8c-.41-.35-.19-1.03.35-1.08l5.72-.54a1 1 0 0 0 .77-.6l2.16-5.3Z"
        fill="currentColor"
        stroke="currentColor"
        strokeWidth={1.2}
      />
    </svg>
  );
}
Rating Display

Dependencies

Files

Installation
