Prompt · stripe-rule
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 <StripeRule>: un divisore decorativo orizzontale.
Props:
- className?: string
- height?: number (default 6) — altezza in px.
Implementazione:
- Il pattern hatch a 45° viene da un'utility Tailwind v4 chiamata "stripe-rule" definita in globals.css con @utility, basata su repeating-linear-gradient con var(--stripe).
- Il componente è un <div role="separator" aria-hidden> con className "stripe-rule w-full" e style={{ height }}.
Constraints: server component, niente animazioni, accessibilità: solo decorativo (aria-hidden).
Output: il componente .tsx + lo snippet @utility da aggiungere a globals.css.