Skip to content

Commit

Permalink
Merge pull request #6 from mgmman/module5-task2
Browse files Browse the repository at this point in the history
  • Loading branch information
@keksobot
keksobot authored Nov 6, 2024
2 parents 24c4381 + b67cbc0 commit 7b317e8
Show file tree
Hide file tree
Showing 30 changed files with 707 additions and 330 deletions.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6 cities</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="src/pages/not-found-page/not-found-page.css">
</head>

<body>
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

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

52 changes: 27 additions & 25 deletions src/Pages/favorites-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,32 @@ export function FavoritesPage({
offers,
}: FavoritesPageProps): React.JSX.Element {
return (
<Layout showFooter>
<main className="page__main page__main--favorites">
<Helmet>
<title>6 cities - favorites</title>
</Helmet>
<div className="page__favorites-container container">
<section className="favorites">
<h1 className="favorites__title">Saved listing</h1>
<ul className="favorites__list">
{Map.groupBy(offers, (o) => o.city.name)
.entries()
.map(([cityName, offersInCity]) => (
<OfferGroup
key={cityName}
cityName={cityName}
offers={offersInCity}
/>
))
.toArray()}
;
</ul>
</section>
</div>
</main>
</Layout>
<div className="page">
<Layout showFooter>
<main className="page__main page__main--favorites">
<Helmet>
<title>6 cities - favorites</title>
</Helmet>
<div className="page__favorites-container container">
<section className="favorites">
<h1 className="favorites__title">Saved listing</h1>
<ul className="favorites__list">
{Map.groupBy(offers, (o) => o.city.name)
.entries()
.map(([cityName, offersInCity]) => (
<OfferGroup
key={cityName}
cityName={cityName}
offers={offersInCity}
/>
))
.toArray()}
;
</ul>
</section>
</div>
</main>
</Layout>
</div>
);
}
193 changes: 98 additions & 95 deletions src/Pages/main-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,106 +13,109 @@ interface MainPageProps {
export function MainPage({ offers }: MainPageProps): React.JSX.Element {
const [activeOffer, setActiveOffer] = useState<Nullable<Offer>>(null);
return (
<Layout showFooter>
<main className="page__main page__main--index">
<Helmet>6 cities</Helmet>
<h1 className="visually-hidden">Cities</h1>
<div className="tabs">
<section className="locations container">
<ul className="locations__list tabs__list">
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Paris</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Cologne</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Brussels</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item tabs__item--active">
<span>Amsterdam</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Hamburg</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Dusseldorf</span>
</a>
</li>
</ul>
</section>
</div>
<div className="cities">
<div className="cities__places-container container">
<section className="cities__places places">
<h2 className="visually-hidden">Places</h2>
<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}>
Popular
<svg className="places__sorting-arrow" width="7" height="4">
<use xlinkHref="#icon-arrow-select"></use>
</svg>
</span>
<ul className="places__options places__options--custom places__options--opened">
<li
className="places__option places__option--active"
tabIndex={0}
>
Popular
</li>
<li className="places__option" tabIndex={0}>
Price: low to high
</li>
<li className="places__option" tabIndex={0}>
Price: high to low
</li>
<li className="places__option" tabIndex={0}>
Top rated first
</li>
</ul>
</form>
<OffersList
offers={offers}
onActiveOfferChange={(offer: Nullable<Offer>) =>
setActiveOffer(offer)
}
/>
<div className="page page--gray page--main">
<Layout showFooter>
<main className="page__main page__main--index">
<Helmet>6 cities</Helmet>
<h1 className="visually-hidden">Cities</h1>
<div className="tabs">
<section className="locations container">
<ul className="locations__list tabs__list">
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Paris</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Cologne</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Brussels</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item tabs__item--active">
<span>Amsterdam</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Hamburg</span>
</a>
</li>
<li className="locations__item">
<a className="locations__item-link tabs__item" href="#">
<span>Dusseldorf</span>
</a>
</li>
</ul>
</section>
<div className="cities__right-section">
<Map
city={offers[0].city}
points={offers.map((x) => ({
location: x.location,
id: x.id,
}))}
selectedPoint={
activeOffer
? {
</div>
<div className="cities">
<div className="cities__places-container container">
<section className="cities__places places">
<h2 className="visually-hidden">Places</h2>
<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}>
Popular
<svg className="places__sorting-arrow" width="7" height="4">
<use xlinkHref="#icon-arrow-select"></use>
</svg>
</span>
<ul className="places__options places__options--custom places__options--opened">
<li
className="places__option places__option--active"
tabIndex={0}
>
Popular
</li>
<li className="places__option" tabIndex={0}>
Price: low to high
</li>
<li className="places__option" tabIndex={0}>
Price: high to low
</li>
<li className="places__option" tabIndex={0}>
Top rated first
</li>
</ul>
</form>
<OffersList
offers={offers}
onActiveOfferChange={(offer: Nullable<Offer>) =>
setActiveOffer(offer)}
isOnMainPage
/>
</section>
<div className="cities__right-section">
<Map
city={offers[0].city}
points={offers.map((x) => ({
location: x.location,
id: x.id,
}))}
selectedPoint={
activeOffer
? {
location: activeOffer?.location,
id: activeOffer?.id,
}
: undefined
}
/>
: undefined
}
isOnMainPage
/>
</div>
</div>
</div>
</div>
</main>
</Layout>
</main>
</Layout>
</div>
);
}
8 changes: 4 additions & 4 deletions .../not-found-page/not-found-page.module.css → src/Pages/not-found-page/not-found-page.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.container {
.not-found-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
.not-found-page__title {
text-align: center;
}

.link {
.not-found-page__link {
color: skyblue;
margin: 10px;
font-style: italic;
}

.link:hover {
.not-found-page__link:hover {
text-decoration: underline;
font-weight: bold;
}
8 changes: 4 additions & 4 deletions src/Pages/not-found-page/not-found-page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import { Link } from 'react-router-dom';
import styles from './not-found-page.module.css';
import { Helmet } from 'react-helmet-async';
import {AppRoutes} from '../../dataTypes/enums/app-routes.ts';

export function NotFoundPage(): React.JSX.Element {
return (
<main className={styles.container}>
<main className='not-found-page'>
<Helmet>
<title>404 - not found</title>
</Helmet>
<h1>404 - Page Not Found</h1>
<p className={styles.title}>
<p className='not-found-page__title'>
The page you are looking for might have been removed or is temporarily
unavailable.
</p>
<Link to="/public" className={styles.link}>
<Link to={AppRoutes.MainPage} className='not-found-page__link'>
back to main page
</Link>
</main>
Expand Down
Loading

0 comments on commit 7b317e8

Please sign in to comment.