"use client"; import { useState, type CSSProperties } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Star, ShieldCheck } from "lucide-react"; import { cn } from "@/lib/utils"; const SPRING = { type: "spring", stiffness: 520, damping: 20, mass: 0.7 } as const; const EASE = [0.16, 1, 0.3, 1] as const; const AMBER = "#f7bb42"; const AMBER_DEEP = "#f59e2e"; const AMBER_GLOW = "drop-shadow(0 1px 6px rgba(247,187,66,0.45))"; const EMPTY_STROKE = "rgba(255,255,255,0.20)"; const EMPTY_FILL = "rgba(255,255,255,0.03)"; const round = (n: number, d = 0) => { const f = 10 ** d; return Math.round(n * f) / f; }; export interface StarRatingProps { /** Controlled locked rating. Omit for uncontrolled. */ value?: number; /** Initial rating when uncontrolled. */ defaultValue?: number; max?: number; /** Star size in pixels. */ size?: number; readOnly?: boolean; /** Enable the idle shimmer sweep across filled stars. */ shimmer?: boolean; onChange?: (value: number) => void; onHoverChange?: (value: number | null) => void; className?: string; ariaLabel?: string; } export function StarRating({ value, defaultValue = 0, max = 5, size = 34, readOnly = false, shimmer = false, onChange, onHoverChange, className, ariaLabel, }: StarRatingProps) { const isControlled = value !== undefined; const [internal, setInternal] = useState(defaultValue); const [hover, setHover] = useState(null); const current = isControlled ? value : internal; const isHovering = !readOnly && hover !== null; const display = hover ?? current; const activeIndex = isHovering ? (hover as number) - 1 : -1; const gap = round(size * 0.26); function commit(v: number) { if (!isControlled) setInternal(v); onChange?.(v); } function setHoverValue(v: number | null) { setHover(v); onHoverChange?.(v); } function onKeyDown(e: React.KeyboardEvent) { if (readOnly) return; if (e.key === "ArrowRight" || e.key === "ArrowUp") { e.preventDefault(); commit(Math.min(max, Math.floor(current) + 1)); } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { e.preventDefault(); commit(Math.max(0, Math.ceil(current) - 1)); } else if (e.key === "Home") { e.preventDefault(); commit(1); } else if (e.key === "End") { e.preventDefault(); commit(max); } } const filledPct = round((Math.min(display, max) / max) * 100); return (

setHoverValue(null)} className={cn( "relative inline-flex select-none outline-none", !readOnly && "cursor-pointer rounded-lg focus-visible:ring-2 focus-visible:ring-brand/60", className )} style={{ gap }} > {Array.from({ length: max }).map((_, i) => { const fillPortion = Math.max(0, Math.min(1, display - i)); const dist = Math.abs(i - activeIndex); const bump = activeIndex >= 0 ? Math.max(0, 0.24 - 0.12 * dist) : 0; const scale = round(1 + bump, 2); const y = -Math.round(bump * 42); const iconStyle: CSSProperties = { width: size, height: size, display: "block", }; return ( setHoverValue(i + 1)} onPointerDown={readOnly ? undefined : () => commit(i + 1)} className="relative inline-flex" style={{ width: size, height: size, transformOrigin: "center bottom" }} animate={{ scale, y }} transition={SPRING} > ); })} {shimmer && filledPct > 0 && !isHovering && (

)}

); } /* -------------------------------------------------------------------------- */ const RATING_LABELS = ["Poor", "Fair", "Good", "Great", "Excellent"]; const BREAKDOWN = [ { stars: 5, count: 1830 }, { stars: 4, count: 190 }, { stars: 3, count: 55 }, { stars: 2, count: 25 }, { stars: 1, count: 20 }, ]; const TOTAL = BREAKDOWN.reduce((s, b) => s + b.count, 0); const AVERAGE = BREAKDOWN.reduce((s, b) => s + b.stars * b.count, 0) / TOTAL; const formatCount = (n: number) => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ","); export default function Demo() { const [rating, setRating] = useState(4); const [hover, setHover] = useState(null); const preview = hover ?? rating; const label = preview > 0 ? RATING_LABELS[Math.ceil(preview) - 1] : "Tap to rate"; return (

{/* faint brand wash, kept subtle */}

Customer reviews Verified

{AVERAGE.toFixed(1)}

from {formatCount(TOTAL)} reviews

{BREAKDOWN.map((b, idx) => { const pct = round((b.count / TOTAL) * 100); return (

{b.stars}

{pct}%

); })}

How would you rate it?

{label} · {hover !== null ? "click to confirm" : `your rating is saved`}

); }

Star Rating