diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx index 631251f..3a6693a 100644 --- a/src/components/Map/Map.tsx +++ b/src/components/Map/Map.tsx @@ -71,7 +71,7 @@ function Map(props: MainPageProps): JSX.Element { } }, [map, offers,selectedPoint]); - return
; + return
; } export default Map; diff --git a/src/components/Offer/Offer.tsx b/src/components/Offer/Offer.tsx index 9d5bd83..957e487 100644 --- a/src/components/Offer/Offer.tsx +++ b/src/components/Offer/Offer.tsx @@ -1,4 +1,8 @@ import SendCommentForm from '../SendCommentForm/SendCommentForm'; +import { ReviewList } from '../Reviews/ReviewList'; +import { offers } from '../../mock/offers'; +import { OtherPlacesNearby } from '../OtherPlacesNearby/OtherPlacesNearby'; +import Map from '../Map/Map'; export default function Offer () { return (
@@ -170,201 +174,30 @@ export default function Offer () {

-
-

- Reviews · 1 -

- -
- {} - -
+ -
+
+ +
-
-

- Other places in the neighbourhood -

-
-
-
- - Place image - -
-
-
-
- €80 - - / night - -
- -
-
-
- - Rating -
-
-

- Wood and stone place -

-

Room

-
-
- - - - -
-
+

Reviews

diff --git a/src/components/OtherPlacesNearby/OtherPlacesNearby.tsx b/src/components/OtherPlacesNearby/OtherPlacesNearby.tsx new file mode 100644 index 0000000..2f64499 --- /dev/null +++ b/src/components/OtherPlacesNearby/OtherPlacesNearby.tsx @@ -0,0 +1,10 @@ +import OfferList from '../Offer/OfferList'; +import { offers } from '../../mock/offers'; + +export const OtherPlacesNearby = () => ( +
+

Other places in the neighbourhood

+ + +
+); diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx new file mode 100644 index 0000000..6574512 --- /dev/null +++ b/src/components/Rating/Rating.tsx @@ -0,0 +1,29 @@ +/* eslint-disable react/prop-types */ +import classNames from 'classnames'; +type RatingProps = { + rating: number; + mode?: 'compact' | 'full'; + containerMix?: string; + starsMix?: string; +}; + +export const Rating: React.FC = ({ + rating, + mode = 'full', + containerMix, + starsMix, +}) => { + const isFullMode = mode === 'full'; + + return ( +
+
+ + Rating {rating} +
+ {Boolean(isFullMode) && ( + {rating} + )} +
+ ); +}; diff --git a/src/components/Reviews/Review.tsx b/src/components/Reviews/Review.tsx new file mode 100644 index 0000000..515ec11 --- /dev/null +++ b/src/components/Reviews/Review.tsx @@ -0,0 +1,57 @@ +/* eslint-disable react/prop-types */ +import { Rating } from '../Rating/Rating'; +type ReviewObject = { + id: string; + date: Date; + user: { + name: string; + avatarUrl: string; + isPro: boolean; + }; + comment: string; + rating: number; +}; +export const dateToYearMonthDay = (date: Date) => + new Intl.DateTimeFormat('en-CA', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + }).format(date); + +export const dateToMonthWordYear = (date: Date) => + new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: 'long' }).format( + date, + ); +export const Review: React.FC = ({ + comment, + date, + rating, + user +}) => ( +
  • +
    +
    + Reviews avatar +
    + {user.name} +
    +
    + +

    {comment}

    + +
    +
    • +); diff --git a/src/components/Reviews/ReviewList.tsx b/src/components/Reviews/ReviewList.tsx new file mode 100644 index 0000000..1a7f03e --- /dev/null +++ b/src/components/Reviews/ReviewList.tsx @@ -0,0 +1,34 @@ +/* eslint-disable react/prop-types */ +import classNames from 'classnames'; +import { Review } from './Review'; +type ReviewObject = { + id: string; + date: Date; + user: { + name: string; + avatarUrl: string; + isPro: boolean; + }; + comment: string; + rating: number; +}; +type ReviewListProps = { + reviews: ReviewObject[]; + containerMix?: string; +}; + +export const ReviewList: React.FC = ({ + reviews, + containerMix, +}) => ( +
    +

    + Reviews · {reviews.length} +

    +
      + {reviews.map((review) => ( + + ))} +
    +
    +);