49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import Image from '../../Image'
|
|
|
|
import { TripAdvisorChip } from '../../TripAdvisorChip'
|
|
import { hotelCardDialogImageVariants } from './variants'
|
|
|
|
import ImageFallback from '../../ImageFallback'
|
|
|
|
export type HotelCardDialogImageProps = {
|
|
imageSrc?: string
|
|
altText?: string
|
|
rating?: { tripAdvisor?: number | null }
|
|
imageError: boolean
|
|
setImageError: (error: boolean) => void
|
|
position: 'top' | 'left'
|
|
}
|
|
|
|
export function HotelCardDialogImage({
|
|
imageSrc,
|
|
altText,
|
|
rating,
|
|
imageError,
|
|
setImageError,
|
|
position,
|
|
}: HotelCardDialogImageProps) {
|
|
const classNames = hotelCardDialogImageVariants({ position })
|
|
|
|
return (
|
|
<div className={classNames}>
|
|
{!imageSrc || imageError ? (
|
|
<ImageFallback />
|
|
) : (
|
|
<Image
|
|
src={imageSrc}
|
|
alt={altText || ''}
|
|
fill
|
|
sizes={position === 'top' ? '200px' : '450px'}
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
)}
|
|
{rating?.tripAdvisor && (
|
|
<TripAdvisorChip
|
|
rating={rating.tripAdvisor}
|
|
size={position === 'top' ? 'small' : 'default'}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|