Tile usato nella griglia 'Connect' della home: icona contenuta in un chip fg-on-bg, label + handle sotto, freccia esterna che si anima all'hover. Apre in nuova tab con noopener.
Note — Il chip dell'icona è invertito (bg-fg text-bg) per dare presenza. La freccia ArrowUpRight ruota sottilmente all'hover. Wrappalo in un container con border-border per la griglia stile home.
Prompt LLM02
Incolla in Claude o ChatGPT per generare la tua variante. Include il contesto del brand, i token e i vincoli del progetto.
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 <SocialTile>: una riga cliccabile per un link social.
Props:
- icon: ComponentType<SVGProps<SVGSVGElement>> (es. da lucide-react)
- label: string — nome del canale (es. "GitHub")
- href: string
- handle?: string — username/contatto mostrato sotto il label
- className?: string
Layout: <a target="_blank" rel="noopener noreferrer"> con padding px-4 py-3, gap-3, hover:bg-bg-alt. Icona dentro un chip 32px bg-fg text-bg rounded-md grid place-items-center. A destra, una freccia ArrowUpRight da lucide-react color text-fg-soft che diventa text-fg in hover (transition-transform translate-x-0.5 -translate-y-0.5 sul gruppo).
Constraints: server component, semantica corretta, accessibile (label visibile, target blank documentato).
Output: file completo .tsx.
