Files
HaBit/components/avatar/avatar-customize-layout.tsx
Harkamal Randhawa 91cced4c75 Fix app shell layout with stable top bar and dynamic nav offset.
Unified chrome keeps the home logo top-left, measures bottom nav height
for scroll clearance, and adds responsive content widths for mobile/desktop.
2026-05-24 04:26:09 -06:00

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>
);
}