6 | {name}
7 |
9 | );
10 | };
11 |
12 | export default ExploreContainer;
13 |
--------------------------------------------------------------------------------
/src/components/LongPlaceCard.jsx:
--------------------------------------------------------------------------------
1 | import { IonCard, IonCardTitle, IonNote } from "@ionic/react";
2 | import styles from "../styles/Home.module.scss";
3 |
4 | export const LongPlaceCard = ({ place = false }) => (
5 |
6 | Explore UI Components
8 |
8 | 
9 |
10 |
11 |
12 | { place.name }
13 | { place.destination }
14 |
15 |
78 |
79 | { place &&
80 |
90 |
91 | handleAddFavourite(e, place) }>
81 |
82 |
85 |
87 |
88 | }
89 |
58 |
59 |
60 |
86 |
61 |
69 |
70 | router.goBack() }>
62 |
64 |
65 | handleAddFavourite(e, place) }>
66 | 0 ? "bold" : "light" } name="Heart" />
67 |
68 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | { place.name }
78 |
80 |
81 |
82 |
83 |
84 |
85 | { place.destination }
79 |
95 | { place.rating } stars
97 |
98 |
103 | { place.distance } miles
105 |
106 |
111 | { place.temp }°C
113 |
114 | 
121 |
142 | Book now
143 |
145 | 
78 | Joe Bloggs
83 |Popular Trips
111 |
118 | { places && places.length > 0 &&
119 |
120 |
121 | { searchResults.map((place, index) => {
122 |
123 | if (index < 4) {
124 | return (
125 |
126 |
127 |
129 | );
130 | }
131 | })}
132 |
133 | { searchResults.length === 0 &&
134 |
135 |
136 |
138 | }
139 |
140 | }
141 |
142 |
143 | Top Destinations
146 | 147 |
154 | { places && places.length > 0 &&
155 |
156 | { places.map((place, index) => {
157 |
158 | if (index > 4 && index < 9) {
159 | return (
160 |
161 |
162 |
164 | );
165 | }
166 | })}
167 |
168 |
169 | }
170 |
171 |
172 | { place.name }
77 |{ place.destination }
78 |
45 |
53 |
46 |
49 | You don't have any favourites yet!
47 |You can add a favourite by pressing the heart button anywhere within the app.
48 |
50 |
52 |