Components

import { StarRating } from "@/components/star-rating";

// Display a 4 out of 5 rating
<StarRating value={4} />

// Display with custom max (e.g., 3 stars)
<StarRating value={2} max={3} />

// Display with custom className
<StarRating value={5} className="text-lg" />

// Location: apps/app/src/app/(authenticated)/reports/components/star-rating.tsx
import { StarIcon } from "lucide-react";
import { cn } from "@repo/design-system/lib/utils";

interface StarRatingProps {
  value: number | null | undefined;
  max?: number;
  className?: string;
}

export function StarRating({ value, max = 5, className }: StarRatingProps) {
  const filled = Math.max(0, Math.min(Math.round(value ?? 0), max));

  if (filled === 0) {
    return <span className={cn("text-muted-foreground", className)}>—</span>;
  }

  return (
    <span className={cn("inline-flex items-center gap-0.5", className)}>
      {Array.from({ length: max }, (_, i) => (
        <StarIcon
          key={i}
          className={cn(
            "size-3.5",
            i < filled
              ? "fill-ember text-ember"
              : "fill-transparent text-muted-foreground/30"
          )}
        />
      ))}
    </span>
  );
}