Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 4x 73x 22x 22x 22x 73x 73x 73x | /**
* PublicLayout Component
* From BATbern-public design
* Story 5.7: Supports optional top banner (e.g., preview mode notice)
*/
import { ReactNode, useEffect } from 'react';
import { PublicNavigation } from './Navigation/PublicNavigation';
import { PublicFooter } from './Footer/PublicFooter';
interface PublicLayoutProps {
children: ReactNode;
/** Optional banner to display above navigation (e.g., preview mode notice) */
topBanner?: ReactNode;
/**
* Event code of a thankable (live/completed) event in view — surfaces the
* "Thank the organizers" button in the nav (Story 7.4). Omitted on non-event pages.
*/
thankableEventCode?: string;
}
export const PublicLayout = ({ children, topBanner, thankableEventCode }: PublicLayoutProps) => {
// Apply dark class to html element for Tailwind dark mode
useEffect(() => {
document.documentElement.classList.add('dark');
return () => {
document.documentElement.classList.remove('dark');
};
}, []);
// Calculate top offset for navigation when banner is present
// Banner height is approximately 52px (py-3 padding + text content)
const hasBanner = !!topBanner;
const navTopOffset = hasBanner ? '52px' : '0px';
return (
<div className="min-h-screen w-full flex flex-col">
{/* Top banner (e.g., preview mode notice) */}
{topBanner}
<PublicNavigation topOffset={navTopOffset} thankableEventCode={thankableEventCode} />
{/* Add padding to prevent content from going under fixed nav and banner */}
<div className={hasBanner ? 'pt-[116px]' : 'pt-16'}>
<main className="flex-1">{children}</main>
</div>
<PublicFooter />
</div>
);
};
|