71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { LanguageSwitcher } from '../../components/LanguageSwitcher';
|
|
|
|
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="min-h-screen w-full bg-brand-gradient text-brand-slate transition-colors duration-500 ease-out">
|
|
<div className="mx-auto flex min-h-screen w-full max-w-5xl px-6 py-12 md:py-16 lg:px-10">
|
|
<div className="flex w-full flex-col gap-10 rounded-[40px] border border-brand-rose-soft bg-brand-card p-8 shadow-brand-primary backdrop-blur-xl 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">
|
|
{eyebrow && (
|
|
<p className="text-xs uppercase tracking-[0.35em] text-brand-rose">{eyebrow}</p>
|
|
)}
|
|
{title && (
|
|
<h1 className="mt-2 font-display text-4xl font-semibold tracking-tight text-brand-slate md:text-5xl">
|
|
{title}
|
|
</h1>
|
|
)}
|
|
{subtitle && (
|
|
<p className="mt-4 text-base font-sans-marketing text-brand-navy/80 md:text-lg">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</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-brand-navy/70 md:flex-row md:justify-between">
|
|
{footer}
|
|
</footer>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
TenantWelcomeLayout.displayName = 'TenantWelcomeLayout';
|