hamid zarghami
160 lines
8.6 KiB
TypeScript
160 lines
8.6 KiB
TypeScript
export default function Loading() {
|
|
return (
|
|
<div>
|
|
{/* Hero Section Skeleton */}
|
|
<div className="relative rounded-4xl overflow-hidden">
|
|
<div className="w-full rounded-4xl object-cover xl:mt-14 mt-8 xl:min-h-[340px] min-h-[200px] bg-gray-200 animate-pulse"></div>
|
|
<div className="absolute bottom-0 h-[140px] w-full p-6">
|
|
<div className="h-6 w-3/4 bg-gray-300 rounded-md animate-pulse"></div>
|
|
<div className="h-4 w-5/6 bg-gray-300 rounded-md animate-pulse mt-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Secondary Hero Items */}
|
|
<div className="flex xl:flex-row flex-col gap-8 mt-10">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={`hero-item-${i}`} className="flex-1 bg-white rounded-4xl p-4 overflow-hidden animate-pulse">
|
|
<div className="h-40 w-full bg-gray-200 rounded-4xl"></div>
|
|
<div className="p-4">
|
|
<div className="h-5 w-4/5 bg-gray-200 rounded-md"></div>
|
|
<div className="mt-3 flex gap-2">
|
|
<div className="h-4 w-24 bg-gray-200 rounded-md"></div>
|
|
<div className="h-4 w-16 bg-gray-200 rounded-md"></div>
|
|
</div>
|
|
<div className="mt-3 flex justify-between items-center">
|
|
<div className="h-4 w-32 bg-gray-200 rounded-md"></div>
|
|
<div className="h-6 w-6 bg-gray-200 rounded-md"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Blog Title */}
|
|
<h1 className="text-2xl font-bold mt-10">
|
|
<div className="h-8 w-48 bg-gray-200 rounded-md animate-pulse"></div>
|
|
</h1>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="mt-10 flex xl:flex-row flex-col gap-8">
|
|
{/* Left Sidebar - Categories */}
|
|
<div className="xl:w-[261px] w-full">
|
|
<div className="w-full rounded-4xl bg-white p-4 animate-pulse">
|
|
<div className="h-6 w-36 bg-gray-200 rounded-md"></div>
|
|
|
|
<div className="flex flex-col gap-4 mt-7">
|
|
{[1, 2, 3, 4, 5, 6].map((i) => (
|
|
<div key={`cat-${i}`} className="h-10 bg-gray-200 rounded-xl p-2.5 flex items-center gap-2">
|
|
<div className="size-5 bg-gray-300 rounded-full"></div>
|
|
<div className="h-4 w-24 bg-gray-300 rounded-md"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center Content - Blog List */}
|
|
<div className="flex-1 flex flex-col gap-8">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={`blog-${i}`} className="w-full rounded-4xl bg-white p-7 flex xl:flex-row flex-col gap-6 animate-pulse">
|
|
<div className="size-[150px] bg-gray-200 rounded-4xl mx-auto xl:mx-0"></div>
|
|
<div className="flex-1">
|
|
<div className="h-5 w-3/4 bg-gray-200 rounded-md"></div>
|
|
|
|
<div className="mt-3 flex gap-3">
|
|
<div className="flex items-center gap-1">
|
|
<div className="size-[18px] bg-gray-200 rounded-full"></div>
|
|
<div className="h-4 w-20 bg-gray-200 rounded-md"></div>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<div className="size-[18px] bg-gray-200 rounded-full"></div>
|
|
<div className="h-4 w-24 bg-gray-200 rounded-md"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 space-y-2">
|
|
<div className="h-4 w-full bg-gray-200 rounded-md"></div>
|
|
<div className="h-4 w-full bg-gray-200 rounded-md"></div>
|
|
<div className="h-4 w-3/4 bg-gray-200 rounded-md"></div>
|
|
</div>
|
|
|
|
<div className="mt-3 flex gap-1 items-center">
|
|
<div className="h-4 w-24 bg-gray-200 rounded-md"></div>
|
|
<div className="size-[18px] bg-gray-200 rounded-md"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Sidebar */}
|
|
<div className="xl:w-[261px] w-full">
|
|
{/* Most Visited Widget */}
|
|
<div className="w-full rounded-4xl bg-white p-4 animate-pulse">
|
|
<div className="h-6 w-36 bg-gray-200 rounded-md"></div>
|
|
|
|
<div className="flex flex-col gap-6 mt-7">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={`most-visited-${i}`} className="flex gap-3">
|
|
<div className="size-16 bg-gray-200 rounded-lg"></div>
|
|
<div className="flex-1">
|
|
<div className="h-4 w-full bg-gray-200 rounded-md"></div>
|
|
<div className="h-3 w-16 bg-gray-200 rounded-md mt-2"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Us Widget */}
|
|
<div className="w-full rounded-4xl bg-white p-4 mt-6 animate-pulse">
|
|
<div className="h-6 w-28 bg-gray-200 rounded-md"></div>
|
|
|
|
<div className="flex gap-4 mt-6">
|
|
<div className="flex-1 bg-gray-200 rounded-xl p-4">
|
|
<div className="size-6 bg-gray-300 rounded-md"></div>
|
|
<div className="mt-1.5">
|
|
<div className="h-4 w-20 bg-gray-300 rounded-md"></div>
|
|
<div className="h-3 w-16 bg-gray-300 rounded-md mt-1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 bg-gray-200 rounded-xl p-4">
|
|
<div className="size-6 bg-gray-300 rounded-md"></div>
|
|
<div className="mt-1.5">
|
|
<div className="h-4 w-20 bg-gray-300 rounded-md"></div>
|
|
<div className="h-3 w-16 bg-gray-300 rounded-md mt-1"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-200 rounded-xl p-4 mt-4">
|
|
<div className="size-6 bg-gray-300 rounded-md"></div>
|
|
<div className="mt-1.5">
|
|
<div className="h-4 w-32 bg-gray-300 rounded-md"></div>
|
|
<div className="h-3 w-24 bg-gray-300 rounded-md mt-1"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Second Most Visited Widget */}
|
|
<div className="w-full rounded-4xl bg-white p-4 mt-6 animate-pulse">
|
|
<div className="h-6 w-36 bg-gray-200 rounded-md"></div>
|
|
|
|
<div className="flex flex-col gap-6 mt-7">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={`most-visited-2-${i}`} className="flex gap-3">
|
|
<div className="size-16 bg-gray-200 rounded-lg"></div>
|
|
<div className="flex-1">
|
|
<div className="h-4 w-full bg-gray-200 rounded-md"></div>
|
|
<div className="h-3 w-16 bg-gray-200 rounded-md mt-2"></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|