Skip to content

Commit

Permalink
Merge pull request #2 from uniksssss/module2-task1
Browse files Browse the repository at this point in the history
  • Loading branch information
@keksobot
keksobot authored Oct 12, 2024
2 parents 55484bd + 0cd21fb commit f144fd2
Show file tree
Hide file tree
Showing 12 changed files with 1,540 additions and 9 deletions.
6 changes: 4 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
11 changes: 11 additions & 0 deletions src/components/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import {MainScreen} from './pages/MainScreen';

type AppScreenProps = {
placesCount: number;
}
function App({placesCount}: AppScreenProps){
return (
<MainScreen placesCount={placesCount}/>
);
}
export default App;
62 changes: 62 additions & 0 deletions src/components/pages/Card.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<CardProps> = ({ premium, imageUrl, price, bookmarked, rating, title, type }) => (
<article className="cities__card place-card">
{premium && (
<div className="place-card__mark">
<span>Premium</span>
</div>
)}
<div className="cities__image-wrapper place-card__image-wrapper">
<a href="#">
<img
className="place-card__image"
src={imageUrl}
width={260}
height={200}
alt="Place image"
/>
</a>
</div>
<div className="place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">{price}</b>
<span className="place-card__price-text">/night</span>
</div>
<button
className={`place-card__bookmark-button button${bookmarked ? ' place-card__bookmark-button--active' : ''}`}
type="button"
>
<svg className="place-card__bookmark-icon" width={18} height={19}>
<use xlinkHref="#icon-bookmark" />
</svg>
<span className="visually-hidden">{bookmarked ? 'In bookmarks' : 'To bookmarks'}</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: `${rating}%` }} />
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">{title}</a>
</h2>
<p className="place-card__type">{type}</p>
</div>
</article>
);


export default Card;
227 changes: 227 additions & 0 deletions src/components/pages/Favorites.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
function Favorites(){
return (
<div className="page">
<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>
<nav className="header__nav">
<ul className="header__nav-list">
<li className="header__nav-item user">
<a
className="header__nav-link header__nav-link--profile"
href="#"
>
<div className="header__avatar-wrapper user__avatar-wrapper"></div>
<span className="header__user-name user__name">
[email protected]
</span>
<span className="header__favorite-count">3</span>
</a>
</li>
<li className="header__nav-item">
<a className="header__nav-link" href="#">
<span className="header__signout">Sign out</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<main className="page__main page__main--favorites">
<div className="page__favorites-container container">
<section className="favorites">
<h1 className="favorites__title">Saved listing</h1>
<ul className="favorites__list">
<li className="favorites__locations-items">
<div className="favorites__locations locations locations--current">
<div className="locations__item">
<a className="locations__item-link" href="#">
<span>Amsterdam</span>
</a>
</div>
</div>
<div className="favorites__places">
<article className="favorites__card place-card">
<div className="place-card__mark">
<span>Premium</span>
</div>
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img
className="place-card__image"
src="img/apartment-small-03.jpg"
width={150}
height={110}
alt="Place image"
/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">€180</b>
<span className="place-card__price-text">
/&nbsp;night
</span>
</div>
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg
className="place-card__bookmark-icon"
width={18}
height={19}
>
<use xlinkHref="#icon-bookmark" />
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '100%' }} />
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Nice, cozy, warm big bed apartment</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>
<article className="favorites__card place-card">
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img
className="place-card__image"
src="img/room-small.jpg"
width={150}
height={110}
alt="Place image"
/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">€80</b>
<span className="place-card__price-text">
/&nbsp;night
</span>
</div>
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg
className="place-card__bookmark-icon"
width={18}
height={19}
>
<use xlinkHref="#icon-bookmark" />
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '80%' }} />
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">Wood and stone place</a>
</h2>
<p className="place-card__type">Room</p>
</div>
</article>
</div>
</li>
<li className="favorites__locations-items">
<div className="favorites__locations locations locations--current">
<div className="locations__item">
<a className="locations__item-link" href="#">
<span>Cologne</span>
</a>
</div>
</div>
<div className="favorites__places">
<article className="favorites__card place-card">
<div className="favorites__image-wrapper place-card__image-wrapper">
<a href="#">
<img
className="place-card__image"
src="img/apartment-small-04.jpg"
width={150}
height={110}
alt="Place image"
/>
</a>
</div>
<div className="favorites__card-info place-card__info">
<div className="place-card__price-wrapper">
<div className="place-card__price">
<b className="place-card__price-value">€180</b>
<span className="place-card__price-text">
/&nbsp;night
</span>
</div>
<button
className="place-card__bookmark-button place-card__bookmark-button--active button"
type="button"
>
<svg
className="place-card__bookmark-icon"
width={18}
height={19}
>
<use xlinkHref="#icon-bookmark" />
</svg>
<span className="visually-hidden">In bookmarks</span>
</button>
</div>
<div className="place-card__rating rating">
<div className="place-card__stars rating__stars">
<span style={{ width: '100%' }} />
<span className="visually-hidden">Rating</span>
</div>
</div>
<h2 className="place-card__name">
<a href="#">White castle</a>
</h2>
<p className="place-card__type">Apartment</p>
</div>
</article>
</div>
</li>
</ul>
</section>
</div>
</main>
<footer className="footer container">
<a className="footer__logo-link" href="main.html">
<img
className="footer__logo"
src="img/logo.svg"
alt="6 cities logo"
width={64}
height={33}
/>
</a>
</footer>
</div>);
}
export default Favorites;
Loading

0 comments on commit f144fd2

Please sign in to comment.