Unified chrome keeps the home logo top-left, measures bottom nav height for scroll clearance, and adds responsive content widths for mobile/desktop.
32 lines
900 B
TypeScript
32 lines
900 B
TypeScript
import { AppPageHeader } from "@/components/layout/app-page-header";
|
|
import { AppTopBar } from "@/components/layout/app-top-bar";
|
|
|
|
type AvatarCustomizeLayoutProps = {
|
|
eyebrow?: string;
|
|
title: string;
|
|
description: string;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export function AvatarCustomizeLayout({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
children,
|
|
}: AvatarCustomizeLayoutProps) {
|
|
return (
|
|
<div className="relative min-h-dvh bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar">
|
|
<AppTopBar />
|
|
|
|
<main className="mx-auto max-w-lg px-4 py-6 md:max-w-3xl md:px-5 lg:max-w-6xl">
|
|
<AppPageHeader
|
|
eyebrow={eyebrow}
|
|
title={title}
|
|
description={description}
|
|
/>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|