chore: initial project import

components/ui.tsx

@@ -0,0 +1,109 @@
+import Link from "next/link";
+import { ReactNode } from "react";
+
+export function Button({
+  href,
+  children,
+  variant = "primary",
+  className,
+  type = "button"
+}: {
+  href?: string;
+  children: ReactNode;
+  variant?: "primary" | "secondary" | "ghost";
+  className?: string;
+  type?: "button" | "submit" | "reset";
+}) {
+  const styleClass =
+    variant === "primary"
+      ? "bg-gradient-to-br from-primary to-primary-container text-white rounded-full hover:brightness-105 shadow-sm shadow-primary/30"
+      : variant === "secondary"
+        ? "bg-surface-container-low text-on-surface border border-outline-variant/70 rounded-full hover:bg-surface-container-high"
+        : "text-on-surface-variant hover:text-on-surface hover:bg-surface-container-low";
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className={`inline-flex items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold font-headline transition ${styleClass} ${
+          className ?? ""
+        } ${className?.includes("w-full") ? "" : "min-w-24"}`}
+      >
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      type={type}
+      className={`inline-flex items-center justify-center rounded-full px-4 py-2.5 text-sm font-semibold font-headline transition ${styleClass} ${
+        className ?? ""
+      } ${className?.includes("w-full") ? "" : "min-w-24"}`}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function SectionCard({
+  title,
+  description,
+  children
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="rounded-[1.25rem] border border-line bg-surface-container-lowest p-5 shadow-card">
+      <div className="mb-4">
+        <h3 className="text-base font-bold font-headline text-on-surface">{title}</h3>
+        {description ? <p className="mt-1 text-sm text-on-surface-variant">{description}</p> : null}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+export function Badge({
+  children,
+  tone = "default"
+}: {
+  children: ReactNode;
+  tone?: "default" | "success" | "warning" | "danger";
+}) {
+  const tones = {
+    default: "bg-surface-container-high text-on-surface-variant",
+    success: "bg-success/10 text-success",
+    warning: "bg-warning/10 text-warning",
+    danger: "bg-error/10 text-danger"
+  };
+
+  return (
+    <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${tones[tone]}`}>
+      {children}
+    </span>
+  );
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions
+}: {
+  title: string;
+  description: string;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-4 border-b border-line pb-6 md:flex-row md:items-end md:justify-between">
+      <div>
+        <p className="text-xs font-bold uppercase tracking-[0.16em] text-on-surface-variant">ZappCare</p>
+        <h1 className="mt-2 text-3xl font-extrabold font-headline text-on-surface">{title}</h1>
+        <p className="mt-2 max-w-2xl text-sm text-on-surface-variant">{description}</p>
+      </div>
+      {actions ? <div className="flex flex-wrap gap-3">{actions}</div> : null}
+    </div>
+  );
+}