ZeroToShip

Docs/Componenti

// componente

Rating

Il badge “alloro”: due rami disegnati che incorniciano una riga di testo e cinque stelle. Piccolo, decorativo, senza props e senza stato — lo appoggi vicino a una CTA o in fondo a una card per dare un tocco di premio/riconoscimento.

File

components/TestimonialRating.tsx

Uso base

app/page.tsx
tsx
import TestimonialRating from "@/components/TestimonialRating";

<TestimonialRating />

Personalizzare

  • Testo: il <p> centrale, di default “1000+ happy users”. Tienilo corto: lo spazio tra i due rami è poco.
  • Stelle: cinque SVG da [...Array(5)], classe w-4 h-4 text-yellow-500.
  • Rami: due SVG identici e speculari, con fill-base-content/40 (ink al 40%) e rotate-12 / -rotate-12. Cambia l'opacità per renderli più o meno presenti, e w-8 per la dimensione.
  • Allineamento: il wrapper ha mt-auto, quindi dentro una card flex in colonna si incolla da solo in fondo.