spsays-training/components/settings/settings-ui.tsx

/**
 * Shared settings chrome — the shell + row primitives used by the settings
 * hub (`/settings`) and every dedicated setting page under it
 * (`/settings/reading`, `/settings/notifications`, `/settings/account`,
 * `/settings/legal`).
 *
 * All presentational, no hooks — safe to render from server components. The
 * hub is a menu of `NavRow`s that route into these pages; each page frames
 * its controls with `SettingsShell` (back link + title) so the header reads
 * consistently everywhere. `Section` / `Row` are the plain, card-less
 * building blocks the individual pages compose.
 */

import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";

/** Page frame: back link + title (+ optional description) over the content. */
export function SettingsShell({
  backHref,
  backLabel,
  title,
  description,
  children,
}: {
  backHref: string;
  backLabel: string;
  title: string;
  description?: string;
  children: React.ReactNode;
}) {
  return (
    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6 py-6 space-y-8">
      <header className="space-y-1">
        <Link
          href={backHref}
          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          <ChevronLeft className="size-4" />
          {backLabel}
        </Link>
        <h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground pt-2">
          {title}
        </h1>
        {description ? (
          <p className="text-sm text-muted-foreground pt-1">{description}</p>
        ) : null}
      </header>
      {children}
    </main>
  );
}

/** A grouped, bordered list container — wrap `NavRow`s (hub, legal). */
export function NavList({ children }: { children: React.ReactNode }) {
  return (
    <ul className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-card">
      {children}
    </ul>
  );
}

/** A tappable navigation row: icon + label/description on the left, a
 *  chevron on the right. The whole row is the link target. */
export function NavRow({
  href,
  icon,
  label,
  description,
}: {
  href: string;
  icon?: React.ReactNode;
  label: string;
  description?: string;
}) {
  return (
    <li>
      <Link
        href={href}
        className="flex items-center gap-4 px-4 py-3.5 group transition-colors hover:bg-muted/50"
      >
        {icon ? (
          <span className="shrink-0 text-muted-foreground group-hover:text-foreground transition-colors">
            {icon}
          </span>
        ) : null}
        <span className="min-w-0 flex-1">
          <span className="block text-sm font-medium text-foreground">
            {label}
          </span>
          {description ? (
            <span className="mt-0.5 block text-xs text-muted-foreground">
              {description}
            </span>
          ) : null}
        </span>
        <ChevronRight className="size-4 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
      </Link>
    </li>
  );
}

/** A titled block within a settings page (used by pages that stack more
 *  than one control group). */
export function Section({
  title,
  description,
  children,
}: {
  title?: string;
  description?: string;
  children: React.ReactNode;
}) {
  return (
    <section className="space-y-4">
      {title || description ? (
        <div className="border-b border-border pb-3">
          {title ? (
            <h2 className="font-[family-name:var(--font-title)] text-xl font-semibold text-foreground">
              {title}
            </h2>
          ) : null}
          {description ? (
            <p className="text-sm text-muted-foreground mt-1">{description}</p>
          ) : null}
        </div>
      ) : null}
      <div>{children}</div>
    </section>
  );
}

/** A label/description + trailing action row (used inside control lists,
 *  e.g. the account page's connect / verify / change-password rows). */
export function Row({
  icon,
  label,
  description,
  action,
}: {
  icon?: React.ReactNode;
  label: string;
  description?: string;
  action: React.ReactNode;
}) {
  return (
    <li className="flex items-center justify-between gap-4 py-3">
      <div className="min-w-0">
        <div className="flex items-center gap-2">
          {icon ? <span className="shrink-0">{icon}</span> : null}
          <span className="text-sm text-foreground truncate">{label}</span>
        </div>
        {description ? (
          <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
        ) : null}
      </div>
      <div className="shrink-0">{action}</div>
    </li>
  );
}