Il badge 'verificato' che appare accanto al nome nell'hero. SVG inline, scala via prop size, colore preso da var(--accent) così segue il tema light/dark.
Sei un senior frontend engineer. Stai lavorando su un sito Next.js 16 + React 19 + Tailwind v4 in italiano, look chanhdai-inspired: colonna stretta 672px, Geist Sans + Geist Mono, hairline 1px, divisori a stripe diagonale, palette zinc.
Token CSS disponibili: --bg, --bg-alt, --fg, --fg-muted, --fg-soft, --border, --border-strong, --accent. Usa SEMPRE queste variabili tramite le utility tailwind generate (bg-bg, text-fg-muted, border-border, ecc.). Helper "cn" da "@/lib/utils". Niente librerie UI extra: solo lucide-react e tailwind-merge.
Genera un componente <VerifiedBadge>: una spunta blu stile X/Twitter.
Props:
- size?: number (default 18)
- className?: string
Implementazione: SVG inline 24x24 viewBox, fill currentColor, className "inline-block text-accent" così eredita il var(--accent) dai token. Il path deve disegnare uno scallop a 8 punte tipo Twitter Verified con un check bianco interno.
Constraints: server component, aria-hidden (decorativo, il significato lo dà il contesto), nessuna dipendenza extra.
Output: file completo .tsx.
Uso tipico03
tsx
<VerifiedBadge size={18} />
Dipendenze04
npm
tailwind-merge
clsx
Interno
@/lib/utils#cn
--accent token
Ti è servito? Dimmelo, oppure proponi il prossimo componente.
