69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { apiFetch } from "@/lib/api";
|
|
import { BrandMark } from "@/components/ui/BrandMark";
|
|
|
|
export function PublicShell({ children }: { children: React.ReactNode }) {
|
|
const [branding, setBranding] = useState<{ appName: string; logoUrl: string | null } | null>(null);
|
|
const tenantSlug = useMemo(() => {
|
|
if (typeof window === "undefined") return null;
|
|
const u = new URL(window.location.href);
|
|
return u.searchParams.get("tenantSlug");
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const run = async () => {
|
|
try {
|
|
const data = await apiFetch<{ branding: { appName: string; logoUrl: string | null } }>(
|
|
`/public/branding${tenantSlug ? `?tenantSlug=${encodeURIComponent(tenantSlug)}` : ""}`
|
|
);
|
|
setBranding(data.branding);
|
|
} catch {
|
|
setBranding(null);
|
|
}
|
|
};
|
|
void run();
|
|
}, [tenantSlug]);
|
|
|
|
const appName = branding?.appName ?? "EventSphere";
|
|
return (
|
|
<div className="min-h-screen bg-white text-ink">
|
|
<header className="sticky top-0 z-30 border-b border-line/80 bg-white/90 backdrop-blur-xl">
|
|
<div className="mx-auto flex min-h-20 max-w-[118rem] items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
|
|
<Link href="/" className="flex min-w-0 items-center gap-3 text-ink" aria-label={`${appName} home`}>
|
|
{branding?.logoUrl ? (
|
|
<Image src={branding.logoUrl} alt={appName} width={46} height={46} className="h-11 w-11 rounded-lg object-cover" />
|
|
) : (
|
|
<BrandMark size="md" />
|
|
)}
|
|
<span className="min-w-0">
|
|
<span className="block truncate text-xl font-black tracking-tight sm:text-2xl">{appName}</span>
|
|
<span className="hidden truncate text-xs font-medium text-slate-600 sm:block">Enterprise Event Management Platform</span>
|
|
</span>
|
|
</Link>
|
|
<nav className="hidden items-center gap-8 text-sm font-semibold text-slate-600 lg:flex" aria-label="Public navigation">
|
|
<a href="#features" className="hover:text-accent">Platform</a>
|
|
<a href="#integrations" className="hover:text-accent">Integrations</a>
|
|
<a href="#security" className="hover:text-accent">Security</a>
|
|
</nav>
|
|
<div className="flex items-center gap-2">
|
|
<Link href="/login" className="hidden min-h-10 items-center rounded-md px-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 sm:inline-flex">
|
|
Sign in
|
|
</Link>
|
|
<a
|
|
href="#events"
|
|
className="inline-flex min-h-10 items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white shadow-[0_8px_18px_rgba(22,119,255,0.22)] transition hover:bg-blue-600"
|
|
>
|
|
Start Registration
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|