Files
HaBit/components/avatar/avatar-customize-layout.tsx
Harkamal Randhawa 68b3da1d13 Keep single-column layout on mobile until desktop breakpoints.
Wide max-widths and shop grids now only expand at lg/xl, not sm/md.
2026-05-24 04:28:49 -06:00

32 lines
887 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 lg:max-w-6xl lg:px-5">
<AppPageHeader
eyebrow={eyebrow}
title={title}
description={description}
/>
{children}
</main>
</div>
);
}