diff --git a/package-lock.json b/package-lock.json index 9e0465f..ff09938 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1524,7 +1524,7 @@ "version": "18.2.11", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.11.tgz", "integrity": "sha512-zq6Dy0EiCuF9pWFW6I6k6W2LdpUixLE4P6XjXU1QHLfak3GPACQfLwEuHzY5pOYa4hzj1d0GxX/P141aFjZsyg==", - "devOptional": true, + "dev": true, "dependencies": { "@types/react": "*" } diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..a21e1a8 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,33 @@ +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import MainPage from './components/MainPage/MainPage'; +import Favorite from './components/Favorites/Favorite'; +import LoginPage from './components/Login/LoginPage'; +import Offer from './components/Offer/Offer'; + +type Offer = { + id: number; + title: string; + price: number; + rating: number; + type: string; + isPremium: boolean; + previewImage: string; + NumberOfPlaces: number; +}; + +type AppProps = { + offers: Offer[]; +}; + +export default function App({ offers }: AppProps) { + return ( + + + } /> + } /> + } /> + } /> + + + ); +} diff --git a/src/components/Favorites/Favorite.tsx b/src/components/Favorites/Favorite.tsx index 132d12f..b7525f0 100644 --- a/src/components/Favorites/Favorite.tsx +++ b/src/components/Favorites/Favorite.tsx @@ -1,228 +1,32 @@ -export const Favorite = () => ( +import OfferCard from '../Offer/OfferCard'; +type Offer = { + id: number; + title: string; + price: number; + rating: number; + type: string; + isPremium: boolean; + previewImage: string; + NumberOfPlaces: number; +}; +type FavoriteProps = { + offers: Offer[]; +}; +const Favorite = ({ offers }: FavoriteProps) => (
-
-
-
-
- - 6 cities logo - -
- -
-
-
-
-

Saved listing

- +

Saved listings

+
+ {offers.map((offer) => ( + + ))} +
-
); + +export default Favorite; diff --git a/src/components/LoggedRoute/index.tsx b/src/components/LoggedRoute/index.tsx deleted file mode 100644 index 870c814..0000000 --- a/src/components/LoggedRoute/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import {FC} from 'react'; -import { Navigate } from 'react-router-dom'; -import { WithChildren } from '../../shared/interfaces'; -import { useUserContext } from '../User'; - -export const LoggedRoute:FC = ({ children }) => { - const { user } = useUserContext(); - - return user.logged ? children : ; -}; diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx index f60425b..0e1673d 100644 --- a/src/components/Login/LoginPage.tsx +++ b/src/components/Login/LoginPage.tsx @@ -1,61 +1,63 @@ -export const LoginPage = () => ( -
-
-
-
-
- - 6 cities logo - +export default function LoginPage () { + return ( +
+
+
+
+
+ + 6 cities logo + +
-
-
+ -
-
-
-

Sign in

-
-
- - -
-
- - +
+
+
+

Sign in

+ +
+ + +
+
+ + +
+ + +
+
+ - - -
-
- -
-
-
-
-); +
+
+
+
+ ); +} diff --git a/src/components/Main/main.tsx b/src/components/Main/main.tsx deleted file mode 100644 index 473e0db..0000000 --- a/src/components/Main/main.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import { BrowserRouter, Route, Routes } from 'react-router-dom'; -import {MainPage} from '../MainPage/MainPage'; -import { LoginPage } from '../Login/LoginPage'; -import { Offer } from '../Offer/Offer'; -import { Favorite } from '../Favorites/Favorite'; -import { Error404 } from '../Error/Error404'; -import {cardProperties} from '../../index.tsx'; -import { UserContextProvider } from '../User'; -import { LoggedRoute } from '../LoggedRoute'; - -export const Main: React.FC<{mainPageCardInfo: cardProperties[]}> = ({mainPageCardInfo}) => ( - - - - } /> - } /> - } /> - } /> - } /> - - - -); diff --git a/src/components/MainPage/MainPage.tsx b/src/components/MainPage/MainPage.tsx index 47cca7b..ee9a53a 100644 --- a/src/components/MainPage/MainPage.tsx +++ b/src/components/MainPage/MainPage.tsx @@ -1,9 +1,21 @@ import {FC} from 'react'; -import Card from '../MainPageCard/Card.tsx'; -import {cardProperties}from '../../index.tsx'; +import OfferList from '../Offer/OfferList'; +type Offer = { + id: number; + title: string; + price: number; + rating: number; + type: string; + isPremium: boolean; + previewImage: string; + NumberOfPlaces: number; +}; +type MainPageProps = { + offers: Offer[]; +}; -export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) => +export const MainPage : FC = ({ offers }) => (
@@ -77,7 +89,7 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>

Places

- {CardProps[0].NumberOfPlaces} places to stay in Amsterdam + {offers.length} places to stay in Amsterdam
Sort by @@ -94,10 +106,7 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>
- - - - +
@@ -108,4 +117,4 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>
); - +export default MainPage; diff --git a/src/components/MainPageCard/Card.tsx b/src/components/MainPageCard/Card.tsx deleted file mode 100644 index e6c2be1..0000000 --- a/src/components/MainPageCard/Card.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import {cardProperties} from '../../index.tsx'; -function Card(MainPageCardProps:cardProperties):JSX.Element{ - return( -
- {MainPageCardProps.Premium ? -
- Premium -
: null} -
- - Place image - -
-
-
-
- €{MainPageCardProps.Price} - / night -
- -
-
-
- - Rating -
-
-

- {MainPageCardProps.Description} -

-

{MainPageCardProps.ApartsmentType}

-
-
); -} -export default Card; diff --git a/src/components/Offer/Offer.tsx b/src/components/Offer/Offer.tsx index f8602a6..6c9511b 100644 --- a/src/components/Offer/Offer.tsx +++ b/src/components/Offer/Offer.tsx @@ -1,478 +1,485 @@ -export const Offer = () => ( -
-
-
-
-
- - 6 cities logo - +import SendCommentForm from '../SendCommentForm/SendCommentForm'; +export default function Offer () { + return ( + -
+
-
-
-
-
-
- Photo studio -
-
- Photo studio -
-
- Photo studio -
-
- Photo studio -
-
- Photo studio -
-
- Photo studio +
+
+
+
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
+
+ Photo studio +
-
-
-
-
- Premium -
-
-

- Beautiful & luxurious studio at great location -

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

+ Beautiful & luxurious studio at great location +

+ +
+
+
+ + Rating
- Angelina - Pro + 4.8
-
-

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

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

- Reviews · 1 -

-
    -
  • -
    -
    - Reviews avatar -
    - Max +
    +

    What's inside

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

    Meet the host

    +
    +
    + Host avatar
    -
    -
    -
    - - Rating + 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. -

      - -
    -
    • -
-
- -
- -