73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { Club, UserPortalPermissions, ClubRole } from './types';
|
|
import { FounderSidebar } from './founder-sidebar';
|
|
import { FounderTopBar } from './founder-top-bar';
|
|
|
|
interface FounderPortalShellProps {
|
|
club: Club;
|
|
permissions: UserPortalPermissions;
|
|
activeNav?: string;
|
|
onNavSelect?: (nav: string) => void;
|
|
onPlanRide?: () => void;
|
|
onPostAnnouncement?: () => void;
|
|
onSwitchRole?: (role: ClubRole) => void;
|
|
onSwitchClub?: () => void;
|
|
pendingApplicationsCount?: number;
|
|
upcomingRidesCount?: number;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function FounderPortalShell({
|
|
club,
|
|
permissions,
|
|
activeNav = 'overview',
|
|
onNavSelect,
|
|
onPlanRide,
|
|
onPostAnnouncement,
|
|
onSwitchRole,
|
|
onSwitchClub,
|
|
pendingApplicationsCount = 4,
|
|
upcomingRidesCount = 2,
|
|
children,
|
|
}: FounderPortalShellProps) {
|
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-surface font-body text-sm text-on-surface antialiased selection:bg-primary selection:text-white">
|
|
{/* Sidebar (Desktop persistent + Mobile off-canvas drawer) */}
|
|
<FounderSidebar
|
|
club={club}
|
|
permissions={permissions}
|
|
activeNav={activeNav}
|
|
onNavSelect={onNavSelect}
|
|
pendingApplicationsCount={pendingApplicationsCount}
|
|
upcomingRidesCount={upcomingRidesCount}
|
|
isOpenOnMobile={mobileSidebarOpen}
|
|
onCloseMobile={() => setMobileSidebarOpen(false)}
|
|
/>
|
|
|
|
{/* Main Layout Area */}
|
|
<div className="lg:pl-72 flex flex-col min-h-screen">
|
|
{/* Top App Bar */}
|
|
<FounderTopBar
|
|
club={club}
|
|
permissions={permissions}
|
|
activeNav={activeNav}
|
|
onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
|
|
onPlanRide={onPlanRide}
|
|
onPostAnnouncement={onPostAnnouncement}
|
|
onSwitchRole={onSwitchRole}
|
|
onSwitchClub={onSwitchClub}
|
|
/>
|
|
|
|
{/* Content Body Container */}
|
|
<main className="relative pt-20 px-4 sm:px-6 py-6 w-full max-w-[1440px] mx-auto flex-1">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|