Nick Szaunig
c7927f2883
Vollstaendige Next.js/Prisma-E-Commerce-Anwendung fuer eine Imkerei: Shop, Warenkorb, Stripe-Checkout, Kundenkonto mit 2FA, Admin-Bereich (Produkte, Ernten, Chargen, Bestellungen, Gutscheine, admin-editierbare Website-Inhalte), i18n (DE/EN), Rate-Limiting/CSP/Audit-Log-Haertung, PostgreSQL- und MySQL-Unterstuetzung ueber austauschbare Prisma- Treiber-Adapter, Unit-/Komponenten-/E2E-Tests.
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
const STAR_PATH =
|
|
"M10 1.5l2.47 5.27 5.66.6-4.24 3.9 1.15 5.6L10 14.9l-5.04 2.97 1.15-5.6-4.24-3.9 5.66-.6z";
|
|
|
|
/**
|
|
* Reine Anzeige-Sternebewertung als SVG statt Unicode-Glyphen (★/☆) — die
|
|
* rendern je nach Betriebssystem/Schriftart sichtbar unterschiedlich breit
|
|
* und krumm. Nicht fuer die interaktive Bewertungsabgabe gedacht (dort bleibt
|
|
* der bestehende peer-checked-Radio-Trick, der einen echten Formularwert
|
|
* braucht).
|
|
*/
|
|
export function StarRating({
|
|
value,
|
|
size = 14,
|
|
className = "",
|
|
}: {
|
|
value: number;
|
|
size?: number;
|
|
className?: string;
|
|
}) {
|
|
const rounded = Math.round(value);
|
|
return (
|
|
<span className={`inline-flex items-center gap-0.5 ${className}`} aria-hidden="true">
|
|
{Array.from({ length: 5 }, (_, i) => (
|
|
<svg
|
|
key={i}
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 20 20"
|
|
fill={i < rounded ? "currentColor" : "none"}
|
|
stroke="currentColor"
|
|
strokeWidth="1.2"
|
|
strokeLinejoin="round"
|
|
className={i < rounded ? "text-honey" : "text-honey/30"}
|
|
>
|
|
<path d={STAR_PATH} />
|
|
</svg>
|
|
))}
|
|
</span>
|
|
);
|
|
}
|