minutework 0.1.0

package/assets/templates/next-tenant-app/src/features/public-shell/components/public-site-shell.tsx

@@ -0,0 +1,111 @@
+import type { ReactNode } from "react";
+import type { Route } from "next";
+import Link from "next/link";
+
+import { ArrowUpRight, Sparkles } from "lucide-react";
+
+import { ThemeModeToggle } from "@/design-system/patterns/theme-mode-toggle";
+import { Button } from "@/design-system/primitives/button";
+import type { SiteConfig } from "@/lib/content/contracts";
+
+function navLinkClass(active: boolean) {
+  return active
+    ? "rounded-full border border-border bg-surface px-4 py-2 text-sm font-medium text-foreground shadow-sm"
+    : "rounded-full border border-transparent px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:bg-surface hover:text-foreground";
+}
+
+export function PublicSiteShell({
+  activeHref,
+  children,
+  siteConfig,
+}: {
+  activeHref: string;
+  children: ReactNode;
+  siteConfig: SiteConfig;
+}) {
+  return (
+    <div className="public-site-background min-h-screen text-foreground">
+      <div className="relative isolate overflow-hidden">
+        <div className="public-site-orb absolute inset-x-0 top-0 -z-10 h-[28rem] opacity-80" />
+
+        <header className="sticky top-0 z-20 border-b border-border/70 bg-background/80 backdrop-blur">
+          <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 py-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex items-center justify-between gap-4">
+              <Link href="/" className="flex items-center gap-3">
+                <span className="flex size-11 items-center justify-center rounded-2xl border border-border bg-surface shadow-sm">
+                  <Sparkles className="size-5 text-primary" />
+                </span>
+                <div className="space-y-1">
+                  <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+                    Combined Starter
+                  </p>
+                  <p className="text-base font-semibold tracking-tight text-foreground">
+                    {siteConfig.siteName}
+                  </p>
+                </div>
+              </Link>
+
+              <div className="lg:hidden">
+                <ThemeModeToggle className="w-fit" />
+              </div>
+            </div>
+
+            <nav className="flex flex-wrap items-center gap-2">
+              {siteConfig.primaryNavigation.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href as Route}
+                  className={navLinkClass(item.href === activeHref)}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
+
+            <div className="hidden items-center gap-3 lg:flex">
+              <ThemeModeToggle className="w-fit" />
+              <Button asChild type="button" variant="outline">
+                <Link href={siteConfig.secondaryCta.href as Route}>
+                  {siteConfig.secondaryCta.label}
+                </Link>
+              </Button>
+              <Button asChild type="button">
+                <Link href={siteConfig.primaryCta.href as Route}>
+                  {siteConfig.primaryCta.label}
+                  <ArrowUpRight className="size-4" />
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </header>
+
+        <div className="mx-auto max-w-6xl px-6 pb-20 pt-10">{children}</div>
+
+        <footer className="border-t border-border/70 bg-background/90">
+          <div className="mx-auto grid max-w-6xl gap-6 px-6 py-8 md:grid-cols-[1.2fr,0.8fr]">
+            <div className="space-y-2">
+              <p className="text-sm font-semibold uppercase tracking-[0.24em] text-muted-foreground">
+                {siteConfig.organizationName}
+              </p>
+              <p className="max-w-2xl text-sm leading-7 text-muted-foreground">
+                {siteConfig.footerBlurb}
+              </p>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-3 md:justify-end">
+              {siteConfig.primaryNavigation.map((item) => (
+                <Link
+                  key={`${item.href}-footer`}
+                  href={item.href as Route}
+                  className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}