-
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 #4 from SixBlueBlack/module4-task1
- Loading branch information
Showing
12 changed files
with
264 additions
and
203 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import {OfferCardType} from '../types/offer_card_type.ts'; | ||
| import {Link} from 'react-router-dom'; | ||
|
|
||
| type FavouriteCardProps = { | ||
| favourite: OfferCardType; | ||
| } | ||
|
|
||
| function Favourite({favourite}: FavouriteCardProps): JSX.Element { | ||
| return ( | ||
| <article className="favorites__card place-card"> | ||
| {favourite.isPremium && ( | ||
| <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={favourite.image} width="150" height="110" | ||
| alt="Place image" | ||
| > | ||
| </img> | ||
| </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">€{favourite.price}</b> | ||
| <span className="place-card__price-text">/ 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"></use> | ||
| </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: `${favourite.rating * 20}%`}}></span> | ||
| <span className="visually-hidden">Rating</span> | ||
| </div> | ||
| </div> | ||
| <h2 className="place-card__name"> | ||
| <Link to={`/offer/${favourite.id}`}>{favourite.title}</Link> | ||
| </h2> | ||
| <p className="place-card__type">{favourite.placeType}</p> | ||
| </div> | ||
| </article> | ||
| ); | ||
| } | ||
|
|
||
| export default Favourite; |
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,18 @@ | ||
| import {OfferCardType} from '../types/offer_card_type.ts'; | ||
| import Favourite from './favourite.tsx'; | ||
|
|
||
| type FavouriteListProps = { | ||
| favourites: OfferCardType[]; | ||
| } | ||
|
|
||
| function FavouriteList({favourites}: FavouriteListProps): JSX.Element { | ||
| return ( | ||
| <> | ||
| { | ||
| favourites.map((favourite) => <Favourite key={favourite.id} favourite={favourite}/>) | ||
| } | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default FavouriteList; |
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,28 @@ | ||
| import {OfferCardType} from '../types/offer_card_type.ts'; | ||
| import OfferCard from './offer_card.tsx'; | ||
| import {MouseEventHandler, useState} from 'react'; | ||
|
|
||
| type OfferCardListProps = { | ||
| offerCards: OfferCardType[]; | ||
| } | ||
|
|
||
| function OfferCardList({offerCards}: OfferCardListProps): JSX.Element { | ||
| const [, setOfferCardActive] = useState(0); | ||
|
|
||
| return ( | ||
| <> | ||
| { | ||
| offerCards.map((offer) => { | ||
| const mouseHandler: MouseEventHandler = () => { | ||
| setOfferCardActive(offer.id); | ||
| }; | ||
|
|
||
| return ( | ||
| <OfferCard key={offer.id} offerCard={offer} mouseHandler={mouseHandler}/>); | ||
| }) | ||
| } | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default OfferCardList; |
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,60 @@ | ||
| import {ChangeEvent, useState} from 'react'; | ||
|
|
||
| const StarTitles: {[key: number]: string} = { | ||
| 1: 'terrible', | ||
| 2: 'bad', | ||
| 3: 'not bad', | ||
| 4: 'good', | ||
| 5: 'perfect', | ||
| }; | ||
|
|
||
| function Review(): JSX.Element { | ||
| const [reviewData, setReviewData] = useState({ | ||
| review: '', | ||
| rating: 0 | ||
| }); | ||
|
|
||
| const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { | ||
| const {name, value} = event.target; | ||
| setReviewData({...reviewData, [name]: value}); | ||
| }; | ||
|
|
||
| return ( | ||
| <form className="reviews__form form" action="#" method="post"> | ||
| <label className="reviews__label form__label" htmlFor="review">Your review</label> | ||
| <div className="reviews__rating-form form__rating"> | ||
| {Array.from({ length: 5 }, (_, index) => 5 - index).map((number) => ( | ||
| <> | ||
| <input className="form__rating-input visually-hidden" name="rating" value={`${number}`} id={`${number}-stars`} | ||
| type="radio" onChange={handleChange} | ||
| > | ||
| </input> | ||
| <label htmlFor={`${number}-stars`} className="reviews__rating-label form__rating-label" | ||
| title={StarTitles[number]} | ||
| > | ||
| <svg className="form__star-image" width="37" height="33"> | ||
| <use xlinkHref="#icon-star"></use> | ||
| </svg> | ||
| </label> | ||
| </> | ||
| ))} | ||
| </div> | ||
| <textarea className="reviews__textarea form__textarea" id="review" name="review" value={reviewData.review} | ||
| placeholder="Tell how was your stay, what you like and what can be improved" onChange={handleChange} | ||
| > | ||
| </textarea> | ||
| <div className="reviews__button-wrapper"> | ||
| <p className="reviews__help"> | ||
| To submit review please make sure to set <span className="reviews__star">rating</span> and | ||
| describe your stay with at least <b className="reviews__text-amount">50 characters</b>. | ||
| </p> | ||
| <button className="reviews__submit form__submit button" type="submit" disabled | ||
| onClick={() => {}} | ||
| >Submit | ||
| </button> | ||
| </div> | ||
| </form> | ||
| ); | ||
| } | ||
|
|
||
| export default Review; |
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 |
|---|---|---|
| @@ -1,14 +1,16 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
| import App from './components/app'; | ||
| import {OfferCards} from './mocks/offer_cards'; | ||
|
|
||
| const offersNumber = 10; | ||
| const root = ReactDOM.createRoot( | ||
| document.getElementById('root') as HTMLElement | ||
| ); | ||
|
|
||
| root.render( | ||
| <React.StrictMode> | ||
| <App offersNumber={offersNumber}/> | ||
| <App | ||
| offerCards={OfferCards} | ||
| /> | ||
| </React.StrictMode> | ||
| ); |
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,40 @@ | ||
| import {OfferCardType, PlaceType} from '../types/offer_card_type'; | ||
|
|
||
| export const OfferCards: OfferCardType[] = [ | ||
| { | ||
| id: 1, | ||
| title: 'Beautiful & luxurious studio at great location', | ||
| price: 210, | ||
| isPremium: true, | ||
| image: 'img/apartment-01.jpg', | ||
| rating: 1, | ||
| placeType: PlaceType.Apartment, | ||
| }, | ||
| { | ||
| id: 2, | ||
| title: 'Wood and stone place', | ||
| price: 80, | ||
| isPremium: false, | ||
| image: 'img/room.jpg', | ||
| rating: 4, | ||
| placeType: PlaceType.Room, | ||
| }, | ||
| { | ||
| id: 3, | ||
| title: 'Aboba', | ||
| price: 111, | ||
| isPremium: false, | ||
| image: 'img/apartment-02.jpg', | ||
| rating: 3, | ||
| placeType: PlaceType.Apartment, | ||
| }, | ||
| { | ||
| id: 4, | ||
| title: 'Chetvertoe predlozenie', | ||
| price: 44, | ||
| isPremium: false, | ||
| image: 'img/apartment-03.jpg', | ||
| rating: 5, | ||
| placeType: PlaceType.Apartment, | ||
| } | ||
| ]; |
Oops, something went wrong.