feat: improve images of hotel rooms

This commit is contained in:
2026-01-13 15:26:16 +01:00
parent 07fb861723
commit 4ea390e78e
2 changed files with 4 additions and 6 deletions

View File

@@ -2,6 +2,7 @@
import type { EventName } from '@/lib/events'; import type { EventName } from '@/lib/events';
import type { Hotel } from '@/lib/hotel-utils'; import type { Hotel } from '@/lib/hotel-utils';
import { getHotelImageUrl } from '@/lib/hotel-utils';
import { useHoverTracking } from '@/hooks/useHoverTracking'; import { useHoverTracking } from '@/hooks/useHoverTracking';
import PriceDisplay from '@/components/ui/PriceDisplay'; import PriceDisplay from '@/components/ui/PriceDisplay';
@@ -47,8 +48,6 @@ export default function HotelCard({ hotel }: { hotel: Hotel }) {
window.location.href = `/hotel/products/${hotel.id}`; window.location.href = `/hotel/products/${hotel.id}`;
}; };
const imageUrl = `https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400&h=300&fit=crop`;
return ( return (
<div <div
className="hotel-card cursor-pointer" className="hotel-card cursor-pointer"
@@ -56,7 +55,7 @@ export default function HotelCard({ hotel }: { hotel: Hotel }) {
> >
<div className="hotel-image relative overflow-hidden"> <div className="hotel-image relative overflow-hidden">
<img <img
src={imageUrl} src={getHotelImageUrl(hotel.id, { w: 400, h: 300 })}
alt={hotel.name} alt={hotel.name}
className="w-full h-full object-cover" className="w-full h-full object-cover"
onError={(e) => { onError={(e) => {

View File

@@ -2,6 +2,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import type { Hotel } from '@/lib/hotel-utils'; import type { Hotel } from '@/lib/hotel-utils';
import { getHotelImageUrl } from '@/lib/hotel-utils';
import PriceDisplay from '@/components/ui/PriceDisplay'; import PriceDisplay from '@/components/ui/PriceDisplay';
interface HotelDetailsProps { interface HotelDetailsProps {
@@ -43,13 +44,11 @@ const PriceTotalDisplay = ({ productId, nights }: { productId: string; nights: n
}; };
export default function HotelDetails({ product, onAddToCart, addedToCart }: HotelDetailsProps) { export default function HotelDetails({ product, onAddToCart, addedToCart }: HotelDetailsProps) {
const imageUrl = `https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800&h=600&fit=crop`;
return ( return (
<div className="w-full flex flex-col lg:flex-row gap-12 py-8"> <div className="w-full flex flex-col lg:flex-row gap-12 py-8">
<div className="w-full lg:w-1/2 rounded-lg aspect-[4/3] overflow-hidden shrink-0"> <div className="w-full lg:w-1/2 rounded-lg aspect-[4/3] overflow-hidden shrink-0">
<img <img
src={imageUrl} src={getHotelImageUrl(product.id, { w: 800, h: 600 })}
alt={product.name} alt={product.name}
className="w-full h-full object-cover" className="w-full h-full object-cover"
onError={(e) => { onError={(e) => {