location details UI
This commit is contained in:
parent
ae26e4f282
commit
7b3f41b265
@ -63,6 +63,24 @@ img {
|
|||||||
border-bottom: 1px solid white;
|
border-bottom: 1px solid white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ratingInput div input {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.criticSortFilter {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.criticSortFilter .dropdownLabel {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-more-button a:hover {
|
||||||
|
background-color: #38444d;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 380px) {
|
@media screen and (max-width: 380px) {
|
||||||
.header-link {
|
.header-link {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@ -1,21 +1,44 @@
|
|||||||
import { useLocation, useParams } from 'react-router-dom';
|
import { useLocation, useParams } from 'react-router-dom';
|
||||||
import { getImagesByLocationService, getLocationService } from "../../services";
|
import { ChangeEvent, TargetedEvent } from 'preact/compat';
|
||||||
import { useEffect, useState } from 'preact/hooks';
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import Lightbox from 'yet-another-react-lightbox';
|
import Lightbox from 'yet-another-react-lightbox';
|
||||||
import useCallbackState from '../../types/state-callback';
|
import useCallbackState from '../../types/state-callback';
|
||||||
import { EmptyLocationDetailResponse, LocationDetailResponse, LocationResponse, emptyLocationResponse } from './types';
|
import { EmptyLocationDetailResponse, LocationDetailResponse, LocationResponse, emptyLocationResponse } from './types';
|
||||||
|
import { useAutosizeTextArea } from '../../utils';
|
||||||
|
import { getImagesByLocationService, getLocationService } from "../../services";
|
||||||
|
import { DefaultSeparator, SeparatorWithAnchor } from '../../components';
|
||||||
|
|
||||||
function LocationDetail() {
|
function LocationDetail() {
|
||||||
const [locationDetail, setLocationDetail] = useCallbackState<LocationDetailResponse>(EmptyLocationDetailResponse)
|
const [locationDetail, setLocationDetail] = useCallbackState<LocationDetailResponse>(EmptyLocationDetailResponse)
|
||||||
const [locationImages, setLocationImages] = useState<LocationResponse>(emptyLocationResponse())
|
const [locationImages, setLocationImages] = useState<LocationResponse>(emptyLocationResponse())
|
||||||
const [lightboxOpen, setLightboxOpen] = useState<boolean>(false)
|
const [lightboxOpen, setLightboxOpen] = useState<boolean>(false)
|
||||||
|
const [pageState, setPageState] = useState({
|
||||||
|
critic_filter_name: 'highest rated',
|
||||||
|
critic_filter_type: 0,
|
||||||
|
show_sort: false
|
||||||
|
})
|
||||||
|
const [reviewValue, setReviewValue] = useState({
|
||||||
|
review_textArea: '',
|
||||||
|
score_input: '',
|
||||||
|
})
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true)
|
const [isLoading, setIsLoading] = useState<boolean>(true)
|
||||||
|
|
||||||
|
|
||||||
|
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
useAutosizeTextArea(textAreaRef.current, reviewValue.review_textArea);
|
||||||
|
|
||||||
const { state } = useLocation();
|
const { state } = useLocation();
|
||||||
const { id } = useParams()
|
const { id } = useParams()
|
||||||
|
|
||||||
async function getLocationDetail() {
|
const SORT_TYPE = [
|
||||||
|
'highest rated',
|
||||||
|
'lowest rated',
|
||||||
|
'newest',
|
||||||
|
'oldest'
|
||||||
|
]
|
||||||
|
|
||||||
|
async function getLocationDetail(): Promise<void> {
|
||||||
try {
|
try {
|
||||||
const res = await getLocationService(Number(id))
|
const res = await getLocationService(Number(id))
|
||||||
setLocationDetail(res.data, (val) => {
|
setLocationDetail(res.data, (val) => {
|
||||||
@ -26,7 +49,7 @@ function LocationDetail() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getImage(thumbnail?: String) {
|
async function getImage(thumbnail?: String): Promise<void> {
|
||||||
try {
|
try {
|
||||||
const res = await getImagesByLocationService({ page: 1, page_size: 15, location_id: Number(id) })
|
const res = await getImagesByLocationService({ page: 1, page_size: 15, location_id: Number(id) })
|
||||||
res.data.images.push({ src: thumbnail })
|
res.data.images.push({ src: thumbnail })
|
||||||
@ -37,6 +60,28 @@ function LocationDetail() {
|
|||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function onChangeCriticsSort(e: TargetedEvent<HTMLAnchorElement>, sort_name: string, sort_type: number): void {
|
||||||
|
e.preventDefault()
|
||||||
|
setPageState({ show_sort: false, critic_filter_name: sort_name, critic_filter_type: sort_type })
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getLocationDetail()
|
getLocationDetail()
|
||||||
@ -164,13 +209,15 @@ function LocationDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section name={'REVIEWS SECTION'}>
|
||||||
<div className={'mt-5'} style={{ tableLayout: 'fixed', display: 'table', width: '100%' }}>
|
<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' }}>
|
<div className={'wideLeft'} style={{ textAlign: 'left', paddingRight: 20, maxWidth: 1096, minWidth: 680, display: 'table-cell', position: 'relative', verticalAlign: 'top', width: '100%', boxSizing: 'border-box' }}>
|
||||||
<div className={'reviewContainer p-4'} style={{ backgroundColor: '#2f3136' }}>
|
|
||||||
|
{/* <div className={'bg-secondary text-center p-3'} style={{ width: '100%'}}><a href={'#'}>SIGN IN</a> TO REVIEW</div> */}
|
||||||
|
<div name="REVIEW INPUT TEXTAREA" className={'reviewContainer p-4'} style={{ backgroundColor: '#2f3136' }}>
|
||||||
<div className={'reviewBoxContent'} style={{ width: '75%', margin: '0 auto' }}>
|
<div className={'reviewBoxContent'} style={{ width: '75%', margin: '0 auto' }}>
|
||||||
|
|
||||||
<div className={'userImage mr-3'} style={{ width: 50, float: 'left' }}>
|
<div className={'userImage mr-3'} style={{ width: 55, float: 'left' }}>
|
||||||
<a href={'#'}>
|
<a href={'#'}>
|
||||||
<img loading={'lazy'} src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'} />
|
<img loading={'lazy'} src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'} />
|
||||||
</a>
|
</a>
|
||||||
@ -180,22 +227,31 @@ function LocationDetail() {
|
|||||||
<a href={'#'}>user</a>
|
<a href={'#'}>user</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ margin: '5px 0 10px' }}>
|
<div className={'ratingInput'} style={{ margin: '5px 0 10px' }}>
|
||||||
<div style={{ float: 'left' }}>
|
<div style={{ float: 'left' }}>
|
||||||
<input
|
<input
|
||||||
type={'text'}
|
type={'text'}
|
||||||
pattern={"\d*"}
|
pattern={"\d*"}
|
||||||
style={{ fontSize: 12, backgroundColor: '#40444b', textAlign: 'center', width: 40, height: 20, lineHeight: 18, border: '1px solid #38444d' }}
|
style={{ fontSize: 12, backgroundColor: '#40444b', textAlign: 'center', width: 40, height: 20, lineHeight: 18, border: '1px solid #38444d' }}
|
||||||
maxLength={3}
|
maxLength={3}
|
||||||
|
value={reviewValue.score_input}
|
||||||
|
onChange={handleScoreInputChange}
|
||||||
placeholder={"0-100"}
|
placeholder={"0-100"}
|
||||||
autoComplete={'off'}
|
autoComplete={'off'}
|
||||||
/>
|
/>
|
||||||
|
<div className={'inline-block text-xs ml-2 text-tertiary'}>/ score</div>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ clear: 'both' }} />
|
<div style={{ clear: 'both' }} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={'mt-3'} style={{ width: '100%' }}>
|
<div className={'mt-3'} style={{ width: '100%' }}>
|
||||||
<textarea style={{ border: 'none', overflow: 'auto', outline: 'none', boxShadow: 'none', backgroundColor: '#40444b' }}></textarea>
|
<textarea
|
||||||
|
onChange={handleTextAreaChange}
|
||||||
|
ref={textAreaRef}
|
||||||
|
className={'p-2'}
|
||||||
|
value={reviewValue.review_textArea}
|
||||||
|
style={{ border: 'none', overflow: 'auto', outline: 'none', boxShadow: 'none', backgroundColor: '#40444b', width: '100%', minHeight: 100, overflowY: 'hidden' }}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ textAlign: 'right', width: "100%" }}>
|
<div style={{ textAlign: 'right', width: "100%" }}>
|
||||||
@ -210,10 +266,360 @@ function LocationDetail() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div name={'CRTICITS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
|
||||||
|
<SeparatorWithAnchor pageName={"critic's review"} pageLink='#' />
|
||||||
|
<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={{ display: 'table-cell', position: 'relative', verticalAlign: 'top', width: 330, textAlign: 'left', padding: 15, boxSizing: 'border-box', backgroundColor: "gray", height: 1080 }}>
|
</div>
|
||||||
|
<div style={{ clear: 'both' }} />
|
||||||
|
|
||||||
|
<div className={''} style={{ padding: '15px 0' }}>
|
||||||
|
<div style={{ float: 'left' }}>
|
||||||
|
<div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
|
||||||
|
90
|
||||||
|
</div>
|
||||||
|
<div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
|
||||||
|
<div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
|
||||||
|
<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 style={{ display: 'inline-block', verticalAlign: 'top' }}>
|
||||||
|
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
|
||||||
|
<a>
|
||||||
|
<span>Benito Mussolini</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 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: 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>
|
||||||
|
|
||||||
|
<div className={''} style={{ padding: '15px 0', borderTop: '1px solid #38444d' }}>
|
||||||
|
<div style={{ float: 'left' }}>
|
||||||
|
<div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
|
||||||
|
90
|
||||||
|
</div>
|
||||||
|
<div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
|
||||||
|
<div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
|
||||||
|
<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 style={{ display: 'inline-block', verticalAlign: 'top' }}>
|
||||||
|
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
|
||||||
|
<a>
|
||||||
|
<span>Benito Mussolini</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 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: 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>
|
||||||
|
<div className={''} style={{ padding: '15px 0', borderTop: '1px solid #38444d' }}>
|
||||||
|
<div style={{ float: 'left' }}>
|
||||||
|
<div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
|
||||||
|
90
|
||||||
|
</div>
|
||||||
|
<div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
|
||||||
|
<div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
|
||||||
|
<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 style={{ display: 'inline-block', verticalAlign: 'top' }}>
|
||||||
|
<div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
|
||||||
|
<a>
|
||||||
|
<span>Benito Mussolini</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 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: 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>
|
||||||
|
|
||||||
|
</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 name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
|
||||||
|
<SeparatorWithAnchor pageName={"Recent 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 }}>
|
||||||
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?
|
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>
|
||||||
|
<div style={{ clear: 'both'}} />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div className={'text-center text-md pt-5 pb-5'}>
|
||||||
|
Added on: 28 May 1988
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<Lightbox
|
<Lightbox
|
||||||
|
|||||||
@ -0,0 +1,5 @@
|
|||||||
|
import useAutosizeTextArea from "./useAutosizeTextArea";
|
||||||
|
|
||||||
|
export {
|
||||||
|
useAutosizeTextArea
|
||||||
|
}
|
||||||
21
src/utils/useAutosizeTextArea.ts
Normal file
21
src/utils/useAutosizeTextArea.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
// Updates the height of a <textarea> when the value changes.
|
||||||
|
const useAutosizeTextArea = (
|
||||||
|
textAreaRef: HTMLTextAreaElement | null,
|
||||||
|
value: string
|
||||||
|
) => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (textAreaRef) {
|
||||||
|
// We need to reset the height momentarily to get the correct scrollHeight for the textarea
|
||||||
|
textAreaRef.style.height = "0px";
|
||||||
|
const scrollHeight = textAreaRef.scrollHeight;
|
||||||
|
|
||||||
|
// We then set the height directly, outside of the render loop
|
||||||
|
// Trying to set this with state or a ref will product an incorrect value.
|
||||||
|
textAreaRef.style.height = scrollHeight + "px";
|
||||||
|
}
|
||||||
|
}, [textAreaRef, value]);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useAutosizeTextArea;
|
||||||
Loading…
Reference in New Issue
Block a user