219 lines
11 KiB
TypeScript
Executable File
219 lines
11 KiB
TypeScript
Executable File
import { LocationCard, SeparatorWithAnchor } from '../../components';
|
|
import popular from '../../datas/popular.json';
|
|
import './style.css';
|
|
import { useHome } from './useHome';
|
|
import { User } from 'lucide-react';
|
|
|
|
function Home() {
|
|
const {
|
|
recentLocations,
|
|
topCriticsLocations,
|
|
topUsersLocations,
|
|
onNavigateToDetail,
|
|
} = useHome();
|
|
return (
|
|
<div className="content main-content mt-3">
|
|
|
|
{/* RECENTLY ADDED SECTION */}
|
|
<section about={"Recently added places"} className={'mt-3'}>
|
|
<SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
|
|
{recentLocations.map((x) => (
|
|
<LocationCard
|
|
containerClass='recently-added-section-card'
|
|
onCardClick={onNavigateToDetail}
|
|
data={x}
|
|
/>
|
|
// <div className={"recently-added-section-card"}>
|
|
// <a onClick={() => onNavigateToDetail(x.id)}>
|
|
// <div className={'border-secondary recently-img-container'}>
|
|
// <img alt={x.name} src={x.thumbnail ? x.thumbnail : ''} loading="lazy" style={{ width: '100%', height: '100%' }} />
|
|
// </div>
|
|
// </a>
|
|
// <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
|
|
// <p className={'location-title'}>{x.name}</p>
|
|
// <p className={'text-xs mt-1'}>{x.regency_name}, {x.province_name}</p>
|
|
// </div>
|
|
// {x.critic_count !== 0 &&
|
|
// <div className={"flex flex-row items-center mb-3"}>
|
|
// <div className={'mr-3 users-score-bar'}>
|
|
// <p className={'text-sm text-center'}>{x.critic_score}</p>
|
|
// <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
|
// <div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
|
|
// </div>
|
|
// </div>
|
|
// <p className={"users-score"}>critic score ({x.critic_count})</p>
|
|
// </div>
|
|
// }
|
|
// {x.user_score !== 0 &&
|
|
// <div className={"flex flex-row items-center"}>
|
|
// <div className={'mr-3 users-score-bar'}>
|
|
// <p className={'text-sm text-center'}>{x.user_score}</p>
|
|
// <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
|
// <div style={{ height: 4, width: ` ${x.user_score}%`, backgroundColor: 'green' }} />
|
|
// </div>
|
|
// </div>
|
|
// <p className={'users-score'}>user score ({x.user_count})</p>
|
|
// </div>
|
|
// }
|
|
// </div>
|
|
))}
|
|
</section>
|
|
{/* END RECENTLY ADDED SECTION */}
|
|
|
|
{/* START RECENT NEWS / EVENT SECTION */}
|
|
{/* USE OPEN GRAPH PARSER TO READ OG DATA FROM HTML */}
|
|
{/* https://github.com/dyatlov/go-opengraph */}
|
|
{/* <section className={"mt-10"}>
|
|
<SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
|
|
<div className={"mt-5"}>
|
|
{news.data.map((x: News) => (
|
|
<div class={"text-sm news-card"}>
|
|
<div className={"image-news-container"}>
|
|
<img src={x.thumbnail} loading={'lazy'} className={"news-img"} />
|
|
</div>
|
|
<a className={'news-link'} target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
|
|
<p className={'mt-2 mb-2'}>{x.header}</p>
|
|
<div className={"flex flex-row user-engagement"}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="18" viewBox="0 -960 960 960" width="18"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
|
|
<p className={"mr-3 ml-1"}>{x.likes_count}</p>
|
|
<svg style={{ marginTop: 2 }} stroke="currentColor" fill="white" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
|
|
<p className={"ml-1"}>{x.comments_count}</p>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</section> */}
|
|
{/* END RECENT NEWS / EVENT SECTION */}
|
|
|
|
{/* LOCATION CRITICS BEST AND USERS BEST SECTION */}
|
|
|
|
{/* <section className={"mt-10"}>
|
|
<SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
|
|
<div>
|
|
{popular_user_review.data.map((x) => (
|
|
<div className={'text-sm reviews-container'}>
|
|
<div style={{ float: 'left', width: 120, margin: '0 12px 10px 0' }}>
|
|
<img src={x.thumbnail} loading={'lazy'} style={{ width: '100%' }} />
|
|
</div>
|
|
<p className={"text-sm location-titles"}>{x.place_name}</p>
|
|
<p className={'text-xs mb-2'}>{x.location}</p>
|
|
<p className={'text-sm'}>{x.username}</p>
|
|
<div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
|
|
<p className={'text-xs ml-2 mt-1'}>{x.rating}</p>
|
|
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
|
<div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
|
|
</div>
|
|
</div>
|
|
<div style={{ clear: 'both' }} className={'mb-3'} />
|
|
<div className={'text-sm'}>
|
|
{x.message}
|
|
<a className={'text-tertiary ml-2'} style={{ cursor: 'pointer' }}>read more</a>
|
|
</div>
|
|
</div>
|
|
))
|
|
|
|
}
|
|
</div>
|
|
</section> */}
|
|
|
|
|
|
{/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
|
|
<section className={"mt-10 mb-10"}>
|
|
<div class={"grid grid-cols-4 lg:gap-12"}>
|
|
<div className={'col-span-4 lg:col-span-2 trending-section'}>
|
|
<SeparatorWithAnchor pageLink='#' pageName={"trending this month"}/>
|
|
<div className={'grid grid-cols-4 md:grid-cols-3'}>
|
|
{popular.data.map((x) => (
|
|
<div className={"m-2 text-sm col-span-2 md:col-span-1"}>
|
|
<div className={"mb-2 trending-image-container"}>
|
|
<img
|
|
src={x.thumbnail}
|
|
loading={"lazy"}
|
|
style={{ width: '100%', height: '100%' }}
|
|
onError={(e) => {
|
|
e.currentTarget.src = 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/public/upload/misty-forest-black-white.webp';
|
|
e.currentTarget.onerror = null;
|
|
}}
|
|
/>
|
|
</div >
|
|
<p className={"location-title"}>{x.name}</p>
|
|
<p className={"text-xs location-title"}>{x.location}</p>
|
|
<p className={"text-xs location-title"}>1.2k users visit this month</p>
|
|
<div>
|
|
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className={'col-span-2 lg:col-span-1'}>
|
|
<SeparatorWithAnchor pageLink='#' pageName={"2026 Critic's Best"} />
|
|
{topCriticsLocations.map((x) => (
|
|
<div className={"pt-2 text-sm top-location-container"}>
|
|
<div className={'mr-2 critics-users-image'}>
|
|
<img
|
|
src={x.thumbnail}
|
|
loading={'lazy'}
|
|
style={{ height: '100%', width: '100%', borderRadius: 3 }}
|
|
onError={(e) => {
|
|
e.currentTarget.src = x.location_type === 'culinary' ? 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/restaorunta.webp' : 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/public/upload/misty-forest-black-white.webp';
|
|
e.currentTarget.onerror = null;
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className={'location-title'}>{x.name}</p>
|
|
<p className={'text-xs location-province location-title'}>{x.regency_name}</p>
|
|
<div className={'flex items-center gam-1 mt-2'}>
|
|
<div>
|
|
<p className={'text-md text-center'}>{x.critic_score}</p>
|
|
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
|
<div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
|
|
</div>
|
|
</div>
|
|
<span className={'ml-2 text-gray text-sm flex items-center gap-1'}>({x.critic_count} <User size={16} />)</span>
|
|
</div>
|
|
<div style={{ clear: 'both' }} />
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div className={'col-span-2 lg:col-span-1'}>
|
|
<SeparatorWithAnchor pageLink='#' pageName={"2026 User's Best"} />
|
|
{topUsersLocations.map((x) => (
|
|
<div className={"pt-2 text-sm top-location-container"}>
|
|
<div className={'mr-2 critics-users-image'}>
|
|
<img
|
|
src={x.thumbnail}
|
|
loading={'lazy'}
|
|
style={{ height: '100%', width: '100%', borderRadius: 3 }}
|
|
onError={(e) => {
|
|
e.currentTarget.src = x.location_type === 'culinary' ? 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/restaorunta.webp' : 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/public/upload/misty-forest-black-white.webp';
|
|
e.currentTarget.onerror = null;
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className={'location-title'}>{x.name}</p>
|
|
<p className={'text-xs location-province location-title'}>{x.regency_name}</p>
|
|
<div className={'flex items-center gap-1 mt-2'}>
|
|
<div>
|
|
<p className={'text-sm text-center'}>{x.user_score}</p>
|
|
<div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
|
|
<div style={{ height: 4, width: `${x.user_score}%`, backgroundColor: 'green' }} />
|
|
</div>
|
|
</div>
|
|
<span className={'ml-2 text-gray text-sm flex items-center gap-1'}>({x.user_count} <User size={16} /> )</span>
|
|
</div>
|
|
<div style={{ clear: 'both' }} />
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
export default Home; |