75 lines
2.9 KiB
TypeScript
Executable File
75 lines
2.9 KiB
TypeScript
Executable File
import { JSXInternal } from "node_modules/preact/src/jsx";
|
|
import { LocationInfo } from "../../../domains";
|
|
import { cn } from "../../../utils/common";
|
|
import FallbackImage from "../../../../src/components/Img/FallbackImage";
|
|
|
|
interface ComponentProps {
|
|
onCardClick: (id: number) => void,
|
|
data: LocationInfo,
|
|
containerClass?: string,
|
|
containerStyle?: JSXInternal.CSSProperties
|
|
}
|
|
|
|
const LocationCard = (props: ComponentProps) => {
|
|
const getScoreClasses = (score: number, count: number) => {
|
|
if (count === 0) return {
|
|
text: 'text-white',
|
|
bg: 'bg-white'
|
|
};
|
|
|
|
if (score <= 40) return {
|
|
text: 'text-rating-red',
|
|
bg: 'bg-rating-red'
|
|
};
|
|
if (score <= 69) return {
|
|
text: 'text-rating-yellow',
|
|
bg: 'bg-rating-yellow'
|
|
};
|
|
return {
|
|
text: 'text-brand-green',
|
|
bg: 'bg-brand-green'
|
|
};
|
|
};
|
|
|
|
const criticClasses = getScoreClasses(props.data.critic_score, props.data.critic_count);
|
|
const userClasses = getScoreClasses(props.data.user_score, props.data.user_count);
|
|
|
|
return (
|
|
<div className={props.containerClass} style={props.containerStyle}>
|
|
<a onClick={() => props.onCardClick(props.data.id)}>
|
|
<div className={'border-secondary recently-img-container'}>
|
|
<FallbackImage
|
|
thumbnail={props.data.thumbnail}
|
|
locationType={props.data.location_type}
|
|
alt={props.data.name}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
</a>
|
|
<div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
|
|
<p className={'location-title'}>{props.data.name}</p>
|
|
<p className={'text-xs mt-1 h-8 line-clamp-2'}>{props.data.regency_name}, {props.data.province_name}</p>
|
|
</div>
|
|
<div className={"flex flex-row items-center mb-3"}>
|
|
<div className={'mr-3 users-score-bar'}>
|
|
<p className={cn('text-md text-center', criticClasses.text)}>{props.data.critic_count !== 0 ? props.data.critic_score : 'NR'}</p>
|
|
<div className="h-1 w-[30px] bg-[#72767d] rounded-full overflow-hidden">
|
|
<div className={cn('h-full rounded-full', criticClasses.bg)} style={{ width: `${props.data.critic_score}%` }} />
|
|
</div>
|
|
</div>
|
|
<p className={"users-score"}>Critic score ({props.data.critic_count})</p>
|
|
</div>
|
|
<div className={"flex flex-row items-center"}>
|
|
<div className={'mr-3 users-score-bar'}>
|
|
<p className={cn('text-md text-center', userClasses.text)}>{props.data.user_count !== 0 ? props.data.user_score : 'NR'}</p>
|
|
<div className="h-1 w-[30px] bg-[#72767d] rounded-full overflow-hidden">
|
|
<div className={cn('h-full rounded-full', userClasses.bg)} style={{ width: `${props.data.user_score}%` }} />
|
|
</div>
|
|
</div>
|
|
<p className={'users-score'}>User score ({props.data.user_count})</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LocationCard; |