diff --git a/package-lock.json b/package-lock.json index 9e0465f..64f5aca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,8 +14,8 @@ "history": "5.3.0", "http-status-codes": "2.3.0", "leaflet": "1.7.1", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-helmet-async": "1.3.0", "react-redux": "8.1.3", "react-router-dom": "6.16.0" @@ -5201,6 +5201,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "license": "MIT", "dependencies": { "loose-envify": "^1.1.0" }, @@ -5212,6 +5213,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" diff --git a/package.json b/package.json index d1d0ee6..4c153ce 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "history": "5.3.0", "http-status-codes": "2.3.0", "leaflet": "1.7.1", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-helmet-async": "1.3.0", "react-redux": "8.1.3", "react-router-dom": "6.16.0" diff --git a/src/components/App.tsx b/src/components/App.tsx new file mode 100644 index 0000000..bb1f2c0 --- /dev/null +++ b/src/components/App.tsx @@ -0,0 +1,11 @@ +import {MainScreen} from './pages/MainScreen'; + +type AppScreenProps = { + placesCount: number; +} +function App({placesCount}: AppScreenProps){ + return ( + + ); +} +export default App; diff --git a/src/components/pages/Card.tsx b/src/components/pages/Card.tsx new file mode 100644 index 0000000..32c05b8 --- /dev/null +++ b/src/components/pages/Card.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +interface CardProps { + premium: boolean; + imageUrl: string; + price: string; + bookmarked: boolean; + rating: number; + title: string; + type: string; +} + +const Card: React.FC = ({ premium, imageUrl, price, bookmarked, rating, title, type }) => ( +
+ {premium && ( +
+ Premium +
+ )} +
+ + Place image + +
+
+
+
+ {price} + /night +
+ +
+
+
+ + Rating +
+
+

+ {title} +

+

{type}

+
+
+); + + +export default Card; diff --git a/src/components/pages/Favorites.tsx b/src/components/pages/Favorites.tsx new file mode 100644 index 0000000..3b51022 --- /dev/null +++ b/src/components/pages/Favorites.tsx @@ -0,0 +1,227 @@ +function Favorites(){ + return ( +
+
+
+ +
+
+
+
+
+

Saved listing

+ +
+
+
+ +
); +} +export default Favorites; diff --git a/src/components/pages/FavoritesEmpty.tsx b/src/components/pages/FavoritesEmpty.tsx new file mode 100644 index 0000000..311e5c6 --- /dev/null +++ b/src/components/pages/FavoritesEmpty.tsx @@ -0,0 +1,69 @@ +function FavoritesEmpty(){ + return ( +
+
+
+ +
+
+
+
+
+

Favorites (empty)

+
+ Nothing yet saved. +

+ Save properties to narrow down search or plan your future trips. +

+
+
+
+
+ +
); +} + +export default FavoritesEmpty; diff --git a/src/components/pages/Login.tsx b/src/components/pages/Login.tsx new file mode 100644 index 0000000..d2b9e2e --- /dev/null +++ b/src/components/pages/Login.tsx @@ -0,0 +1,63 @@ +function Login(){ + return ( + < div className="page page--gray page--login"> +
+
+
+
+ + 6 cities logo + +
+
+
+
+
+
+
+

Sign in

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+
+ ); +} + +export default Login; diff --git a/src/components/pages/MainEmpty.tsx b/src/components/pages/MainEmpty.tsx new file mode 100644 index 0000000..71d9aed --- /dev/null +++ b/src/components/pages/MainEmpty.tsx @@ -0,0 +1,102 @@ +function MainEmpty(){ + return ( +
+
+
+ +
+
+
+

Cities

+
+
+ +
+
+
+
+
+
+ No places to stay available +

+ We could not find any property available at the moment in + Dusseldorf +

+
+
+
+
+
+
+
); + +} + +export default MainEmpty; diff --git a/src/components/pages/MainScreen.tsx b/src/components/pages/MainScreen.tsx new file mode 100644 index 0000000..85d5035 --- /dev/null +++ b/src/components/pages/MainScreen.tsx @@ -0,0 +1,175 @@ +import Card from './Card'; +type MainScreenProps = { + placesCount: number; +} +export function MainScreen({placesCount}: MainScreenProps){ + return ( +
+
+
+ +
+
+
+

Cities

+
+
+ +
+
+
+
+
+

Places

+ {placesCount} places to stay in Amsterdam +
+ Sort by + + Popular + + + + +
    +
  • + Popular +
    • +
  • + Price: low to high +
    • +
  • + Price: high to low +
    • +
  • + Top rated first +
    • +
+
+
+ + +
+
+ + +
+ +
+
+
+
+
+
+
+
+
); + +} +export default MainScreen; diff --git a/src/components/pages/Offer.tsx b/src/components/pages/Offer.tsx new file mode 100644 index 0000000..cf43e62 --- /dev/null +++ b/src/components/pages/Offer.tsx @@ -0,0 +1,467 @@ +function Offer(){ + return ( +
+
+
+ +
+
+
+
+
+
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+
+
+
+
+ Premium +
+
+

+ Beautiful & luxurious studio at great location +

+ +
+
+
+ + Rating +
+ 4.8 +
+
    +
  • Apartment
    • +
  • + 3 Bedrooms +
    • +
  • + Max 4 adults +
    • +
+
+ €120 +  night +
+
+

What's inside

+
    +
  • Wi-Fi
    • +
  • Washing machine
    • +
  • Towels
    • +
  • Heating
    • +
  • Coffee machine
    • +
  • Baby seat
    • +
  • Kitchen
    • +
  • Dishwasher
    • +
  • Cabel TV
    • +
  • Fridge
    • +
+
+
+

Meet the host

+
+
+ Host avatar +
+ Angelina + Pro +
+
+

+ A quiet cozy and picturesque that hides behind a a river by the + unique lightness of Amsterdam. The building is green and from + 18th century. +

+

+ An independent House, strategically located between Rembrand + Square and National Opera, but where the bustle of the city + comes to rest in this alley flowery and colorful. +

+
+
+
+

+ Reviews · 1 +

+
    +
  • +
    +
    + Reviews avatar +
    + Max +
    +
    +
    +
    + + Rating +
    +
    +

    + A quiet cozy and picturesque that hides behind a a river by + the unique lightness of Amsterdam. The building is green and + from 18th century. +

    + +
    +
    • +
+
+ +
+ + + + + + + + + + +
+