classify web

components/PagesComponent/Seller/SellerSkeleton.jsx

@@ -0,0 +1,75 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+const SellerSkeleton = ({ steps }) => {
+  return (
+    <div className="container mx-auto mt-6">
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {/* Left Side - Seller Detail Card Skeleton */}
+        <div className="col-span-12 md:col-span-4">
+          <div className="bg-white rounded-lg shadow-sm border p-6">
+            <div className="flex flex-col items-center gap-4">
+              <Skeleton className="h-32 w-32 rounded-full" />
+              <Skeleton className="h-6 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+              <div className="flex gap-2">
+                {[1, 2, 3, 4, 5].map(i => (
+                  <Skeleton key={i} className="h-5 w-5 rounded-full" />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side - Content Skeleton */}
+        <div className="flex flex-col gap-4 col-span-12 md:col-span-8">
+          {/* Tabs Skeleton */}
+          <div className="p-4 flex items-center gap-4 bg-muted rounded-md w-full">
+            <Skeleton className="h-10 w-24" />
+            <Skeleton className="h-10 w-24" />
+          </div>
+
+          {/* Content Area Skeleton */}
+
+          {steps === 1 ? (
+            // Listings Skeleton
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[1, 2, 3, 4, 5, 6].map(i => (
+                <div key={i} className="border rounded-lg p-4">
+                  <Skeleton className="h-40 w-full mb-4" />
+                  <Skeleton className="h-4 w-3/4 mb-2" />
+                  <Skeleton className="h-4 w-1/2" />
+                </div>
+              ))}
+            </div>
+          ) : (
+            // Ratings Skeleton
+            <div className="flex flex-col gap-6">
+              <div className="flex gap-6 items-center">
+                <div className="flex flex-col gap-3 items-center">
+                  <Skeleton className="h-16 w-16" />
+                  <div className="flex gap-2">
+                    {[1, 2, 3, 4, 5].map(i => (
+                      <Skeleton key={i} className="h-5 w-5" />
+                    ))}
+                  </div>
+                  <Skeleton className="h-4 w-20" />
+                </div>
+                <div className="flex-1">
+                  {[5, 4, 3, 2, 1].map(i => (
+                    <div key={i} className="flex items-center space-x-3 mb-3">
+                      <Skeleton className="h-4 w-4" />
+                      <Skeleton className="h-2 flex-1" />
+                      <Skeleton className="h-4 w-8" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SellerSkeleton;