nochill/hilingriviw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix type and and anchor

Browse Source
This commit is contained in:
NCanggoro 2023-09-17 20:39:47 +07:00
parent 7be88c798f
commit 3efee9fb61
3 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Header/index.tsx
View File

@ -50,7 +50,7 @@ function Header() {
</div> </div>
<div className={`nav-container ${!dropdown ? "nav-container-disabled" : ""}`}> <div className={`nav-container ${!dropdown ? "nav-container-disabled" : ""}`}>
{dropdown && {dropdown &&
<a href="#" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Home</a> <a href="/" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Home</a>
} }
<a href="/best-places" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Top Places</a> <a href="/best-places" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Top Places</a>
<a href="/discover" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a> <a href="/discover" className={`navLink ${!dropdown ? "navLink-disabled" : ""}`}>Discover</a>

32
src/pages/BestLocations/index.tsx
View File

@ -130,24 +130,28 @@ function BestLocation() {
<div className={'mr-5'} style={{ flex: 1}}> <div className={'mr-5'} style={{ flex: 1}}>
{topLocations.map(x => ( {topLocations.map(x => (
<> <>
<div style={{ float: 'right', cursor: 'pointer' }}> {/* UNCOMMENT....IF THERES A PURPOSE FOR RIGHT THREE DOTS */}
{/* <div style={{ float: 'right', cursor: 'pointer' }}>
<a className={'text-xl'}> <a className={'text-xl'}>
... ...
</a> </a>
</div> </div> */}
<div className={'mb-2'}> <div className={'mb-2 best-locations-title'}>
<p className={'text-xl'}>{x.row_number}.{x.name}</p> <a className={'text-xl'} href={`/location/${x.id}`}>{x.row_number}.{x.name}</a>
</div> </div>
<div style={{ maxWidth: 200, maxHeight: 200, margin: '0 30px 30px 10px', float: 'left' }}> <div style={{ maxWidth: 200, maxHeight: 200, margin: '0 30px 30px 10px', float: 'left' }}>
<img src={x.thumbnail.String.toString()} style={{ width: '100%', objectFit: 'cover', height: 200 }} /> <a href={`/location/${x.id}`}>
<img src={x.thumbnail.String.toString()} style={{ width: '100%', objectFit: 'cover', height: '100%', aspectRatio: '1/1' }} />
</a>
</div> </div>
<div>{x.address}</div> <div className={'text-md font-bold'}>{x.regency_name}</div>
<div className={'text-xs mb-2'}>{x.address}</div>
<div>$$$ (IDR 1000-12000)</div> <div>$$$ (IDR 1000-12000)</div>
<div><a href={x.google_maps_link} target={'_'}> Maps </a></div> <a href={x.google_maps_link} target={'_'}><div className={'text-sm mt-2 items-center'}><svg style={{ display: 'inline-block', marginBottom: 3}} xmlns="http://www.w3.org/2000/svg" height="12" fill={'white'} viewBox="0 -960 960 960" width="12 "><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>Maps Location</div></a>
<div className={'mt-6'}> <div className={'mt-4'}>
<div className={'text-xs bg-secondary'} style={{ width: 160, display: 'inline-block', borderRadius: 7 }}> <div className={'text-xs bg-secondary'} style={{ width: 160, display: 'inline-block', borderRadius: 5 }}>
<div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopRightRadius: 7, borderTopLeftRadius: 7}}>CRITICS SCORE</div> <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopRightRadius: 5, borderTopLeftRadius: 5}}>CRITICS SCORE</div>
<div className={"flex flex-row items-center p-3"}> <div className={"flex flex-row items-center p-2"}>
<div className={'mr-3 users-score-bar'}> <div className={'mr-3 users-score-bar'}>
<p className={`text-xl text-center ${x.critic_score.Valid ? 'font-bold' : ''}`}>{x.critic_score.Valid ? Number(x.critic_score.Int32) / Number(x.critic_count) * 10 : "N/A"}</p> <p className={`text-xl text-center ${x.critic_score.Valid ? 'font-bold' : ''}`}>{x.critic_score.Valid ? Number(x.critic_score.Int32) / Number(x.critic_count) * 10 : "N/A"}</p>
<div className={"mt-1"} style={{ height: 4, width: 40, backgroundColor: "#72767d" }}> <div className={"mt-1"} style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
@ -157,9 +161,9 @@ function BestLocation() {
<p className={'text-xs users-score'}>{x.critic_count} reviews</p> <p className={'text-xs users-score'}>{x.critic_count} reviews</p>
</div> </div>
</div> </div>
<div className={'text-xs bg-secondary ml-3'} style={{ width: 160, display: 'inline-block', borderRadius: 7 }}> <div className={'text-xs bg-secondary ml-3'} style={{ width: 160, display: 'inline-block', borderRadius: 5 }}>
<div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopLeftRadius: 7, borderTopRightRadius: 7}}>USERS SCORE</div> <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopLeftRadius: 5, borderTopRightRadius: 5}}>USERS SCORE</div>
<div className={"flex flex-row items-center p-3"}> <div className={"flex flex-row items-center p-2"}>
<div className={'mr-3 users-score-bar'}> <div className={'mr-3 users-score-bar'}>
<p className={`text-xl text-center ${x.user_score.Valid ? 'font-bold' : ''}`}>{x.user_score.Valid ? x.user_score.Int32 : "N/A" }</p> <p className={`text-xl text-center ${x.user_score.Valid ? 'font-bold' : ''}`}>{x.user_score.Valid ? x.user_score.Int32 : "N/A" }</p>
<div className={"mt-1"} style={{ height: 4, width: 40, backgroundColor: "#72767d" }}> <div className={"mt-1"} style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>

6
src/pages/BestLocations/style.css
View File

@ -17,6 +17,12 @@
z-index: 1; z-index: 1;
} }
.best-locations-title a:hover {
cursor: pointer;
color: white;
border-bottom: 1px solid white;
}
.regions-dropdown:hover .dropdown-content { .regions-dropdown:hover .dropdown-content {
display: block; display: block;
} }