spb/toveli

1import Link from "next/link";2import type { ReactNode } from "react";34export function Section({ title, action, children, className = "" }: { title: ReactNode; action?: { href: string; label: string }; children: ReactNode; className?: string }) {5  return (6    <section className={`mx-auto max-w-7xl px-4 ${className}`}>7      <div className="flex items-end justify-between gap-4 mb-4">8        <h2 className="text-xl md:text-2xl font-bold tracking-tight">{title}</h2>9        {action && <Link href={action.href} className="text-sm font-semibold text-brand-dark hover:underline whitespace-nowrap">{action.label} →</Link>}10      </div>11      {children}12    </section>13  );14}15export function Stat({ label, value, sub, tone }: { label: string; value: ReactNode; sub?: ReactNode; tone?: "good" | "warn" | "info" }) {16  const c = tone === "good" ? "text-good" : tone === "warn" ? "text-warn" : tone === "info" ? "text-info" : "text-ink";17  return (<div className="tv-card p-4"><p className="tv-label">{label}</p><p className={`mt-1 text-2xl font-extrabold tracking-tight tabular-nums ${c}`}>{value}</p>{sub && <p className="mt-0.5 text-xs text-ink-3">{sub}</p>}</div>);18}19export function Empty({ title, hint, action }: { title: string; hint?: string; action?: { href: string; label: string } }) {20  return (<div className="tv-card p-10 text-center"><p className="text-lg font-semibold">{title}</p>{hint && <p className="mt-1 text-sm text-ink-2 max-w-md mx-auto">{hint}</p>}{action && <Link href={action.href} className="tv-btn tv-btn-primary mt-4">{action.label}</Link>}</div>);21}22export function Notice({ children, tone = "info" }: { children: ReactNode; tone?: "info" | "warn" }) {23  return <p className={`rounded-sm px-3 py-2 text-xs leading-relaxed ${tone === "warn" ? "bg-warn-soft text-warn" : "bg-surface-2 text-ink-2"}`}>{children}</p>;24}25export function Tabs({ items, current, onChange }: { items: { id: string; label: string }[]; current: string; onChange: (id: string) => void }) {26  return (<div className="tv-tabs" role="tablist">{items.map((t) => <button key={t.id} role="tab" type="button" aria-selected={current === t.id} className="tv-tab" onClick={() => onChange(t.id)}>{t.label}</button>)}</div>);27}28