ae77fa3028
Refactor TripadvisorChip * feat: create new StaticChip componeny * refactor tripadvisor chip to use ChipStatic * refactor: use TripadvisorChip everywhere * fix: use withChipStatic Approved-by: Erik Tiekstra
51 lines
1.2 KiB
TypeScript
51 lines
1.2 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}
|
|
color="Neutral"
|
|
size={position === "top" ? "xs" : "sm"}
|
|
wrapper={position === "top" ? "x05" : "x15"}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|