refactor(public-booking): remove MobileBottomNav component and adjust layout styles

This commit is contained in:
Jose Selesan
2026-06-08 16:34:36 -03:00
parent 339e6a70d7
commit 4c7b825129

View File

@@ -26,7 +26,6 @@ import {
Check, Check,
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
Clock3,
Dumbbell, Dumbbell,
Lock, Lock,
MapPin, MapPin,
@@ -413,7 +412,7 @@ function PublicBookingPageChrome({
if (mobile) { if (mobile) {
return ( return (
<main className={`${themeClass} min-h-screen bg-[#050d14] text-white`}> <main className={`${themeClass} min-h-screen bg-[#050d14] text-white`}>
<div className="public-booking-frame mx-auto min-h-screen max-w-[430px] bg-[radial-gradient(circle_at_50%_0%,rgba(17,185,129,0.16),transparent_34%),linear-gradient(180deg,#07131d_0%,#071018_47%,#050b11_100%)] px-4 pb-24 pt-7 shadow-2xl shadow-black"> <div className="public-booking-frame mx-auto min-h-screen max-w-[430px] bg-[radial-gradient(circle_at_50%_0%,rgba(17,185,129,0.16),transparent_34%),linear-gradient(180deg,#07131d_0%,#071018_47%,#050b11_100%)] px-4 pb-0 pt-7 shadow-2xl shadow-black">
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<PlayzerBrand compact /> <PlayzerBrand compact />
<PublicBookingThemeToggle /> <PublicBookingThemeToggle />
@@ -440,8 +439,6 @@ function PublicBookingPageChrome({
</div> </div>
{children} {children}
<MobileBottomNav />
</div> </div>
</main> </main>
); );
@@ -1282,40 +1279,6 @@ function SelectedSlotCard(props: BookingShellProps & { compact?: boolean }) {
); );
} }
function MobileBottomNav() {
const items = [
{ label: 'Reservar', icon: CalendarDays, active: true },
{ label: 'Canchas', icon: Building2 },
{ label: 'Cómo funciona', icon: Clock3 },
{ label: 'Contacto', icon: Users },
];
return (
<nav className="fixed inset-x-0 bottom-0 z-40 mx-auto max-w-[430px] border-t border-emerald-500/30 bg-[#061019]/94 px-4 py-3 backdrop-blur">
<div className="grid grid-cols-4 gap-1">
{items.map((item) => {
const Icon = item.icon;
return (
<a
key={item.label}
href={
item.label === 'Reservar' ? '#' : `#${item.label.toLowerCase().replace(' ', '-')}`
}
className={`flex flex-col items-center gap-1 text-[11px] ${
item.active ? 'text-emerald-400' : 'text-white/58'
}`}
>
<Icon className="size-5" />
{item.label}
</a>
);
})}
</div>
</nav>
);
}
export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) { export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const isMobile = useIsMobile(); const isMobile = useIsMobile();