665 lines
34 KiB
TypeScript
665 lines
34 KiB
TypeScript
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { ChangeEvent, TargetedEvent } from 'preact/compat';
|
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
|
import Lightbox from 'yet-another-react-lightbox';
|
|
import useCallbackState from '../../types/state-callback';
|
|
import {
|
|
EmptyLocationDetailResponse,
|
|
LocationDetailResponse,
|
|
LocationResponse,
|
|
emptyLocationResponse,
|
|
CurrentUserLocationReviews,
|
|
} from './types';
|
|
import { AxiosError } from 'axios';
|
|
import { handleAxiosError, useAutosizeTextArea } from '../../utils';
|
|
import { getCurrentUserLocationReviewService, getImagesByLocationService, getLocationService, postReviewLocation } from "../../services";
|
|
import { DefaultSeparator, SeparatorWithAnchor, CustomInterweave, SpinnerLoading } from '../../components';
|
|
import { useSelector } from 'react-redux';
|
|
import { UserRootState } from '../../store/type';
|
|
import { DEFAULT_AVATAR_IMG } from '../../constants/default';
|
|
import './index.css';
|
|
import { IHttpResponse } from '../../types/common';
|
|
import ReactTextareaAutosize from 'react-textarea-autosize';
|
|
|
|
const SORT_TYPE = [
|
|
'highest rated',
|
|
'lowest rated',
|
|
'newest',
|
|
'oldest'
|
|
]
|
|
|
|
function LocationDetail() {
|
|
const [locationDetail, setLocationDetail] = useCallbackState<LocationDetailResponse>(EmptyLocationDetailResponse)
|
|
const [locationImages, setLocationImages] = useState<LocationResponse>(emptyLocationResponse())
|
|
const [currentUserReview, setCurrentUserReview] = useState<CurrentUserLocationReviews>()
|
|
const [lightboxOpen, setLightboxOpen] = useState<boolean>(false)
|
|
const[updatePage, setUpdatePage] = useState<boolean>(true)
|
|
const [pageState, setPageState] = useState({
|
|
critic_filter_name: 'highest rated',
|
|
critic_filter_type: 0,
|
|
show_sort: false,
|
|
enable_post: true,
|
|
on_submit_loading: false,
|
|
is_score_rating_panic_msg: '',
|
|
})
|
|
const [reviewValue, setReviewValue] = useState({
|
|
review_textArea: '',
|
|
score_input: '',
|
|
})
|
|
const [isLoading, setIsLoading] = useState<boolean>(true)
|
|
|
|
const navigate = useNavigate();
|
|
const user = useSelector((state: UserRootState) => state.auth)
|
|
|
|
|
|
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
|
useAutosizeTextArea(textAreaRef.current, reviewValue.review_textArea);
|
|
|
|
const { id } = useParams()
|
|
|
|
async function getLocationDetail(): Promise<void> {
|
|
try {
|
|
const res = await getLocationService(Number(id))
|
|
setLocationDetail(res.data, (val) => {
|
|
getImage(val.detail.thumbnail.String.toString())
|
|
})
|
|
} catch (error) {
|
|
let err = error as AxiosError;
|
|
if (err.response?.status == 404) {
|
|
navigate("/")
|
|
}
|
|
alert(error)
|
|
}
|
|
}
|
|
|
|
async function getImage(thumbnail?: String): Promise<void> {
|
|
try {
|
|
const res = await getImagesByLocationService({ page: 1, page_size: 15, location_id: Number(id) })
|
|
res.data.images.push({ src: thumbnail })
|
|
setLocationImages(res.data)
|
|
setUpdatePage(false)
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
setIsLoading(false)
|
|
}
|
|
|
|
async function getCurrentUserLocationReview(): Promise<void> {
|
|
try {
|
|
const res = await getCurrentUserLocationReviewService(Number(id))
|
|
setCurrentUserReview(res.data)
|
|
setPageState({ ...pageState, enable_post: false})
|
|
} catch (error) {
|
|
let err = error as IHttpResponse;
|
|
if(err.status == 404 || err.status == 401 ) {
|
|
return
|
|
}
|
|
alert(err.error.response.data.message)
|
|
}
|
|
}
|
|
|
|
function handleTextAreaChange(e: ChangeEvent<HTMLTextAreaElement>): void {
|
|
const val = e.target as HTMLTextAreaElement;
|
|
|
|
setReviewValue({
|
|
...reviewValue,
|
|
review_textArea: val.value
|
|
})
|
|
}
|
|
|
|
function handleScoreInputChange(e: ChangeEvent<HTMLInputElement>): void {
|
|
const val = e.target as HTMLInputElement;
|
|
|
|
setReviewValue({
|
|
...reviewValue,
|
|
score_input: val.value
|
|
})
|
|
|
|
setPageState({
|
|
...pageState,
|
|
is_score_rating_panic_msg: ''
|
|
})
|
|
}
|
|
|
|
function onChangeCriticsSort(e: TargetedEvent<HTMLAnchorElement>, sort_name: string, sort_type: number): void {
|
|
e.preventDefault()
|
|
setPageState({ ...pageState, show_sort: false, critic_filter_name: sort_name, critic_filter_type: sort_type })
|
|
}
|
|
|
|
async function handleSubmitReview(e: TargetedEvent<HTMLAnchorElement>) {
|
|
e.preventDefault();
|
|
setPageState({ ...pageState, on_submit_loading: true })
|
|
|
|
if (isNaN(Number(reviewValue.score_input))) {
|
|
setPageState({ ...pageState, is_score_rating_panic_msg: "SCORE MUST BE A NUMBER" })
|
|
return
|
|
}
|
|
|
|
if (Number(reviewValue.score_input) > 100) {
|
|
setPageState({ ...pageState, is_score_rating_panic_msg: "SCORE MUST BE LESS OR EQUAL THAN 100" })
|
|
return
|
|
}
|
|
|
|
if (reviewValue.score_input === '') {
|
|
setPageState({ ...pageState, is_score_rating_panic_msg: "SCORE MUSTN'T BE EMPTY" })
|
|
return
|
|
}
|
|
|
|
try {
|
|
const { data } = await postReviewLocation({
|
|
is_hided: false,
|
|
location_id: Number(id),
|
|
score: Number(reviewValue.score_input),
|
|
submitted_by: Number(user.id),
|
|
is_from_critic: user.is_critics,
|
|
comments: reviewValue.review_textArea,
|
|
})
|
|
|
|
setPageState({ ...pageState, enable_post: false, on_submit_loading: false })
|
|
setReviewValue({ review_textArea: '', score_input: '' })
|
|
setCurrentUserReview({
|
|
id: data.id,
|
|
comments: data.comments,
|
|
is_from_critic: data.is_from_critic,
|
|
is_hided: data.is_hided,
|
|
location_id: data.location_id,
|
|
score: data.score,
|
|
submitted_by: data.submitted_by,
|
|
created_at: data.created_at,
|
|
updated_at: data.updated_at
|
|
})
|
|
setUpdatePage(true)
|
|
} catch (error) {
|
|
let err = error as AxiosError;
|
|
console.log(err)
|
|
const str = handleAxiosError(err)
|
|
alert(str)
|
|
setPageState({ ...pageState, on_submit_loading: false })
|
|
}
|
|
|
|
}
|
|
|
|
function handleSignInNavigation(e: TargetedEvent<HTMLAnchorElement>) {
|
|
e.preventDefault();
|
|
|
|
|
|
navigate('/login', { state: { from: `/location/${id}` } })
|
|
}
|
|
|
|
useEffect(() => {
|
|
getCurrentUserLocationReview()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if(updatePage) {
|
|
getLocationDetail()
|
|
}
|
|
}, [updatePage])
|
|
|
|
return (
|
|
<>
|
|
<div className={'content main-content mt-3'}>
|
|
<section name={"HEADER LINK"}>
|
|
<div className={'header-link text-tertiary'}>
|
|
<a style={{ display: 'inline-block' }}>OVERVIEW</a>
|
|
<a className={'ml-4'} style={{ display: 'inline-block' }}>USER REVIEWS</a>
|
|
<a className={'ml-4'} style={{ display: 'inline-block' }}>CRITIC REVIEWS</a>
|
|
<a className={'ml-4'} style={{ display: 'inline-block' }}>COMMENTS</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section name={'LOCATION HEADER'}>
|
|
<div className={'pb-5'} style={{ borderBottom: '1px solid #38444d' }}>
|
|
<div className={'font-bold mt-5 text-2xl'}>
|
|
<h1>{locationDetail?.detail.name}</h1>
|
|
</div>
|
|
{isLoading ?
|
|
<div className={'mt-3'} style={{ width: 250, height: 250, backgroundColor: 'gray', float: 'left' }} />
|
|
:
|
|
<div className={'inline-block'} style={{ maxWidth: 320 }}>
|
|
<a
|
|
onClick={() => setLightboxOpen(true)}
|
|
className={'mt-3'}
|
|
style={{ display: 'grid', position: 'relative', gridTemplateColumns: 'repeat(12,1fr)', cursor: 'zoom-in' }}
|
|
>{Number(locationImages?.total_image) > 0 &&
|
|
<div class="image-stack__item image-stack__item--top">
|
|
<img src={locationDetail.detail.thumbnail.String.toString()} alt="" style={{ aspectRatio: '1/1' }} />
|
|
{locationImages?.images.length > 1 &&
|
|
<div className={'text-xs p-2 bg-primary'} style={{ position: 'absolute', bottom: 0, right: 0 }}>
|
|
Total images ({locationImages?.images.length})
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
{locationImages?.images.length > 1 &&
|
|
<div class="image-stack__item image-stack__item--middle">
|
|
<img src={locationImages?.images[0].src} alt="" style={{ aspectRatio: '1/1' }} />
|
|
</div>
|
|
}
|
|
<div class="image-stack__item image-stack__item--bottom" style={Number(locationImages?.total_image) > 1 ? {} : { gridColumn: '13/1' }}>
|
|
<img src={Number(locationImages?.total_image) > 1 ? locationImages?.images[1].src.toString() : locationDetail.detail.thumbnail.String.toString()} alt="" style={{ aspectRatio: '1/1' }} />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
}
|
|
<div className={'inline-block'} style={{ verticalAlign: 'top', padding: '0 2%', width: '30%', minWidth: 310 }}>
|
|
<div className={'p-4 bg-secondary mt-3'} style={{ width: '100%', height: 120, borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
|
|
<div className={'font-bold ml-1 text-xs'}>CRITICS SCORE</div>
|
|
<div className={'text-4xl text-center mt-2 mr-4'} style={{ width: 95, float: 'left' }}>
|
|
{locationDetail.detail.critic_count !== 0 ? Math.floor(Number(locationDetail.detail.critic_score) / Number(locationDetail.detail.critic_count)) : "NR"}
|
|
<div className={"items-center p-2"}>
|
|
<div className={'mr-3 users-score-bar'}>
|
|
<div className={"mt-1"} style={{ height: 4, width: 80, backgroundColor: "#72767d" }}>
|
|
<div style={{ height: 4, width: ` ${locationDetail.detail.critic_count !== 0 ? Number(locationDetail.detail.critic_score) : 0}%`, backgroundColor: 'green' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{locationDetail.detail.critic_count !== 0 &&
|
|
<div className={'ml-14 text-sm'}>
|
|
Based on {locationDetail.detail.critic_count} reviews
|
|
</div>
|
|
}
|
|
</div>
|
|
<div className={'p-4 bg-secondary mt-1 inline-block'} style={{ width: '100%', height: 120, borderBottomLeftRadius: 10, borderBottomRightRadius: 10 }}>
|
|
<div className={'font-bold ml-2 text-xs'}>USERS SCORE</div>
|
|
<div className={'text-4xl text-center mt-2 mr-4'} style={{ width: 95, float: 'left' }}>
|
|
{locationDetail.detail.user_count !== 0 ? Math.floor(Number(locationDetail.detail.user_score) / Number(locationDetail.detail.user_count)) : "NR"}
|
|
<div className={"items-center p-2"}>
|
|
<div className={'mr-3 users-score-bar'}>
|
|
<div className={"mt-1"} style={{ height: 4, width: 80, backgroundColor: "#72767d" }}>
|
|
<div style={{ height: 4, width: ` ${locationDetail.detail.user_count !== 0 ? Number(locationDetail.detail.user_score) / Number(locationDetail.detail.user_count) : 0}%`, backgroundColor: 'green' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{locationDetail.detail.user_count !== 0 &&
|
|
<div className={'ml-14 text-sm'}>
|
|
Based on {locationDetail.detail.user_count} reviews
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div className={'inline-block mt-3 bg-primary text-sm location-detail-container'}>
|
|
<div className={'pb-1'} style={{ borderBottom: '1px solid #38444d' }}>
|
|
<h2 className={'inline-block font-bold text-xs'} style={{ letterSpacing: .9 }}>DETAILS</h2>
|
|
<div className={''} style={{ float: 'right', fontSize: 10, letterSpacing: .9 }}>
|
|
<a href="#">SUBMIT CORRECTION</a>
|
|
</div>
|
|
</div>
|
|
<div className={'mt-2 capitalize'}>
|
|
<span>address: </span> {locationDetail.detail.address} {locationDetail.detail.regency_name}
|
|
</div>
|
|
<div className={'mt-1 capitalize'}>
|
|
<span>province: </span> <a href={'#'}> {locationDetail.detail.province_name}</a>
|
|
</div>
|
|
<div className={'mt-1 capitalize'}>
|
|
<span>region: </span> <a href={'#'}> {locationDetail.detail.region_name}</a>
|
|
</div>
|
|
<div className={'mt-1 capitalize'}>
|
|
<span>average cost: </span> IDR 25.0000
|
|
</div>
|
|
<div className={'mt-1 text-md'}>
|
|
<a href={locationDetail.detail.google_maps_link.toString()} style={{ borderBottom: '1px solid white' }} target={'_'}> Maps Location</a>
|
|
</div>
|
|
<div className={'mt-1'}>
|
|
<span>Tags: </span>
|
|
</div>
|
|
{locationDetail.tags.map(x => (
|
|
<div className={'p-1 text-xs tags-box mr-1'}>
|
|
<a href={'#'}>{x}</a>
|
|
</div>
|
|
))
|
|
}
|
|
<div className={'p-1 text-xs tags-box'}>
|
|
<a href={'#'}>+ add tags</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section name={'REVIEWS SECTION'}>
|
|
<div className={'mt-5'} style={{ tableLayout: 'fixed', display: 'table', width: '100%' }}>
|
|
<div className={'wideLeft'} style={{ textAlign: 'left', paddingRight: 20, maxWidth: 1096, minWidth: 680, display: 'table-cell', position: 'relative', verticalAlign: 'top', width: '100%', boxSizing: 'border-box' }}>
|
|
{!user.username ?
|
|
<div className={'bg-secondary text-center p-3'} style={{ width: '100%' }}><a href={'#'} onClick={handleSignInNavigation} style={{ borderBottom: '1px solid white' }}>SIGN IN</a> TO REVIEW</div>
|
|
:
|
|
<div name="REVIEW INPUT TEXTAREA" className={'reviewContainer p-4'} style={{ backgroundColor: '#2f3136' }}>
|
|
<div className={'review-box-content'}>
|
|
|
|
<div className={'userImage mr-3'} style={{ width: 55, float: 'left' }}>
|
|
<a href={'#'}>
|
|
<img loading={'lazy'} src={user.avatar_picture != '' ? user.avatar_picture.toString() : DEFAULT_AVATAR_IMG} style={{ aspectRatio: '1/1' }} />
|
|
</a>
|
|
</div>
|
|
|
|
<div style={{ display: 'block' }}>
|
|
<a href={'#'}>{user.username}</a>
|
|
</div>
|
|
|
|
<div className={'ratingInput'} style={currentUserReview ? { margin: '0 0 10px' } : { margin: '5px 0 10px' }}>
|
|
{currentUserReview ?
|
|
<div style={{ display: 'inline-block' }}>
|
|
<p className={'ml-2'}>{currentUserReview.score}</p>
|
|
<div style={{ height: 4, width: 35, backgroundColor: "#72767d" }}>
|
|
<div style={{ height: 4, width: `${currentUserReview.score}%`, backgroundColor: 'green' }} />
|
|
</div>
|
|
</div>
|
|
:
|
|
<>
|
|
<input
|
|
type={'text'}
|
|
pattern={"\d*"}
|
|
style={{ fontSize: 12, backgroundColor: '#40444b', textAlign: 'center', width: 40, height: 20, lineHeight: 18, border: '1px solid #38444d' }}
|
|
maxLength={3}
|
|
value={reviewValue.score_input}
|
|
onChange={handleScoreInputChange}
|
|
placeholder={"0-100"}
|
|
autoComplete={'off'}
|
|
/>
|
|
<div className={'inline-block text-xs ml-2 text-tertiary'}>/ score</div>
|
|
{pageState.is_score_rating_panic_msg &&
|
|
<div className={'inline-block text-xs ml-2 text-error'}>{pageState.is_score_rating_panic_msg}</div>
|
|
}
|
|
</>
|
|
|
|
}
|
|
<div style={{ clear: 'both' }} />
|
|
</div>
|
|
|
|
<div className={'mt-3'} style={{ width: '100%' }}>
|
|
{currentUserReview ?
|
|
<CustomInterweave
|
|
content={currentUserReview.comments}
|
|
/>
|
|
:
|
|
<ReactTextareaAutosize
|
|
onChange={handleTextAreaChange}
|
|
ref={textAreaRef}
|
|
className={'p-2 text-area text-sm'}
|
|
value={reviewValue.review_textArea}
|
|
/>
|
|
}
|
|
</div>
|
|
|
|
<div style={{ textAlign: 'right', width: "100%" }}>
|
|
<div style={{ display: 'inline-block', fontSize: 11, verticalAlign: 'middle', margin: '0 10px 0 0', letterSpacing: .5 }}>
|
|
<a>Review Guidelines</a>
|
|
</div>
|
|
{pageState.on_submit_loading ?
|
|
<SpinnerLoading />
|
|
:
|
|
<span className={'text-xxs p-1 text-area-button'} style={pageState.enable_post ? '' : { display: 'none'}}>
|
|
<a href={'#'} onClick={handleSubmitReview}>
|
|
POST
|
|
</a>
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
<div name={'CRTICITS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
|
|
<SeparatorWithAnchor pageName={"critic's review"} pageLink='#' />
|
|
{locationDetail.critics_review.length > 0 ?
|
|
<>
|
|
<div className={'criticSortFilter'}>
|
|
<div className={'inline-block text-sm'}>Sort by: </div>
|
|
<a className={'dropdownLabel'} onClick={() => setPageState({ ...pageState, show_sort: !pageState.show_sort })}>
|
|
<p className={'ml-2 inline-block capitalize text-sm'}>{pageState.critic_filter_name}</p>
|
|
<svg style={{ display: 'inline-block' }} fill={"currentColor"} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" /></svg>
|
|
</a>
|
|
<div className={'dropdown-content text-sm bg-secondary'} style={pageState.show_sort ? { display: 'block' } : ''}>
|
|
{SORT_TYPE.map((x, index) => (
|
|
<a onClick={(e) => onChangeCriticsSort(e, x, index)} className={'block pt-1 capitalize'}>{x}</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div style={{ clear: 'both' }} />
|
|
|
|
{locationDetail.critics_review.map(x => (
|
|
<div className={''} style={{ padding: '15px 0' }}>
|
|
<div style={{ float: 'left' }}>
|
|
<div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
|
|
{x.score}
|
|
</div>
|
|
<div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
|
|
<div style={{ height: 4, backgroundColor: '#85ce73', width: `${x.score}%` }} />
|
|
</div>
|
|
</div>
|
|
<div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
|
|
<a href="#">
|
|
<img
|
|
loading={'lazy'}
|
|
style={{ width: '100%' }}
|
|
src={x.user_avatar.Valid ? x.user_avatar.String.toString() : 'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div style={{ display: 'inline-block', verticalAlign: 'top' }}>
|
|
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
|
|
<a>
|
|
<span>{x.username}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 1px' }}>
|
|
<CustomInterweave
|
|
content={x.comments}
|
|
/>
|
|
</div>
|
|
<div className={'reviewLinks'} style={{ marginLeft: 72 }}>
|
|
<div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<a className={'text-sm'} href={'#'}>
|
|
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
|
<div className={'inline-block'}>Video</div>
|
|
</a>
|
|
</div>
|
|
<div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<a className={'text-sm'} href={'#'}>
|
|
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
|
<div className={'inline-block'}>Instagram</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
|
|
:
|
|
<>
|
|
<span className={'text-sm italic'}>No Critics review to display</span>
|
|
</>
|
|
|
|
}
|
|
</div>
|
|
|
|
<div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
|
|
<SeparatorWithAnchor pageName={"User's review"} pageLink='#' secondLink={locationDetail.users_review.length > 0 ? '#' : ''} />
|
|
{ locationDetail.users_review.length > 0 ?
|
|
<>
|
|
{locationDetail.users_review.map(x => (
|
|
<div style={{ padding: '15px 0' }}>
|
|
<div className={'mr-5'} style={{ width: 45, float: 'left' }}>
|
|
<a href="#">
|
|
<img
|
|
loading={'lazy'}
|
|
style={{ width: '100%' }}
|
|
src={x.user_avatar.Valid ? x.user_avatar.String.toString() : 'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
|
|
<a>
|
|
<span>{x.username}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className={'inline-block'}>
|
|
<div className={'text-sm text-center'} >{x.score}</div>
|
|
<div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
|
|
<div style={{ height: 4, backgroundColor: '#85ce73', width: `${x.score}%` }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
|
|
<CustomInterweave
|
|
content={x.comments}
|
|
/>
|
|
</div>
|
|
<div className={'reviewLinks'} style={{ marginLeft: 63 }}>
|
|
<div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<a className={'text-sm'} href={'#'}>
|
|
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
|
<div className={'inline-block'}>Video</div>
|
|
</a>
|
|
</div>
|
|
<div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<a className={'text-sm'} href={'#'}>
|
|
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
|
<div className={'inline-block'}>Instagram</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<div className={'review-more-button text-center text-sm mt-5'}>
|
|
<a style={{ borderRadius: 15, padding: '8px 32px', border: '1px solid #d8d8d8' }}>
|
|
More
|
|
</a>
|
|
</div>
|
|
</>
|
|
:
|
|
<>
|
|
<span className={'text-sm italic'}>No users review to display</span>
|
|
</>
|
|
}
|
|
</div>
|
|
|
|
|
|
{/* <div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
|
|
<SeparatorWithAnchor pageName={"Popular User's review"} pageLink='#' secondLink='#' />
|
|
<div className={''} style={{ padding: '15px 0' }}>
|
|
<div className={'mr-5'} style={{ width: 45, float: 'left' }}>
|
|
<a href="#">
|
|
<img
|
|
loading={'lazy'}
|
|
style={{ width: '100%' }}
|
|
src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
|
|
<a>
|
|
<span>Benito Mussolini</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className={'inline-block'}>
|
|
<div className={'text-sm text-center'} >80</div>
|
|
<div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
|
|
<div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
|
|
</div>
|
|
<div className={'reviewLinks'} style={{ marginLeft: 63 }}>
|
|
<div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<a className={'text-sm'} href={'#'}>
|
|
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
|
<div className={'inline-block'}>Video</div>
|
|
</a>
|
|
</div>
|
|
<div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<a className={'text-sm'} href={'#'}>
|
|
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
|
<div className={'inline-block'}>Instagram</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={''} style={{ padding: '15px 0', borderTop: '1px solid #38444d' }}>
|
|
<div className={'mr-5'} style={{ width: 45, float: 'left' }}>
|
|
<a href="#">
|
|
<img
|
|
loading={'lazy'}
|
|
style={{ width: '100%' }}
|
|
src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
|
|
<a>
|
|
<span>Benito Mussolini</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className={'inline-block'}>
|
|
<div className={'text-sm text-center'} >80</div>
|
|
<div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
|
|
<div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
|
|
</div>
|
|
<div className={'reviewLinks'} style={{ marginLeft: 63 }}>
|
|
<div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<a className={'text-sm'} href={'#'}>
|
|
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
|
<div className={'inline-block'}>Video</div>
|
|
</a>
|
|
</div>
|
|
<div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
|
|
<a className={'text-sm'} href={'#'}>
|
|
<svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
|
|
<div className={'inline-block'}>Instagram</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={'review-more-button text-center text-sm mt-5'}>
|
|
<a style={{ borderRadius: 15, padding: '8px 32px', border: '1px solid #d8d8d8' }}>
|
|
More
|
|
</a>
|
|
</div>
|
|
</div> */}
|
|
<div className={'mb-5'}>
|
|
CONTRUBITION
|
|
<DefaultSeparator />
|
|
anoeantoeh aoenthaoe aoenth aot
|
|
</div>
|
|
</div>
|
|
{/* {screen.width >= 1024 &&
|
|
<div className={'bg-secondary'} style={{ display: 'table-cell', position: 'relative', verticalAlign: 'top', width: 330, textAlign: 'left', padding: 15, boxSizing: 'border-box', height: 1080 }}>
|
|
// ADD USER DISTRIBUTION SOMETHING LIKE THIS
|
|
// https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_user_rating
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit cumque aliquam doloribus in reiciendis? Laborum, ea assumenda, tempora dolore placeat aspernatur, cumque totam sequi debitis dolor nam eligendi suscipit aliquid?
|
|
</div>
|
|
} */}
|
|
</div>
|
|
<div style={{ clear: 'both' }} />
|
|
</section>
|
|
|
|
<section>
|
|
<div className={'text-center text-md pt-5 pb-5'}>
|
|
Added on: 28 May 1988
|
|
</div>
|
|
</section>
|
|
<Lightbox
|
|
open={lightboxOpen}
|
|
close={() => setLightboxOpen(false)}
|
|
slides={locationImages?.images}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default LocationDetail; |