updates
This commit is contained in:
Iliyan Angelov
@@ -6,7 +6,7 @@ import RoomFilter from '../../components/rooms/RoomFilter';
|
||||
import RoomCard from '../../components/rooms/RoomCard';
|
||||
import RoomCardSkeleton from '../../components/rooms/RoomCardSkeleton';
|
||||
import Pagination from '../../components/rooms/Pagination';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { ArrowLeft, Sparkles, Hotel } from 'lucide-react';
|
||||
|
||||
const RoomListPage: React.FC = () => {
|
||||
const [searchParams] = useSearchParams();
|
||||
@@ -66,35 +66,51 @@ const RoomListPage: React.FC = () => {
|
||||
}, [searchParams]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50/30 to-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 py-8">
|
||||
<div className="min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f]">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Back Button */}
|
||||
<Link
|
||||
to="/"
|
||||
className="inline-flex items-center gap-2 btn-enterprise-secondary mb-8 animate-fade-in"
|
||||
className="inline-flex items-center gap-2
|
||||
text-[#d4af37]/80 hover:text-[#d4af37]
|
||||
mb-10 transition-all duration-300
|
||||
group font-light tracking-wide"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
|
||||
<span>Back to home</span>
|
||||
</Link>
|
||||
|
||||
<div className="mb-10 text-center animate-fade-in">
|
||||
<h1 className="enterprise-section-title">
|
||||
Room List
|
||||
{/* Page Header */}
|
||||
<div className="mb-12 text-center">
|
||||
<div className="inline-flex items-center justify-center gap-3 mb-6">
|
||||
<div className="p-3 bg-[#d4af37]/10 rounded-xl border border-[#d4af37]/30">
|
||||
<Hotel className="w-8 h-8 text-[#d4af37]" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-5xl font-serif font-semibold
|
||||
text-white mb-4 tracking-tight leading-tight
|
||||
bg-gradient-to-r from-white via-[#d4af37] to-white
|
||||
bg-clip-text text-transparent"
|
||||
>
|
||||
Our Rooms & Suites
|
||||
</h1>
|
||||
<p className="enterprise-section-subtitle mt-2">
|
||||
Browse our available accommodations
|
||||
<p className="text-gray-400 font-light tracking-wide text-lg max-w-2xl mx-auto">
|
||||
Discover our collection of luxurious accommodations,
|
||||
each designed to provide an exceptional stay
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-10">
|
||||
<aside className="lg:col-span-1">
|
||||
<div className="sticky top-6">
|
||||
<RoomFilter />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="lg:col-span-3">
|
||||
{loading && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2
|
||||
xl:grid-cols-3 gap-6"
|
||||
xl:grid-cols-2 gap-8"
|
||||
>
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<RoomCardSkeleton key={index} />
|
||||
@@ -103,13 +119,15 @@ const RoomListPage: React.FC = () => {
|
||||
)}
|
||||
|
||||
{error && !loading && (
|
||||
<div className="enterprise-card p-8 text-center animate-fade-in
|
||||
border-red-200 bg-gradient-to-br from-red-50 to-red-100/50"
|
||||
<div className="bg-gradient-to-br from-red-900/20 to-red-800/10
|
||||
border border-red-500/30 rounded-xl p-12 text-center
|
||||
backdrop-blur-xl shadow-2xl shadow-red-500/10"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-16 h-16
|
||||
bg-red-100 rounded-full mb-4">
|
||||
<div className="inline-flex items-center justify-center w-20 h-20
|
||||
bg-red-500/20 rounded-full mb-6 border border-red-500/30"
|
||||
>
|
||||
<svg
|
||||
className="w-8 h-8 text-red-600"
|
||||
className="w-10 h-10 text-red-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -123,14 +141,13 @@ const RoomListPage: React.FC = () => {
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-red-800 font-semibold text-lg mb-2">{error}</p>
|
||||
<p className="text-red-300 font-light text-lg mb-6 tracking-wide">{error}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-4 px-6 py-2.5 bg-gradient-to-r from-red-600 to-red-700
|
||||
text-white rounded-lg font-semibold
|
||||
hover:from-red-700 hover:to-red-800
|
||||
transition-all duration-300 shadow-lg shadow-red-500/30
|
||||
hover:shadow-xl hover:shadow-red-500/40 hover:-translate-y-0.5"
|
||||
className="px-8 py-3 bg-gradient-to-r from-[#d4af37] to-[#c9a227]
|
||||
text-[#0f0f0f] rounded-sm font-medium tracking-wide
|
||||
hover:from-[#f5d76e] hover:to-[#d4af37]
|
||||
transition-all duration-300 shadow-lg shadow-[#d4af37]/30"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
@@ -138,37 +155,29 @@ const RoomListPage: React.FC = () => {
|
||||
)}
|
||||
|
||||
{!loading && !error && rooms.length === 0 && (
|
||||
<div className="enterprise-card p-12 text-center animate-fade-in"
|
||||
<div className="bg-gradient-to-br from-[#1a1a1a] to-[#0a0a0a]
|
||||
border border-[#d4af37]/20 rounded-xl p-16 text-center
|
||||
backdrop-blur-xl shadow-2xl shadow-[#d4af37]/5"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-24 h-24
|
||||
bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl mb-6">
|
||||
<svg
|
||||
className="w-12 h-12 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={1.5}
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14
|
||||
0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1
|
||||
4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
|
||||
/>
|
||||
</svg>
|
||||
bg-[#d4af37]/10 rounded-2xl mb-8 border border-[#d4af37]/30"
|
||||
>
|
||||
<Hotel className="w-12 h-12 text-[#d4af37]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold
|
||||
text-gray-900 mb-2"
|
||||
<h3 className="text-2xl font-serif font-semibold
|
||||
text-white mb-4 tracking-wide"
|
||||
>
|
||||
No matching rooms found
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
<p className="text-gray-400 font-light tracking-wide mb-8 text-lg">
|
||||
Please try adjusting the filters or search differently
|
||||
</p>
|
||||
<button
|
||||
onClick={() => window.location.href = '/rooms'}
|
||||
className="btn-enterprise-primary"
|
||||
className="px-8 py-3 bg-gradient-to-r from-[#d4af37] to-[#c9a227]
|
||||
text-[#0f0f0f] rounded-sm font-medium tracking-wide
|
||||
hover:from-[#f5d76e] hover:to-[#d4af37]
|
||||
transition-all duration-300 shadow-lg shadow-[#d4af37]/30"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
@@ -177,18 +186,30 @@ const RoomListPage: React.FC = () => {
|
||||
|
||||
{!loading && !error && rooms.length > 0 && (
|
||||
<>
|
||||
{/* Results Count */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<p className="text-gray-400 font-light tracking-wide">
|
||||
Showing <span className="text-[#d4af37] font-medium">{rooms.length}</span> of{' '}
|
||||
<span className="text-[#d4af37] font-medium">{pagination.total}</span> rooms
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2
|
||||
xl:grid-cols-2 gap-6"
|
||||
xl:grid-cols-2 gap-8 mb-10"
|
||||
>
|
||||
{rooms.map((room) => (
|
||||
<RoomCard key={room.id} room={room} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{pagination.totalPages > 1 && (
|
||||
<div className="mt-10 pt-8 border-t border-[#d4af37]/20">
|
||||
<Pagination
|
||||
currentPage={pagination.page}
|
||||
totalPages={pagination.totalPages}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user