Module4 task1

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 (
+    <Router>
+      <Routes>
+        <Route path="/" element={<MainPage offers={offers} />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/offer/:id" element={<Offer />} />
+        <Route path="/favorites" element={<Favorite offers={offers} />} />
+      </Routes>
+    </Router>
+  );
+}

src/components/Favorites/Favorite.tsx

@@ -1,3 +1,36 @@
+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) => (
+  <div className="page">
+    <main className="page__main page__main--favorites">
+      <div className="page__favorites-container container">
+        <section className="favorites">
+          <h1 className="favorites__title">Saved listings</h1>
+          <div className="favorites__list">
+            {offers.map((offer) => (
+              <OfferCard key={offer.id} offer={offer} />
+            ))}
+          </div>
+        </section>
+      </div>
+    </main>
+  </div>
+);
+
+export default Favorite;
+=======
 export const Favorite = () => (
   <div className="page">
     <header className="header">
@@ -225,4 +258,5 @@
       </a>
     </footer>
   </div>
+
 );

src/components/Login/LoginPage.tsx

@@ -1,3 +1,67 @@
+export default function LoginPage () {
+  return (
+    <div className="page page--gray page--login">
+      <header className="header">
+        <div className="container">
+          <div className="header__wrapper">
+            <div className="header__left">
+              <a className="header__logo-link" href="main.html">
+                <img
+                  className="header__logo"
+                  src="img/logo.svg"
+                  alt="6 cities logo"
+                  width="81"
+                  height="41"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="page__main page__main--login">
+        <div className="page__login-container container">
+          <section className="login">
+            <h1 className="login__title">Sign in</h1>
+            <form className="login__form form" action="#" method="post">
+              <div className="login__input-wrapper form__input-wrapper">
+                <label className="visually-hidden">E-mail</label>
+                <input
+                  className="login__input form__input"
+                  type="email"
+                  name="email"
+                  placeholder="Email"
+                  required
+                />
+              </div>
+              <div className="login__input-wrapper form__input-wrapper">
+                <label className="visually-hidden">Password</label>
+                <input
+                  className="login__input form__input"
+                  type="password"
+                  name="password"
+                  placeholder="Password"
+                  required
+                />
+              </div>
+              <button className="login__submit form__submit button" type="submit">
+                Sign in
+              </button>
+            </form>
+          </section>
+          <section className="locations locations--login locations--current">
+            <div className="locations__item">
+              <a className="locations__item-link" href="#">
+                <span>Amsterdam</span>
+              </a>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}
+=======
 export const LoginPage = () => (
   <div className="page page--gray page--login">
     <header className="header">
@@ -58,4 +122,4 @@
       </div>
     </main>
   </div>
-);
+);

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<MainPageProps> = ({ offers }) =>
   (
     <div className="page page--gray page--main">
       <header className="header">
@@ -77,7 +89,7 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>
           <div className="cities__places-container container">
             <section className="cities__places places">
               <h2 className="visually-hidden">Places</h2>
-              <b className="places__found">{CardProps[0].NumberOfPlaces} places to stay in Amsterdam</b>
+              <b className="places__found">{offers.length} places to stay in Amsterdam</b>
               <form className="places__sorting" action="#" method="get">
                 <span className="places__sorting-caption">Sort by</span>
                 <span className="places__sorting-type" tabIndex={0}>
@@ -94,10 +106,7 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>
                 </ul>
               </form>
               <div className="cities__places-list places__list tabs__content">
-                <Card {...CardProps[0]}/>
-                <Card {...CardProps[1]}/>
-                <Card {...CardProps[2]}/>
-                <Card {...CardProps[3]}/>
+                <OfferList offers={offers} />
               </div>
             </section>
             <div className="cities__right-section">
@@ -108,4 +117,4 @@ export const MainPage : FC<{ CardProps: cardProperties[] }> = ({ CardProps }) =>
       </main>
     </div>
   );
-
+export default MainPage;