Fortune-PlayLogic/components/layout/layout-client-wrapper.tsx

59 lines
1.8 KiB
TypeScript

"use client"
import { usePathname } from "next/navigation"
import { useState, useCallback } from "react"
import { SiteHeader } from "@/components/layout/site-header"
import { SportsSidebar } from "@/components/layout/sports-sidebar"
import { RightPanel } from "@/components/layout/right-panel"
import { SiteFooter } from "@/components/layout/site-footer"
import { AuthModal } from "@/components/layout/auth-modal"
import { MobileBottomNav } from "@/components/layout/mobile-bottom-nav"
type AuthMode = "login" | "register"
export default function LayoutClientWrapper({ children }: { children: React.ReactNode }) {
const pathname = usePathname()
const isLivePage = pathname === "/live"
const [authOpen, setAuthOpen] = useState(false)
const [authMode, setAuthMode] = useState<AuthMode>("login")
const openAuth = useCallback((mode: AuthMode) => {
setAuthMode(mode)
setAuthOpen(true)
}, [])
return (
<div className="flex min-h-screen flex-col pb-14 md:pb-0">
<SiteHeader
onLoginClick={() => openAuth("login")}
onRegisterClick={() => openAuth("register")}
/>
<div className="flex w-full flex-1 gap-0">
{/* Sidebar: hidden on mobile */}
{!isLivePage && (
<div className="hidden md:block">
<SportsSidebar />
</div>
)}
<main className="flex-1 min-w-0 px-2 py-3">{children}</main>
{/* Right panel: hidden on mobile */}
<div className="hidden md:block">
<RightPanel />
</div>
</div>
<SiteFooter />
{/* Mobile fixed bottom nav */}
<MobileBottomNav />
{/* Auth modal */}
<AuthModal
open={authOpen}
defaultMode={authMode}
onClose={() => setAuthOpen(false)}
/>
</div>
)
}