diff --git a/src/components/app.tsx b/src/components/app.tsx new file mode 100644 index 0000000..87c46b8 --- /dev/null +++ b/src/components/app.tsx @@ -0,0 +1,17 @@ +import MainPage from '../pages/main-page'; +import FavoritePage from '../pages/favorite-page'; +import OfferPage from '../pages/offer-page'; +import LoginPage from '../pages/login-page'; + +type TAppProps = { + count: number; +} + +export default function App({ count }: TAppProps) { + return ( + + // + // + // + ); +} diff --git a/src/components/card.tsx b/src/components/card.tsx new file mode 100644 index 0000000..c9f51bc --- /dev/null +++ b/src/components/card.tsx @@ -0,0 +1,41 @@ +import Rating from './rating'; +type TCardProps = { + cardClass?: string; + cardPremium?: boolean; +} + +export default function Card({ cardClass, cardPremium = false }: TCardProps) { + return ( + + ); +} diff --git a/src/components/container.tsx b/src/components/container.tsx new file mode 100644 index 0000000..b71b2d3 --- /dev/null +++ b/src/components/container.tsx @@ -0,0 +1,21 @@ +import { ReactNode } from 'react'; +import Header from './header'; + +type TContainerProps = { + children: ReactNode; + pageClass?: string; + mainClass?: string; + navigation?: boolean; +} + +export default function Container({ children, pageClass, mainClass, navigation }: TContainerProps) { + return ( +
+
+
+ {children} +
+
+ + ); +} diff --git a/src/components/favorite-items.tsx b/src/components/favorite-items.tsx new file mode 100644 index 0000000..36617eb --- /dev/null +++ b/src/components/favorite-items.tsx @@ -0,0 +1,21 @@ +import { ReactNode } from 'react'; + +type TFavoriteItemsProps = { + children: ReactNode; +} +export default function FavoriteItems({ children }: TFavoriteItemsProps) { + return ( +
  • + +
    + {children} +
    +
    • + ); +} diff --git a/src/components/header.tsx b/src/components/header.tsx new file mode 100644 index 0000000..5feee06 --- /dev/null +++ b/src/components/header.tsx @@ -0,0 +1,41 @@ +type THeaderProps = { + navigation: boolean; +} + +export default function Header({ navigation }: THeaderProps) { + return ( +
    +
    +
    +
    + + 6 cities logo + +
    + {navigation ? + ( + + ) : ''} +
    +
    +
    + ); +} + + diff --git a/src/components/offer-inside.tsx b/src/components/offer-inside.tsx new file mode 100644 index 0000000..ff92066 --- /dev/null +++ b/src/components/offer-inside.tsx @@ -0,0 +1,11 @@ +type TOfferInside = { + textOffer: string; +} + +export default function OfferInside({ textOffer }: TOfferInside) { + return ( +
  • + {textOffer} +
    • + ); +} diff --git a/src/components/rating.tsx b/src/components/rating.tsx new file mode 100644 index 0000000..75057f0 --- /dev/null +++ b/src/components/rating.tsx @@ -0,0 +1,17 @@ +type TRating = { + ratingClass: string; + isRatingValue?: boolean; +} + +export default function Rating({ ratingClass, isRatingValue }: TRating) { + return ( +
    +
    + + Rating +
    + {isRatingValue ? + 4.8 : ''} +
    + ); +} diff --git a/src/index.tsx b/src/index.tsx index be81a6e..8cecd79 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import App from './components/app'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement @@ -7,6 +8,6 @@ const root = ReactDOM.createRoot( root.render( -

    Hello, World!

    +     ); diff --git a/src/pages/favorite-page.tsx b/src/pages/favorite-page.tsx new file mode 100644 index 0000000..e4baf96 --- /dev/null +++ b/src/pages/favorite-page.tsx @@ -0,0 +1,30 @@ +import Container from '../components/container'; +import Card from '../components/card'; +import FavoriteItems from '../components/favorite-items'; + +export default function FavoritePage() { + return ( + +
    +
    +
    +

    Saved listing

    +
      + + + + + + +
    +
    +
    +
    + +     + ); +} diff --git a/src/pages/login-page.tsx b/src/pages/login-page.tsx new file mode 100644 index 0000000..1f3a1cd --- /dev/null +++ b/src/pages/login-page.tsx @@ -0,0 +1,31 @@ +import Container from '../components/container'; + +export default function LoginPage() { + return ( + +
    +
    +

    Sign in

    +
    +
    + + +
    +
    + + +
    + +
    +
    +
    + +
    +
    +     + ) +} diff --git a/src/pages/main-page.tsx b/src/pages/main-page.tsx new file mode 100644 index 0000000..54e931f --- /dev/null +++ b/src/pages/main-page.tsx @@ -0,0 +1,83 @@ +import Container from '../components/container'; +import Card from '../components/card'; + +type TMainPageProps = { + count: number; +} + +export default function MainPage({ count }: TMainPageProps) { + return ( + +

    Cities

    + +
    +
    +
    +

    Places

    + {count} places to stay in Amsterdam +
    + Sort by + + Popular + + + + +
      +
    • Popular
      • +
    • Price: low to high
      • +
    • Price: high to low
      • +
    • Top rated first
      • +
    +
    +
    + + + + + +
    +
    +
    +
    +
    +
    +
    +     + ); +} diff --git a/src/pages/offer-page.tsx b/src/pages/offer-page.tsx new file mode 100644 index 0000000..ab2465b --- /dev/null +++ b/src/pages/offer-page.tsx @@ -0,0 +1,185 @@ +import Container from '../components/container'; +import Card from '../components/card'; +import OfferInside from '../components/offer-inside'; +import Rating from '../components/rating'; + +export default function OfferPage() { + return ( + +
    +
    +
    +
    + Photo studio +
    +
    + Photo studio +
    +
    + Photo studio +
    +
    + Photo studio +
    +
    + Photo studio +
    +
    + Photo studio +
    +
    +
    +
    +
    +
    + Premium +
    +
    +

    + Beautiful & luxurious studio at great location +

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

    What's inside

    +
      + + + + + + + + + +
    +
    +
    +

    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 + +
      +
      + +

      + 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. +

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

    + To submit review please make sure to set rating and describe your stay with at least 50 characters. +

    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    Other places in the neighbourhood

    +
    + + + + +
    +
    +
    +     + ); +}