rename disover

src/components/Separator/WithAnchor/index.tsx

@@ -3,7 +3,7 @@ import './style.css';
 type SeparatorProps = {
   pageName: String,
   pageLink: string,
-  secondLink?: string
+  secondLink?: string,
 }
 
 function SeparatorWithAnchor(props: SeparatorProps) {

src/pages/BestLocations/index.tsx

@@ -194,7 +194,7 @@ function BestLocation() {
               ))}
             </div>
             <div className={'p-4 bg-secondary'} style={{ minWidth: 300}}>
-                <div className={'h-30 bg-primary p-4'} style={{ position: 'sticky', alignSelf: 'flex-start', top: 10}}>
+                <div className={'h-30 bg-primary p-4 right-filter'}>
                   {REVIEWERS_TYPE.map((x, idx) => (
                   <a 
                     onClick={(e) => onChangeReviewType(e, x.toLowerCase(), idx+1)} 

src/pages/BestLocations/style.css

@@ -55,3 +55,9 @@ a .selected-reviewer-filter:hover{
   color: white;
   cursor: default;
 }
+
+.right-filter {
+  position: sticky;
+  align-self: flex-start;
+  top: 30px;
+}

src/pages/Discovery/index.tsx

@@ -1,7 +1,7 @@
 function Discovery() {
   return(
     <>
-    <h1>Best PLaces</h1>
+    <h1>Discovery</h1>
     </>
   )
 

src/pages/LocationDetail/index.css

@@ -63,6 +63,24 @@ img {
   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) {
   .header-link {
     white-space: nowrap;

src/pages/LocationDetail/index.tsx

@@ -1,21 +1,44 @@
 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 Lightbox from 'yet-another-react-lightbox';
 import useCallbackState from '../../types/state-callback';
 import { EmptyLocationDetailResponse, LocationDetailResponse, LocationResponse, emptyLocationResponse } from './types';
+import { useAutosizeTextArea } from '../../utils';
+import { getImagesByLocationService, getLocationService } from "../../services";
+import { DefaultSeparator, SeparatorWithAnchor } from '../../components';
 
 function LocationDetail() {
   const [locationDetail, setLocationDetail] = useCallbackState<LocationDetailResponse>(EmptyLocationDetailResponse)
   const [locationImages, setLocationImages] = useState<LocationResponse>(emptyLocationResponse())
   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 textAreaRef = useRef<HTMLTextAreaElement>(null);
+  useAutosizeTextArea(textAreaRef.current, reviewValue.review_textArea);
+
   const { state } = useLocation();
   const { id } = useParams()
 
-  async function getLocationDetail() {
+  const SORT_TYPE = [
+    'highest rated',
+    'lowest rated',
+    'newest',
+    'oldest'
+  ]
+
+  async function getLocationDetail(): Promise<void> {
     try {
       const res = await getLocationService(Number(id))
       setLocationDetail(res.data, (val) => {
@@ -26,7 +49,7 @@ function LocationDetail() {
     }
   }
 
-  async function getImage(thumbnail?: String) {
+  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 })
@@ -37,6 +60,28 @@ function LocationDetail() {
     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(() => {
     getLocationDetail()
@@ -55,7 +100,7 @@ function LocationDetail() {
         </section>
 
         <section name={'LOCATION HEADER'}>
-          <div className={'pb-5'} style={{ borderBottom: '1px solid #38444d'}}>
+          <div className={'pb-5'} style={{ borderBottom: '1px solid #38444d' }}>
             <div className={'font-bold mt-5 text-2xl'}>
               <h1>{locationDetail?.detail.name}</h1>
             </div>
@@ -164,13 +209,15 @@ function LocationDetail() {
           </div>
         </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={'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={'userImage mr-3'} style={{ width: 50, float: 'left' }}>
+                  <div className={'userImage mr-3'} style={{ width: 55, float: 'left' }}>
                     <a href={'#'}>
                       <img loading={'lazy'} src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'} />
                     </a>
@@ -180,22 +227,31 @@ function LocationDetail() {
                     <a href={'#'}>user</a>
                   </div>
 
-                  <div style={{ margin: '5px 0 10px' }}>
+                  <div className={'ratingInput'} style={{ margin: '5px 0 10px' }}>
                     <div style={{ float: 'left' }}>
                       <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>
                     </div>
                     <div style={{ clear: 'both' }} />
                   </div>
 
                   <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 style={{ textAlign: 'right', width: "100%" }}>
@@ -210,10 +266,360 @@ function LocationDetail() {
                   </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={{ 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>
-            <div style={{ display: 'table-cell', position: 'relative', verticalAlign: 'top', width: 330, textAlign: 'left', padding: 15, boxSizing: 'border-box', backgroundColor: "gray", height: 1080 }}>
+            {screen.width >= 1024 &&
-              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 className={'bg-secondary'} style={{ display: 'table-cell', position: 'relative', verticalAlign: 'top', width: 330, textAlign: 'left', padding: 15, boxSizing: 'border-box', height: 1080 }}>
-            </div>
+                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

src/utils/index.ts

@@ -0,0 +1,5 @@
+import useAutosizeTextArea from "./useAutosizeTextArea";
+
+export {
+  useAutosizeTextArea
+}

src/utils/useAutosizeTextArea.ts

@@ -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;