velocitatem/PHANTOM
1
0
Fork 0
mirror of https://github.com/velocitatem/PHANTOM.git synced 2026-05-31 08:33:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactored design

Browse Source
This commit is contained in:
Daniel Rosel
2025-11-24 23:49:31 +01:00
parent bdc2ea86a2
commit e301110184
2 changed files with 103 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
web/src/components/feats/airline/AirlineDetails.tsx
View File

@@ -10,74 +10,66 @@ interface AirlineDetailsProps {
export default function AirlineDetails({ product, onAddToCart, addedToCart }: AirlineDetailsProps) { export default function AirlineDetails({ product, onAddToCart, addedToCart }: AirlineDetailsProps) {
return ( return (
<div className="space-y-6"> <div className="w-full flex flex-col lg:flex-row gap-12 py-8">
<div className="bg-gray-100 h-64 flex items-center justify-center rounded-lg"> {/* Image Section */}
<span className="text-gray-400">Flight Image</span> <div className="w-full lg:w-1/3 bg-gray-100 rounded-lg aspect-square flex items-center justify-center shrink-0">
<span className="text-gray-400 text-lg font-medium">Flight Image</span>
</div> </div>
{/* Details Section */}
<div className="flex-1 flex flex-col">
<div className="flex justify-between items-start border-b pb-6 mb-6">
<div> <div>
<h1 className="text-3xl font-bold mb-2">{product.flightType}</h1> <h1 className="text-3xl font-bold text-gray-900 mb-1">{product.flightType}</h1>
<p className="text-lg text-gray-600">{product.cabinClass} Class</p> <p className="text-lg text-gray-500">{product.cabinClass} Class</p>
</div> </div>
<div className="text-right">
<div className="grid grid-cols-2 gap-6"> <p className="text-4xl font-bold text-gray-900">${product.basePrice}</p>
<div> {product.refundable && (
<h3 className="font-semibold mb-2">Departure</h3> <span className="inline-block mt-2 px-3 py-1 bg-green-50 text-green-700 rounded-full text-xs font-medium">
<p className="text-xl font-bold">{product.departure.time}</p> Refundable
<p className="text-gray-600">{product.departure.airport}</p> </span>
</div> )}
<div>
<h3 className="font-semibold mb-2">Arrival</h3>
<p className="text-xl font-bold">{product.arrival.time}</p>
<p className="text-gray-600">{product.arrival.airport}</p>
</div> </div>
</div> </div>
<div className="grid grid-cols-3 gap-4 py-4 border-y"> <div className="flex items-center justify-between mb-10">
<div> <div className="text-center min-w-[100px]">
<p className="text-sm text-gray-600">Duration</p> <p className="text-3xl font-bold text-gray-900">{product.departure.time}</p>
<p className="font-semibold">{product.duration}</p> <p className="text-sm text-gray-500 font-medium mt-1">{product.departure.airport}</p>
</div> </div>
<div>
<p className="text-sm text-gray-600">Stops</p> <div className="flex-1 px-8 flex flex-col items-center">
<p className="font-semibold"> <p className="text-sm text-gray-500 mb-2">{product.duration}</p>
<div className="w-full h-0.5 bg-gray-200 relative flex items-center justify-center">
<div className="absolute w-3 h-3 bg-gray-400 rounded-full"></div>
</div>
<p className="text-sm text-gray-500 mt-2">
{product.stops === 0 ? 'Nonstop' : `${product.stops} stop${product.stops > 1 ? 's' : ''}`} {product.stops === 0 ? 'Nonstop' : `${product.stops} stop${product.stops > 1 ? 's' : ''}`}
</p> </p>
</div> </div>
<div>
<p className="text-sm text-gray-600">Availability</p> <div className="text-center min-w-[100px]">
<p className="font-semibold">{product.availability} seats</p> <p className="text-3xl font-bold text-gray-900">{product.arrival.time}</p>
<p className="text-sm text-gray-500 font-medium mt-1">{product.arrival.airport}</p>
</div> </div>
</div> </div>
<div> <div className="mt-auto flex items-center justify-between pt-6 border-t">
<h3 className="font-semibold mb-2">Fare Details</h3> <div className="text-gray-600">
<p className="text-sm text-gray-600 mb-1">{product.fareRule}</p> <span className="font-bold text-gray-900">{product.availability}</span> seats remaining
{product.refundable && ( <span className="mx-2">•</span>
<div className="bg-green-50 border border-green-200 rounded-lg p-3 mt-2"> {product.fareRule}
<p className="text-green-800 text-sm font-medium">Refundable fare</p>
</div> </div>
)}
</div>
<div className="border-t pt-4">
<div className="flex justify-between items-center">
<div>
<p className="text-sm text-gray-600">Total price</p>
<p className="text-3xl font-bold">${product.basePrice}</p>
</div>
</div>
</div>
<div className="flex gap-4">
<button <button
onClick={onAddToCart} onClick={onAddToCart}
disabled={addedToCart} disabled={addedToCart}
className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-green-600 text-white rounded-lg font-medium transition-colors" className="px-8 py-4 bg-black hover:bg-gray-800 disabled:bg-green-600 text-white rounded-lg text-lg font-medium transition-all min-w-[200px]"
> >
{addedToCart ? 'Added to Cart!' : 'Add to Cart'} {addedToCart ? 'In Cart' : 'Add to Cart'}
</button> </button>
</div> </div>
</div> </div>
</div>
); );
} }

56
web/src/components/feats/hotel/HotelDetails.tsx
View File

@@ -10,32 +10,35 @@ interface HotelDetailsProps {
export default function HotelDetails({ product, onAddToCart, addedToCart }: HotelDetailsProps) { export default function HotelDetails({ product, onAddToCart, addedToCart }: HotelDetailsProps) {
return ( return (
<div className="space-y-6"> <div className="w-full flex flex-col lg:flex-row gap-12 py-8">
<div className="bg-gray-100 h-64 flex items-center justify-center rounded-lg"> {/* Image Section - Larger and cleaner */}
<span className="text-gray-400">Hotel Image</span> <div className="w-full lg:w-1/2 bg-gray-100 rounded-lg aspect-[4/3] flex items-center justify-center shrink-0">
<span className="text-gray-400 text-lg font-medium">Hotel Image</span>
</div> </div>
<div> {/* Details Section - Full height/width usage */}
<h1 className="text-3xl font-bold mb-2">{product.name}</h1> <div className="flex-1 flex flex-col">
<p className="text-lg text-gray-600">{product.roomType}</p> <div className="border-b pb-6 mb-6">
<h1 className="text-4xl font-bold text-gray-900 mb-2">{product.name}</h1>
<p className="text-xl text-gray-500">{product.roomType}</p>
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-8 mb-8">
<div> <div>
<h3 className="font-semibold mb-1">Check-in</h3> <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-2">Check-in</h3>
<p>{product.checkIn}</p> <p className="text-lg text-gray-700">{product.checkIn}</p>
</div> </div>
<div> <div>
<h3 className="font-semibold mb-1">Check-out</h3> <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-2">Check-out</h3>
<p>{product.checkOut}</p> <p className="text-lg text-gray-700">{product.checkOut}</p>
</div> </div>
</div> </div>
<div> <div className="mb-8">
<h3 className="font-semibold mb-2">Amenities</h3> <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Amenities</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-3">
{product.amenities.map(a => ( {product.amenities.map(a => (
<span key={a} className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"> <span key={a} className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
{a} {a}
</span> </span>
))} ))}
@@ -43,32 +46,29 @@ export default function HotelDetails({ product, onAddToCart, addedToCart }: Hote
</div> </div>
{product.refundable && ( {product.refundable && (
<div className="bg-green-50 border border-green-200 rounded-lg p-4"> <div className="mb-8 p-4 bg-green-50 text-green-800 rounded-md inline-block">
<p className="text-green-800 font-medium">Free cancellation available</p> <span className="font-medium">Free cancellation available</span>
</div> </div>
)} )}
<div className="border-t pt-4"> <div className="mt-auto pt-6 border-t flex items-center justify-between">
<div className="flex justify-between items-center">
<div> <div>
<p className="text-sm text-gray-600">Price per night</p> <p className="text-sm text-gray-500 mb-1">Total for {product.nights} night{product.nights > 1 ? 's' : ''}</p>
<p className="text-3xl font-bold">${product.pricePerNight}</p> <div className="flex items-baseline gap-2">
<p className="text-sm text-gray-500"> <span className="text-4xl font-bold text-gray-900">${product.pricePerNight * product.nights}</span>
Total for {product.nights} night{product.nights > 1 ? 's' : ''}: ${product.pricePerNight * product.nights} <span className="text-gray-500">/ {product.nights} nights</span>
</p>
</div>
</div> </div>
</div> </div>
<div className="flex gap-4">
<button <button
onClick={onAddToCart} onClick={onAddToCart}
disabled={addedToCart} disabled={addedToCart}
className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-green-600 text-white rounded-lg font-medium transition-colors" className="px-8 py-4 bg-black hover:bg-gray-800 disabled:bg-green-600 text-white rounded-lg text-lg font-medium transition-all min-w-[200px]"
> >
{addedToCart ? 'Added to Cart!' : 'Add to Cart'} {addedToCart ? 'In Cart' : 'Add to Cart'}
</button> </button>
</div> </div>
</div> </div>
</div>
); );
} }