-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from fed1v/module5-task2
- Loading branch information
Showing
22 changed files
with
662 additions
and
452 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import {Link} from 'react-router-dom'; | ||
| import {AppRoute} from '../../consts.ts'; | ||
|
|
||
| export function Header() { | ||
| return ( | ||
| <header className="header"> | ||
| <div className="container"> | ||
| <div className="header__wrapper"> | ||
| <div className="header__left"> | ||
| <Link to={AppRoute.Main} className="header__logo-link"> | ||
| <img | ||
| className="header__logo" | ||
| src="img/logo.svg" | ||
| alt="6 cities logo" | ||
| width={81} | ||
| height={41} | ||
| /> | ||
| </Link> | ||
| </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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import {Offer} from '../../types/offer.ts'; | ||
| import {PlaceCard} from './place-card.tsx'; | ||
| import {Nullable} from 'vitest'; | ||
| import {PlaceCardType} from '../../consts.ts'; | ||
|
|
||
| type GeneralPlaceCardListCommonProps = { | ||
| offers: Offer[]; | ||
| onActiveItemChange?: (id: Nullable<string>) => void; | ||
| imageWidth: number; | ||
| imageHeight: number; | ||
| className: string; | ||
| placeCardType: PlaceCardType; | ||
| }; | ||
|
|
||
| function GeneralPlaceCardList({ | ||
| offers, | ||
| onActiveItemChange, | ||
| imageWidth, | ||
| imageHeight, | ||
| className, | ||
| placeCardType, | ||
| }: GeneralPlaceCardListCommonProps) { | ||
| return ( | ||
| <div className={className}> | ||
| { | ||
| offers.map((offer) => ( | ||
| <PlaceCard | ||
| key={offer.id} | ||
| {...offer} | ||
| imageSrc={offer.previewImage} | ||
| width={imageWidth} | ||
| height={imageHeight} | ||
| placeCardType={placeCardType} | ||
| onActiveItemChange={onActiveItemChange} | ||
| /> | ||
| )) | ||
| } | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| type PlaceCardListProps = { | ||
| offers: Offer[]; | ||
| onActiveItemChange?: (id: Nullable<string>) => void; | ||
| } | ||
|
|
||
| export function CityPlaceCardList(props: PlaceCardListProps) { | ||
| return ( | ||
| <GeneralPlaceCardList | ||
| {...props} | ||
| imageWidth={260} | ||
| imageHeight={200} | ||
| className="cities__places-list places__list tabs__content" | ||
| placeCardType={PlaceCardType.City} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export function NearPlaceCardList(props: PlaceCardListProps) { | ||
| return ( | ||
| <GeneralPlaceCardList | ||
| {...props} | ||
| imageWidth={260} | ||
| imageHeight={200} | ||
| className="near-places__list places__list" | ||
| placeCardType={PlaceCardType.Near} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import {Review} from '../../types/review.ts'; | ||
|
|
||
| type ReviewItemProps = { | ||
| review: Review; | ||
| } | ||
|
|
||
| export function ReviewItem({review}: ReviewItemProps) { | ||
| return ( | ||
| <li className="reviews__item"> | ||
| <div className="reviews__user user"> | ||
| <div className="reviews__avatar-wrapper user__avatar-wrapper"> | ||
| <img | ||
| className="reviews__avatar user__avatar" | ||
| src={review.user.avatarUrl} | ||
| width={54} | ||
| height={54} | ||
| alt="Reviews avatar" | ||
| /> | ||
| </div> | ||
| <span className="reviews__user-name">{review.user.name}</span> | ||
| </div> | ||
|
|
||
| <div className="reviews__info"> | ||
| <div className="reviews__rating rating"> | ||
| <div className="reviews__stars rating__stars"> | ||
| <span style={{width: '80%'}}/> | ||
| <span className="visually-hidden">Rating</span> | ||
| </div> | ||
| </div> | ||
| <p className="reviews__text"> | ||
| {review.comment} | ||
| </p> | ||
| <time className="reviews__time" dateTime="2019-04-24"> | ||
| {review.date} | ||
| </time> | ||
| </div> | ||
| </li> | ||
| ); | ||
| } |
Oops, something went wrong.