76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { LanguageSwitcher } from '../../components/LanguageSwitcher';
|
|
import { FrostedSurface } from '../../components/tenant';
|
|
|
|
export interface TenantWelcomeLayoutProps {
|
|
eyebrow?: string;
|
|
title?: string;
|
|
subtitle?: string;
|
|
headerAction?: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function TenantWelcomeLayout({
|
|
eyebrow,
|
|
title,
|
|
subtitle,
|
|
headerAction,
|
|
footer,
|
|
children,
|
|
}: TenantWelcomeLayoutProps) {
|
|
React.useEffect(() => {
|
|
document.body.classList.add('tenant-admin-theme', 'tenant-admin-welcome-theme');
|
|
|
|
return () => {
|
|
document.body.classList.remove('tenant-admin-theme', 'tenant-admin-welcome-theme');
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative min-h-svh w-full overflow-hidden bg-slate-950 text-white">
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_rgba(255,137,170,0.28),_transparent_60%),radial-gradient(ellipse_at_bottom,_rgba(99,102,241,0.25),_transparent_65%)] motion-safe:animate-[aurora_20s_ease-in-out_infinite]"
|
|
/>
|
|
<div aria-hidden className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900/70 to-[#1d1130]" />
|
|
|
|
<div className="relative z-10 mx-auto flex min-h-svh w-full max-w-5xl flex-col gap-10 px-6 py-12 sm:px-8 md:py-16 lg:px-12">
|
|
<FrostedSurface className="flex w-full flex-1 flex-col gap-10 rounded-[36px] border border-white/15 p-8 text-slate-900 shadow-2xl shadow-rose-300/20 backdrop-blur-2xl transition-colors duration-200 dark:text-slate-100 md:gap-14 md:p-14">
|
|
<header className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
|
|
<div className="max-w-xl space-y-4">
|
|
{eyebrow ? (
|
|
<p className="text-xs uppercase tracking-[0.35em] text-rose-300 dark:text-rose-200">{eyebrow}</p>
|
|
) : null}
|
|
{title ? (
|
|
<h1 className="font-display text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 md:text-5xl">
|
|
{title}
|
|
</h1>
|
|
) : null}
|
|
{subtitle ? (
|
|
<p className="text-base text-slate-600 dark:text-slate-300 md:text-lg">{subtitle}</p>
|
|
) : null}
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<LanguageSwitcher />
|
|
{headerAction}
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex flex-1 flex-col gap-8">
|
|
{children}
|
|
</main>
|
|
|
|
{footer ? (
|
|
<footer className="flex flex-col items-center gap-4 text-sm text-slate-600 dark:text-slate-400 md:flex-row md:justify-between">
|
|
{footer}
|
|
</footer>
|
|
) : null}
|
|
</FrostedSurface>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
TenantWelcomeLayout.displayName = 'TenantWelcomeLayout';
|