mark
/
Rezervacije
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Rezervacije/KOMPONENTE.md

447 lines
22 KiB
Markdown
Raw Permalink Blame History

# Pregled komponent v aplikaciji Rezervacije
Ta dokument vsebuje kratek pregled vseh komponent v aplikaciji za rezervacije restavracij, njihovo lokacijo in namen uporabe.
## Osnovne komponente
### 1. NavigationBar
**Lokacija:** `/src/components/NavigationBar.tsx`
**Namen:** Glavna navigacijska vrstica za domačo stran aplikacije z gumbi za priljubljene, profil in meni.
**Uporaba:** Uporabite na vrhu domače strani za osnovno navigacijo po aplikaciji.
### 2. Footer
**Lokacija:** `/src/components/Footer.tsx`
**Namen:** Spodnja navigacijska vrstica z gumbi za domov, iskanje, rezervacije in profil.
**Uporaba:** Uporabite na dnu domače strani in strani z zgodovino rezervacij za osnovno navigacijo med glavnimi sekcijami aplikacije. Ne uporabljajte na straneh, ki imajo lastne noge (ReservationFooter, CancellationFooter) ali spodnje pripete elemente (ReservationWidget).
### 3. RestaurantCard
**Lokacija:** `/src/components/RestaurantCard.tsx`
**Namen:** Kartica za prikaz osnovnih podatkov o restavraciji na seznamu.
**Uporaba:** Uporabite za prikazovanje restavracij na seznamih in straneh za iskanje.
### 4. CategoryItem
**Lokacija:** `/src/components/CategoryItem.tsx`
**Namen:** Prikaz kategorije restavracije/kuhinje z ikono in besedilom.
**Uporaba:** Uporabite za prikaz kategorij kuhinj v horizontalnem seznamu.
### 5. QuickFilterButton
**Lokacija:** `/src/components/QuickFilterButton.tsx`
**Namen:** Gumb za hitro filtriranje restavracij po različnih kriterijih.
**Uporaba:** Uporabite za omogočanje hitrih filtrov na straneh s seznami restavracij.
### 6. SearchBar
**Lokacija:** `/src/components/SearchBar.tsx`
**Namen:** Vnosno polje za iskanje restavracij, lokacij ali vrst kuhinj.
**Uporaba:** Uporabite na domači strani ali strani za iskanje.
### 7. QuickFilterList
**Lokacija:** `/src/components/QuickFilterList.tsx`
**Namen:** Horizontalni seznam hitrih filtrov za restavracije.
**Uporaba:** Uporabite pod iskalno vrstico na domači strani.
### 8. MapButton
**Lokacija:** `/src/components/MapButton.tsx`
**Namen:** Gumb za prikaz restavracij na zemljevidu.
**Uporaba:** Uporabite na domači strani za preklapljanje na pogled zemljevida.
### 9. CategoriesList
**Lokacija:** `/src/components/CategoriesList.tsx`
**Namen:** Horizontalni seznam kategorij kuhinj.
**Uporaba:** Uporabite na domači strani za filtriranje po vrstah kuhinj.
### 10. RestaurantList
**Lokacija:** `/src/components/RestaurantList.tsx`
**Namen:** Seznam restavracij z naslovom in možnostjo prikaza vseh.
**Uporaba:** Uporabite na domači strani za prikaz priporočenih restavracij.
## Komponente za podrobnosti restavracije
### 11. RestaurantNavBar
**Lokacija:** `/src/components/RestaurantNavBar.tsx`
**Namen:** Navigacijska vrstica za stran s podrobnostmi restavracije z gumbi za nazaj, deljenje in priljubljene.
**Uporaba:** Uporabite na vrhu strani s podrobnostmi restavracije.
### 12. RestaurantGallery
**Lokacija:** `/src/components/RestaurantGallery.tsx`
**Namen:** Prikaz slike restavracije z gumbi za ogled galerije in 360° pogleda.
**Uporaba:** Uporabite na vrhu strani s podrobnostmi restavracije za prikaz glavne slike in dostop do več slik.
### 13. RestaurantInfo
**Lokacija:** `/src/components/RestaurantInfo.tsx`
**Namen:** Prikaz osnovnih informacij o restavraciji - ime, lokacija, ocena in značilnosti.
**Uporaba:** Uporabite pod galerijo na strani s podrobnostmi restavracije.
### 14. ActionButtons
**Lokacija:** `/src/components/ActionButtons.tsx`
**Namen:** Trije gumbi za klic, navigacijo in obisk spletne strani restavracije.
**Uporaba:** Uporabite pod osnovnimi informacijami na strani s podrobnostmi restavracije.
### 15. InfoAccordion
**Lokacija:** `/src/components/InfoAccordion.tsx`
**Namen:** Razširljiv/skrčljiv element za prikaz informacij v sekcijah.
**Uporaba:** Uporabite za različne sekcije podrobnosti, kot so opis, odpiralni čas in kontakt.
### 16. RestaurantDescription
**Lokacija:** `/src/components/RestaurantDescription.tsx`
**Namen:** Prikaz opisa restavracije v razširljivem elementu.
**Uporaba:** Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.
### 17. OpeningHours
**Lokacija:** `/src/components/OpeningHours.tsx`
**Namen:** Prikaz odpiralnega časa restavracije v razširljivem elementu.
**Uporaba:** Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.
### 18. ContactInfo
**Lokacija:** `/src/components/ContactInfo.tsx`
**Namen:** Prikaz kontaktnih podatkov restavracije v razširljivem elementu.
**Uporaba:** Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.
### 19. MenuSection
**Lokacija:** `/src/components/MenuSection.tsx`
**Namen:** Prikaz menija restavracije po kategorijah.
**Uporaba:** Uporabite na strani s podrobnostmi restavracije za prikaz ponudbe jedi.
### 20. Reviews
**Lokacija:** `/src/components/Reviews.tsx`
**Namen:** Prikaz ocen in mnenj uporabnikov o restavraciji.
**Uporaba:** Uporabite na strani s podrobnostmi restavracije za prikaz ocen in mnenj.
### 21. ReservationWidget
**Lokacija:** `/src/components/ReservationWidget.tsx`
**Namen:** Spodnji pritrjeni element za hitro izbiro termina in števila oseb za rezervacijo.
**Uporaba:** Uporabite na dnu strani s podrobnostmi restavracije za hiter začetek postopka rezervacije.
## Komponente za rezervacijo
### 22. ReservationNavBar
**Lokacija:** `/src/components/ReservationNavBar.tsx`
**Namen:** Navigacijska vrstica za stran z rezervacijo z gumboma za nazaj in pomoč.
**Uporaba:** Uporabite na vrhu strani za rezervacijo.
### 23. ReservationRestaurantInfo
**Lokacija:** `/src/components/ReservationRestaurantInfo.tsx`
**Namen:** Prikaz osnovnih podatkov o restavraciji na strani za rezervacijo.
**Uporaba:** Uporabite na vrhu strani za rezervacijo, da uporabnik ve, katero restavracijo rezervira.
### 24. DateSelector
**Lokacija:** `/src/components/DateSelector.tsx`
**Namen:** Izbira datuma rezervacije z vnosnim poljem in gumbi za hitre izbire.
**Uporaba:** Uporabite na obrazcu za rezervacijo za izbiro datuma.
### 25. TimeSelector
**Lokacija:** `/src/components/TimeSelector.tsx`
**Namen:** Izbira ure rezervacije, razdeljena po delih dneva (kosilo, večerja).
**Uporaba:** Uporabite na obrazcu za rezervacijo za izbiro ure.
### 26. GuestCounter
**Lokacija:** `/src/components/GuestCounter.tsx`
**Namen:** Izbira števila oseb za rezervacijo z gumbi za povečanje in zmanjšanje.
**Uporaba:** Uporabite na obrazcu za rezervacijo za določitev števila gostov.
### 27. SpecialRequests
**Lokacija:** `/src/components/SpecialRequests.tsx`
**Namen:** Besedilno polje za vnos posebnih zahtev ob rezervaciji.
**Uporaba:** Uporabite na obrazcu za rezervacijo za vnos posebnih diet, alergij ali želja.
### 28. ContactForm
**Lokacija:** `/src/components/ContactForm.tsx`
**Namen:** Obrazec za vnos kontaktnih podatkov za rezervacijo.
**Uporaba:** Uporabite na obrazcu za rezervacijo za vnos imena, telefona in e-pošte.
### 29. ReservationSummary
**Lokacija:** `/src/components/ReservationSummary.tsx`
**Namen:** Povzetek podatkov o rezervaciji pred potrditvijo.
**Uporaba:** Uporabite na obrazcu za rezervacijo za pregled izbranih nastavitev.
### 30. CancellationPolicy
**Lokacija:** `/src/components/CancellationPolicy.tsx`
**Namen:** Prikaz pravil o odpovedi rezervacije.
**Uporaba:** Uporabite na obrazcu za rezervacijo za seznanitev uporabnika s pogoji odpovedi.
### 31. TermsAgreement
**Lokacija:** `/src/components/TermsAgreement.tsx`
**Namen:** Potrditveno polje za strinjanje s pogoji uporabe in pravili o zasebnosti.
**Uporaba:** Uporabite na obrazcu za rezervacijo pred potrditvijo.
### 32. ReservationFooter
**Lokacija:** `/src/components/ReservationFooter.tsx`
**Namen:** Spodnji pritrjeni element s povzetkom rezervacije in gumbom za potrditev.
**Uporaba:** Uporabite na dnu strani za rezervacijo za dokončanje postopka.
## Komponente za potrditev rezervacije
### 37. ConfirmationNavBar
**Lokacija:** `/src/components/ConfirmationNavBar.tsx`
**Namen:** Navigacijska vrstica za stran s potrditvijo rezervacije z gumboma za zapiranje in deljenje.
**Uporaba:** Uporabite na vrhu strani za potrditev rezervacije.
### 38. ConfirmationSuccess
**Lokacija:** `/src/components/ConfirmationSuccess.tsx`
**Namen:** Komponenta za prikaz sporočila o uspešni rezervaciji z ikono in besedilom.
**Uporaba:** Uporabite na vrhu strani za potrditev rezervacije za jasen prikaz uspeha.
### 39. ReservationCard
**Lokacija:** `/src/components/ReservationCard.tsx`
**Namen:** Kartica za prikaz podrobnosti o potrjeni rezervaciji (restavracija, datum, čas, številka rezervacije, QR koda).
**Uporaba:** Uporabite na strani za potrditev rezervacije za celovit pregled rezervacije.
### 40. QuickActions
**Lokacija:** `/src/components/QuickActions.tsx`
**Namen:** Gumbi za hitre akcije (dodaj v koledar, navigacija, uredi) povezane z rezervacijo.
**Uporaba:** Uporabite na strani za potrditev rezervacije za hitro izvedbo pogostih akcij.
### 41. CancellationInfo
**Lokacija:** `/src/components/CancellationInfo.tsx`
**Namen:** Prikaz informacij o pravilih in pogojih za odpoved rezervacije z rokom odpovedi.
**Uporaba:** Uporabite na strani za potrditev rezervacije za informiranje uporabnika o pravilih odpovedi.
### 42. ReservationDetails
**Lokacija:** `/src/components/ReservationDetails.tsx`
**Namen:** Podrobnejši prikaz podatkov o rezervaciji, vključno s kontaktnimi podatki restavracije in posebnimi zahtevami.
**Uporaba:** Uporabite na strani za potrditev rezervacije za prikaz dodatnih informacij o rezervaciji.
### 43. CancellationFooter
**Lokacija:** `/src/components/CancellationFooter.tsx`
**Namen:** Noga s gumbom za odpoved rezervacije.
**Uporaba:** Uporabite na dnu strani za potrditev rezervacije za omogočanje odpovedi.
## Komponente za zgodovino rezervacij
### 45. ReservationsNavBar
**Lokacija:** `/src/components/ReservationsNavBar.tsx`
**Namen:** Navigacijska vrstica za stran z zgodovino rezervacij z naslovom in gumbi za filtriranje in pomoč.
**Uporaba:** Uporabite na vrhu strani z zgodovino rezervacij.
### 46. ReservationsTabs
**Lokacija:** `/src/components/ReservationsTabs.tsx`
**Namen:** Zavihki za preklapljanje med prihajajočimi in preteklimi rezervacijami.
**Uporaba:** Uporabite pod navigacijsko vrstico na strani z zgodovino rezervacij.
### 47. ReservationHistoryCard
**Lokacija:** `/src/components/ReservationHistoryCard.tsx`
**Namen:** Kartica za prikaz podatkov o posamezni rezervaciji z možnostmi za upravljanje.
**Uporaba:** Uporabite za prikaz posamezne rezervacije v seznamu rezervacij.
### 48. ReservationsList
**Lokacija:** `/src/components/ReservationsList.tsx`
**Namen:** Seznam rezervacij, ki prikazuje prihajajoče ali pretekle rezervacije po skupinah.
**Uporaba:** Uporabite na strani z zgodovino rezervacij za prikaz rezervacij.
### 49. EmptyReservations
**Lokacija:** `/src/components/EmptyReservations.tsx`
**Namen:** Prikaz praznega stanja, ko uporabnik nima nobenih rezervacij.
**Uporaba:** Uporabite na strani z zgodovino rezervacij, ko ni rezervacij.
## Komponente za iskanje in filtriranje
### 50. SearchNavBar
**Lokacija:** `/src/components/SearchNavBar.tsx`
**Namen:** Navigacijska vrstica za stran z iskanjem, ki vsebuje naslov strani in gumbe za hitro ponastavitev filtrov in dostop do pomoči.
**Uporaba:** Uporabite kot glavno navigacijo na vrhu strani za iskanje in filtriranje.
### 51. AdvancedSearchBar
**Lokacija:** `/src/components/AdvancedSearchBar.tsx`
**Namen:** Iskalno polje s podporo za vnos in čiščenje poizvedbe, s poudarjeno vizualno podobo.
**Uporaba:** Uporabite kot glavni vnos za iskalno poizvedbo na strani za iskanje.
### 52. FilterHeader
**Lokacija:** `/src/components/FilterHeader.tsx`
**Namen:** Naslovni del filtrirne sekcije, ki prikazuje naslov "Filtri" in gumb za ponastavitev vseh filtrov.
**Uporaba:** Uporabite kot uvod v sklop filtrov na strani za iskanje.
### 53. LocationFilter
**Lokacija:** `/src/components/LocationFilter.tsx`
**Namen:** Kompleksna komponenta za filtriranje po lokaciji, ki združuje vnosno polje in hitre izbire priljubljenih lokacij.
**Uporaba:** Uporabite za omogočanje različnih načinov določanja lokacije pri iskanju restavracij.
### 54. CuisineFilterGrid
**Lokacija:** `/src/components/CuisineFilterGrid.tsx`
**Namen:** Vizualno privlačna mreža za izbiro vrst kuhinje z ikonami in besedilom, podpira večkratno izbiro.
**Uporaba:** Uporabite za filtriranje restavracij po vrstah kuhinje.
### 55. PriceRangeFilter
**Lokacija:** `/src/components/PriceRangeFilter.tsx`
**Namen:** Filter za izbiro enega ali več cenovnih razredov (€, €€, €€€, €€€€).
**Uporaba:** Uporabite za filtriranje restavracij po cenovnem razredu.
### 56. RatingSlider
**Lokacija:** `/src/components/RatingSlider.tsx`
**Namen:** Drsnik za izbiro minimalne ocene pri filtriranju, z natančnim prikazom trenutno izbrane vrednosti.
**Uporaba:** Uporabite za filtriranje restavracij glede na oceno (od 0 do 5).
### 57. AdditionalOptionsFilter
**Lokacija:** `/src/components/AdditionalOptionsFilter.tsx`
**Namen:** Zbirka potrditvenih polj za dodatne možnosti filtriranja, kot so trenutno odprto, parkirišče in podobno.
**Uporaba:** Uporabite za omogočanje filtriranja po dodatnih specifikacijah restavracij.
### 58. SearchResultsHeader
**Lokacija:** `/src/components/SearchResultsHeader.tsx`
**Namen:** Naslovni del rezultatov iskanja z naslovom in izbirnikom za razvrščanje rezultatov po različnih kriterijih.
**Uporaba:** Uporabite na začetku sekcije z rezultati iskanja.
### 59. ActiveFiltersDisplay
**Lokacija:** `/src/components/ActiveFiltersDisplay.tsx`
**Namen:** Prikaz trenutno aktivnih filtrov v obliki značk (chips) z možnostjo hitrega odstranjevanja posameznih filtrov.
**Uporaba:** Uporabite pod naslovom rezultatov iskanja za pregleden prikaz uporabljenih filtrov.
### 60. SearchRestaurantCard
**Lokacija:** `/src/components/SearchRestaurantCard.tsx`
**Namen:** Podrobna kartica posamezne restavracije v rezultatih iskanja, ki prikazuje sliko, osnovne podatke, oceno, kuhinje in gumb za rezervacijo.
**Uporaba:** Uporabite za vsako restavracijo v seznamu rezultatov iskanja.
### 61. LoadMoreButton
**Lokacija:** `/src/components/LoadMoreButton.tsx`
**Namen:** Gumb za nalaganje dodatnih rezultatov iskanja za implementacijo paginacije.
**Uporaba:** Uporabite na koncu seznama rezultatov iskanja, ko je na voljo več rezultatov kot je trenutno prikazano.
## Strani aplikacije
### 33. HomePage
**Lokacija:** `/src/pages/HomePage.tsx`
**Namen:** Glavna stran aplikacije s seznamom priporočenih restavracij, hitrimi filtri in kategorijami.
**Uporaba:** Uporabite kot začetno stran aplikacije.
### 34. RestaurantDetailPage
**Lokacija:** `/src/pages/RestaurantDetailPage.tsx`
**Namen:** Stran s podrobnimi informacijami o izbrani restavraciji.
**Uporaba:** Uporabite za prikaz vseh podatkov o posamezni restavraciji in za začetek rezervacije.
### 35. ReservationPage
**Lokacija:** `/src/pages/ReservationPage.tsx`
**Namen:** Stran za vnos vseh podatkov, potrebnih za rezervacijo.
**Uporaba:** Uporabite za dokončanje rezervacije po izbiri restavracije.
### 36. ConfirmationPage
**Lokacija:** `/src/pages/ConfirmationPage.tsx`
**Namen:** Stran za prikaz potrditve uspešno opravljene rezervacije s podrobnostmi in možnostmi za upravljanje.
**Uporaba:** Prikaže se po uspešni potrditvi rezervacije in omogoča upravljanje z rezervacijo.
### 37. ReservationsHistoryPage
**Lokacija:** `/src/pages/ReservationsHistoryPage.tsx`
**Namen:** Stran za prikaz zgodovine rezervacij s funkcijami za upravljanje z rezervacijami.
**Uporaba:** Omogoča pregled vseh prihajajočih in preteklih rezervacij ter njihovo upravljanje.
### 50. SearchPage
**Lokacija:** `/src/pages/SearchPage.tsx`
**Namen:** Stran za podrobno iskanje in filtriranje restavracij po različnih kriterijih.
**Uporaba:** Omogoča uporabnikom naprednejše iskanje restavracij po imenu, lokaciji, vrsti kuhinje, cenovnem razredu, oceni in drugih lastnostih.
## Glavna aplikacija
### 44. App
**Lokacija:** `/src/App.tsx`
**Namen:** Glavna komponenta aplikacije, ki upravlja navigacijo med stranmi.
**Uporaba:** Služi kot vstopna točka in vsebuje navigacijski sistem celotne aplikacije.
---
## Uporaba tipov
Aplikacija uporablja tipsko varne komponente z uporabo TypeScript. Vsi tipi so definirani v datoteki `/src/types/index.ts` in vključujejo:
- `Restaurant`: Osnovni podatki o restavraciji
- `RestaurantDetail`: Razširjeni podatki o restavraciji
- `OpeningHour`: Odpiralni čas
- `Feature`: Značilnost restavracije
- `MenuSection`: Sekcija menija
- `Dish`: Jed na meniju
- `Review`: Mnenje uporabnika
- `Category`: Kategorija kuhinje
- `NavItem`: Element navigacije
- `TimeSlot`: Termin za rezervacijo
## Smernice za uporabo
1. **Konsistentnost v dizajnu:** Vse komponente so oblikovane v skladu z enotnim dizajnom, uporabite jih takšne, kot so, za ohranitev konsistentnosti.
2. **Dostopnost:** Komponente vsebujejo ustrezne ARIA atribute za boljšo dostopnost. Pri uporabi jih ohranite.
3. **Odzivnost:** Komponente so prilagojene za mobilne naprave, vendar se prikažejo v fiksni velikosti na večjih zaslonih.
4. **Material ikone:** Komponente uporabljajo Material Icons knjižnico, poskrbite, da je vključena v projekt.
5. **TailwindCSS:** Stiliziranje temelji na TailwindCSS, poskrbite, da je pravilno konfiguriran v projektu.
## Navigacija med stranmi
Aplikacija vsebuje naslednje navigacijske poti:
1. **Domov → Podrobnosti restavracije**: Ob kliku na kartico restavracije
2. **Podrobnosti restavracije → Rezervacija**: Ob kliku na gumb "Rezerviraj" v ReservationWidget komponenti
3. **Rezervacija → Potrditev rezervacije**: Po uspešno izpolnjenem rezervacijskem obrazcu
4. **Potrditev rezervacije → Domov**: Ob kliku na gumb za zapiranje
5. **Domov → Zgodovina rezervacij**: Z navigacijo preko Footer komponente
6. **Zgodovina rezervacij → Podrobnosti rezervacije**: Ob kliku na "Uredi" pri posamezni rezervaciji
7. **Podrobnosti rezervacije → Domov**: Z navigacijo preko gumba za nazaj
Koda za implementacijo navigacije je del `NavigationContext` in se uporablja preko `navigateTo` funkcije v App.tsx. Na primer:
```typescript
const { navigateTo } = useContext(NavigationContext);
const handleButtonClick = () => {
navigateTo('pageName'); // kjer je pageName ena izmed: 'home', 'detail', 'reservation', 'confirmation', 'reservations'
};
```
## Nove komponente za iskanje in filtriranje
V sklopu posodobitve strani za iskanje smo ustvarili naslednje nove komponente:
### SearchNavBar
**Lokacija:** `/src/components/SearchNavBar.tsx`
**Namen:** Navigacijska vrstica za stran z iskanjem, ki vsebuje naslov strani in gumbe za hitro ponastavitev filtrov in dostop do pomoči.
**Uporaba:** Uporabite kot glavno navigacijo na vrhu strani za iskanje in filtriranje.
### AdvancedSearchBar
**Lokacija:** `/src/components/AdvancedSearchBar.tsx`
**Namen:** Iskalno polje s podporo za vnos in čiščenje poizvedbe, s poudarjeno vizualno podobo.
**Uporaba:** Uporabite kot glavni vnos za iskalno poizvedbo na strani za iskanje.
### FilterHeader
**Lokacija:** `/src/components/FilterHeader.tsx`
**Namen:** Naslovni del filtrirne sekcije, ki prikazuje naslov "Filtri" in gumb za ponastavitev vseh filtrov.
**Uporaba:** Uporabite kot uvod v sklop filtrov na strani za iskanje.
### LocationFilter
**Lokacija:** `/src/components/LocationFilter.tsx`
**Namen:** Kompleksna komponenta za filtriranje po lokaciji, ki združuje vnosno polje in hitre izbire priljubljenih lokacij.
**Uporaba:** Uporabite za omogočanje različnih načinov določanja lokacije pri iskanju restavracij.
### CuisineFilterGrid
**Lokacija:** `/src/components/CuisineFilterGrid.tsx`
**Namen:** Vizualno privlačna mreža za izbiro vrst kuhinje z ikonami in besedilom, podpira večkratno izbiro.
**Uporaba:** Uporabite za filtriranje restavracij po vrstah kuhinje.
### PriceRangeFilter
**Lokacija:** `/src/components/PriceRangeFilter.tsx`
**Namen:** Filter za izbiro enega ali več cenovnih razredov (€, €€, €€€, €€€€).
**Uporaba:** Uporabite za filtriranje restavracij po cenovnem razredu.
### RatingSlider
**Lokacija:** `/src/components/RatingSlider.tsx`
**Namen:** Drsnik za izbiro minimalne ocene pri filtriranju, z natančnim prikazom trenutno izbrane vrednosti.
**Uporaba:** Uporabite za filtriranje restavracij glede na oceno (od 0 do 5).
### AdditionalOptionsFilter
**Lokacija:** `/src/components/AdditionalOptionsFilter.tsx`
**Namen:** Zbirka potrditvenih polj za dodatne možnosti filtriranja, kot so trenutno odprto, parkirišče in podobno.
**Uporaba:** Uporabite za omogočanje filtriranja po dodatnih specifikacijah restavracij.
### SearchResultsHeader
**Lokacija:** `/src/components/SearchResultsHeader.tsx`
**Namen:** Naslovni del rezultatov iskanja z naslovom in izbirnikom za razvrščanje rezultatov po različnih kriterijih.
**Uporaba:** Uporabite na začetku sekcije z rezultati iskanja.
### ActiveFiltersDisplay
**Lokacija:** `/src/components/ActiveFiltersDisplay.tsx`
**Namen:** Prikaz trenutno aktivnih filtrov v obliki značk (chips) z možnostjo hitrega odstranjevanja posameznih filtrov.
**Uporaba:** Uporabite pod naslovom rezultatov iskanja za pregleden prikaz uporabljenih filtrov.
### SearchRestaurantCard
**Lokacija:** `/src/components/SearchRestaurantCard.tsx`
**Namen:** Podrobna kartica posamezne restavracije v rezultatih iskanja, ki prikazuje sliko, osnovne podatke, oceno, kuhinje in gumb za rezervacijo.
**Uporaba:** Uporabite za vsako restavracijo v seznamu rezultatov iskanja.
### LoadMoreButton
**Lokacija:** `/src/components/LoadMoreButton.tsx`
**Namen:** Gumb za nalaganje dodatnih rezultatov iskanja za implementacijo paginacije.
**Uporaba:** Uporabite na koncu seznama rezultatov iskanja, ko je na voljo več rezultatov kot je trenutno prikazano.
Te komponente skupaj omogočajo moderno, prilagodljivo in uporabniku prijazno izkušnjo iskanja in filtriranja restavracij, ki sledi najboljšim praksam komponentno usmerjenega razvoja v Reactu.
Reference in New Issue View Git Blame Copy Permalink