Claude
61a40437d2
One-Pager mit Vite, React, Tailwind und Motion: WebGL-Seidenhintergrund, Chrom-Wortmarke, Scroll-Laufband, Preisliste mit Direktbuchung pro Leistung (Setmore-Deep-Links), Team-Raster mit Farb-Spotlight, Öffnungszeiten mit Live-Status sowie Impressum und Datenschutz. Logo ist ein Platzhalter. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KBHsCnWNXAB2Le3gAEsivF
20 lines
732 B
TypeScript
20 lines
732 B
TypeScript
import type { OpenStatus } from '../lib/hours'
|
|
import { cn } from '../lib/cn'
|
|
|
|
export function StatusPill({ status, className }: { status: OpenStatus; className?: string }) {
|
|
return (
|
|
<p
|
|
className={cn(
|
|
'inline-flex items-center gap-2.5 rounded-full border border-white/10 bg-ink/40 px-3.5 py-1.5 text-xs text-bone/80 backdrop-blur-md',
|
|
className,
|
|
)}
|
|
>
|
|
<span className="relative flex size-2">
|
|
{status.open && <span className="absolute inset-0 animate-ping rounded-full bg-emerald-400/70 motion-reduce:animate-none" />}
|
|
<span className={cn('relative size-2 rounded-full', status.open ? 'bg-emerald-400' : 'bg-rose-400')} />
|
|
</span>
|
|
{status.label}
|
|
</p>
|
|
)
|
|
}
|