Una pill compatta con dot prefisso colorato (emerald / amber / soft) e label mono uppercase. Pensata per indicare lo stato di un tool, di un componente o di una feature.
Note — Quattro toni: live (emerald), wip (amber), soon e neutral (entrambi soft). Override del label disponibile via prop label per casi come 'Beta', 'Alpha', 'Internal'.
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.
Estrai un componente riutilizzabile <StatusPill> da inline che già esiste in src/app/tools/page.tsx.
Props:
- status: "live" | "wip" | "soon"
- className?: string
Layout: span inline-flex items-center gap-1.5 rounded-full border border-border bg-bg-alt px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.08em] text-fg-muted. Dot 1.5x1.5 rounded-full prefisso, colore: emerald-500 / amber-500 / fg-soft.
Esporta anche STATUS_META già esistente (label, tone, group, groupHint) da un singolo modulo condiviso, in modo che /tools e /components consumino la stessa fonte di verità. Aggiorna i due file consumer dopo aver creato il componente.
Output: src/components/status-pill.tsx + diff dei due consumer.
Uso tipico03
tsx
<StatusPill tone="live" />
Dipendenze04
npm
tailwind-merge
clsx
Interno
@/lib/utils#cn
Ti è servito? Dimmelo, oppure proponi il prossimo componente.
