refactor(public-booking): remove MobileBottomNav component and adjust layout styles
This commit is contained in:
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user