109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import React, { useState, useContext } from 'react';
|
|
import { NavigationContext } from '../App';
|
|
import SearchNavBar from '../components/SearchNavBar';
|
|
import AdvancedSearchBar from '../components/AdvancedSearchBar';
|
|
import SearchFilters from '../components/SearchFilters';
|
|
import Footer from '../components/Footer';
|
|
import { categories } from '../data/mockData';
|
|
|
|
const SearchPage: React.FC = () => {
|
|
const [activeNavItem, setActiveNavItem] = useState('search');
|
|
const [query, setQuery] = useState<string>('');
|
|
const [_, setActiveFilters] = useState<{
|
|
categories: number[];
|
|
rating: number | null;
|
|
distance: number | null;
|
|
}>({
|
|
categories: [],
|
|
rating: null,
|
|
distance: null
|
|
});
|
|
const { navigateTo } = useContext(NavigationContext);
|
|
|
|
const handleSearch = (searchQuery: string) => {
|
|
setQuery(searchQuery);
|
|
console.log('Iskanje:', searchQuery);
|
|
// Implementacija iskalne logike
|
|
};
|
|
|
|
const handleResetClick = () => {
|
|
setQuery('');
|
|
setActiveFilters({
|
|
categories: [],
|
|
rating: null,
|
|
distance: null
|
|
});
|
|
console.log('Filtri so bili ponastavljeni');
|
|
};
|
|
|
|
const handleHelpClick = () => {
|
|
alert('Pomoč za iskanje');
|
|
console.log('Pomoč za iskanje');
|
|
};
|
|
|
|
const handleFilterChange = (filters: {
|
|
categories: number[];
|
|
rating: number | null;
|
|
distance: number | null;
|
|
}) => {
|
|
setActiveFilters(filters);
|
|
console.log('Filtri so bili posodobljeni:', filters);
|
|
};
|
|
|
|
const handleNavItemClick = (itemId: string) => {
|
|
setActiveNavItem(itemId);
|
|
if (itemId === 'home') {
|
|
navigateTo('home');
|
|
} else if (itemId === 'reservations') {
|
|
navigateTo('reservations');
|
|
} else if (itemId === 'profile') {
|
|
alert('Stran za profil še ni implementirana.');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-full gradient-bg relative">
|
|
{/* Skip to content link za dostopnost */}
|
|
<a href="#search-content" className="sr-only focus:not-sr-only focus:absolute focus:bg-white focus:text-black focus:p-2 focus:z-50">
|
|
Preskoči na vsebino
|
|
</a>
|
|
|
|
<SearchNavBar
|
|
onResetClick={handleResetClick}
|
|
onHelpClick={handleHelpClick}
|
|
/>
|
|
|
|
{/* Vsebina začne tukaj - main content z dodatnim padding-bottom za sticky footer */}
|
|
<div className="content-container overflow-y-auto hide-scrollbar h-full has-sticky-footer">
|
|
<main id="search-content">
|
|
<AdvancedSearchBar
|
|
onSearch={handleSearch}
|
|
initialQuery={query}
|
|
placeholder="Išči restavracije, jedi..."
|
|
/>
|
|
|
|
<div className="px-5 py-4">
|
|
<SearchFilters
|
|
categories={categories}
|
|
onFilterChange={handleFilterChange}
|
|
/>
|
|
</div>
|
|
|
|
{/* Rezultati iskanja - za implementacijo kasneje */}
|
|
<div className="px-5 py-4">
|
|
<h2 className="text-lg font-semibold text-black mb-3">Rezultati iskanja</h2>
|
|
{query ? (
|
|
<p className="text-sm text-black">Iskalni niz: "{query}"</p>
|
|
) : (
|
|
<p className="text-sm text-black opacity-70">Vnesite iskalni niz za prikaz rezultatov</p>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<Footer activeItem={activeNavItem} onNavItemClick={handleNavItemClick} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchPage;
|