import { type ExplorePageProps } from '@/types/explore'; import { Head, usePage } from '@inertiajs/react'; import { useLaravelReactI18n } from 'laravel-react-i18n'; import AppLayout from '@/layouts/app-layout'; import ExploreFilters from '@/components/explore/explore-filters'; import ExploreGrid from '@/components/explore/explore-grid'; import ExploreMap from '@/components/explore/explore-map'; import MobileViewToggle from '@/components/explore/mobile-view-toggle'; import { useExploreState } from '@/hooks/use-explore-state'; import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis } from '@/components/ui/pagination'; export default function Index() { const { items, categories, filters } = usePage().props; const { t } = useLaravelReactI18n(); const { search, category, selectedItemId, hoveredItemId, isMapView, setSearch, setCategory, setBounds, setSelectedItemId, setHoveredItemId, setIsMapView, clearFilters, } = useExploreState({ initialSearch: filters.search, initialCategory: filters.category, initialBounds: filters.bounds, }); const generatePaginationRange = () => { const current = items.current_page; const last = items.last_page; const range: number[] = []; if (last <= 7) { for (let i = 1; i <= last; i++) { range.push(i); } } else { if (current <= 4) { for (let i = 1; i <= 5; i++) { range.push(i); } range.push(-1, last); } else if (current >= last - 3) { range.push(1, -1); for (let i = last - 4; i <= last; i++) { range.push(i); } } else { range.push(1, -1, current - 1, current, current + 1, -1, last); } } return range; }; return ( {/* Mobile View Toggle - Positioned at top right */}

{/* Main Content - Two Column Layout */}

{/* Left Column - Filters & Grid (50%) with scroll */}

{/* Sticky Filters */}

{t('Showing')} {items.from}-{items.to} {t('of')} {items.total} {t('results')}

{/* Scrollable Grid Content */}

{ setSelectedItemId(id); const item = items.data.find(i => i.id === id); if (item) { // Navigate to detail page const url = item.type === 'experience' ? `/experiences/${id}` : `/points-of-interest/${id}`; window.location.href = url; } }} /> {/* Pagination */} {items.last_page > 1 && (

{items.prev_page_url && ( )} {generatePaginationRange().map((page, index) => ( {page === -1 ? ( ) : ( {page} )} ))} {items.next_page_url && ( )}

)}

{/* Right Column - Map (50%, Fixed Height) */}

); }