mirror of
https://github.com/velocitatem/PHANTOM.git
synced 2026-05-31 08:33:36 +00:00
refactored design
This commit is contained in:
@@ -10,73 +10,65 @@ 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>
|
||||||
|
|
||||||
<div>
|
{/* Details Section */}
|
||||||
<h1 className="text-3xl font-bold mb-2">{product.flightType}</h1>
|
<div className="flex-1 flex flex-col">
|
||||||
<p className="text-lg text-gray-600">{product.cabinClass} Class</p>
|
<div className="flex justify-between items-start border-b pb-6 mb-6">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-6">
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-2">Departure</h3>
|
|
||||||
<p className="text-xl font-bold">{product.departure.time}</p>
|
|
||||||
<p className="text-gray-600">{product.departure.airport}</p>
|
|
||||||
</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 className="grid grid-cols-3 gap-4 py-4 border-y">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Duration</p>
|
|
||||||
<p className="font-semibold">{product.duration}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Stops</p>
|
|
||||||
<p className="font-semibold">
|
|
||||||
{product.stops === 0 ? 'Nonstop' : `${product.stops} stop${product.stops > 1 ? 's' : ''}`}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Availability</p>
|
|
||||||
<p className="font-semibold">{product.availability} seats</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-2">Fare Details</h3>
|
|
||||||
<p className="text-sm text-gray-600 mb-1">{product.fareRule}</p>
|
|
||||||
{product.refundable && (
|
|
||||||
<div className="bg-green-50 border border-green-200 rounded-lg p-3 mt-2">
|
|
||||||
<p className="text-green-800 text-sm font-medium">Refundable fare</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t pt-4">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-gray-600">Total price</p>
|
<h1 className="text-3xl font-bold text-gray-900 mb-1">{product.flightType}</h1>
|
||||||
<p className="text-3xl font-bold">${product.basePrice}</p>
|
<p className="text-lg text-gray-500">{product.cabinClass} Class</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-4xl font-bold text-gray-900">${product.basePrice}</p>
|
||||||
|
{product.refundable && (
|
||||||
|
<span className="inline-block mt-2 px-3 py-1 bg-green-50 text-green-700 rounded-full text-xs font-medium">
|
||||||
|
Refundable
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-4">
|
<div className="flex items-center justify-between mb-10">
|
||||||
<button
|
<div className="text-center min-w-[100px]">
|
||||||
onClick={onAddToCart}
|
<p className="text-3xl font-bold text-gray-900">{product.departure.time}</p>
|
||||||
disabled={addedToCart}
|
<p className="text-sm text-gray-500 font-medium mt-1">{product.departure.airport}</p>
|
||||||
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"
|
</div>
|
||||||
>
|
|
||||||
{addedToCart ? 'Added to Cart!' : 'Add to Cart'}
|
<div className="flex-1 px-8 flex flex-col items-center">
|
||||||
</button>
|
<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' : ''}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center min-w-[100px]">
|
||||||
|
<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 className="mt-auto flex items-center justify-between pt-6 border-t">
|
||||||
|
<div className="text-gray-600">
|
||||||
|
<span className="font-bold text-gray-900">{product.availability}</span> seats remaining
|
||||||
|
<span className="mx-2">•</span>
|
||||||
|
{product.fareRule}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onAddToCart}
|
||||||
|
disabled={addedToCart}
|
||||||
|
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 ? 'In Cart' : 'Add to Cart'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -10,64 +10,64 @@ 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">
|
||||||
</div>
|
<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 className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-1">Check-in</h3>
|
|
||||||
<p>{product.checkIn}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold mb-1">Check-out</h3>
|
|
||||||
<p>{product.checkOut}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div className="grid grid-cols-2 gap-8 mb-8">
|
||||||
<h3 className="font-semibold mb-2">Amenities</h3>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{product.amenities.map(a => (
|
|
||||||
<span key={a} className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
|
|
||||||
{a}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{product.refundable && (
|
|
||||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
|
||||||
<p className="text-green-800 font-medium">Free cancellation available</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="border-t pt-4">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-gray-600">Price per night</p>
|
<h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-2">Check-in</h3>
|
||||||
<p className="text-3xl font-bold">${product.pricePerNight}</p>
|
<p className="text-lg text-gray-700">{product.checkIn}</p>
|
||||||
<p className="text-sm text-gray-500">
|
</div>
|
||||||
Total for {product.nights} night{product.nights > 1 ? 's' : ''}: ${product.pricePerNight * product.nights}
|
<div>
|
||||||
</p>
|
<h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-2">Check-out</h3>
|
||||||
|
<p className="text-lg text-gray-700">{product.checkOut}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-4">
|
<div className="mb-8">
|
||||||
<button
|
<h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Amenities</h3>
|
||||||
onClick={onAddToCart}
|
<div className="flex flex-wrap gap-3">
|
||||||
disabled={addedToCart}
|
{product.amenities.map(a => (
|
||||||
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"
|
<span key={a} className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
|
||||||
>
|
{a}
|
||||||
{addedToCart ? 'Added to Cart!' : 'Add to Cart'}
|
</span>
|
||||||
</button>
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{product.refundable && (
|
||||||
|
<div className="mb-8 p-4 bg-green-50 text-green-800 rounded-md inline-block">
|
||||||
|
<span className="font-medium">Free cancellation available</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-auto pt-6 border-t flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-500 mb-1">Total for {product.nights} night{product.nights > 1 ? 's' : ''}</p>
|
||||||
|
<div className="flex items-baseline gap-2">
|
||||||
|
<span className="text-4xl font-bold text-gray-900">${product.pricePerNight * product.nights}</span>
|
||||||
|
<span className="text-gray-500">/ {product.nights} nights</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onAddToCart}
|
||||||
|
disabled={addedToCart}
|
||||||
|
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 ? 'In Cart' : 'Add to Cart'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user