Upload Skeleton.tsx

components/Skeleton.tsx

@@ -0,0 +1,30 @@
+
+import React from 'react';
+
+/* fix: added ...props and broad type to allow key and other standard attributes */
+export const Skeleton = ({ className = "", ...props }: { className?: string, [key: string]: any }) => (
+  <div {...props} className={`animate-pulse bg-zinc-900 rounded-xl ${className}`}></div>
+);
+
+export const CardSkeleton = () => (
+  <div className="bg-zinc-950 border border-zinc-900 p-8 rounded-[2rem] space-y-4 shadow-2xl">
+    <div className="flex justify-between">
+      <Skeleton className="w-12 h-12 rounded-2xl" />
+      <Skeleton className="w-16 h-6 rounded-full" />
+    </div>
+    <Skeleton className="w-24 h-3" />
+    <Skeleton className="w-48 h-8" />
+    <Skeleton className="w-32 h-3" />
+  </div>
+);
+
+export const TableRowSkeleton = () => (
+  <div className="flex items-center space-x-4 py-8 px-10">
+    <Skeleton className="w-10 h-10 rounded-xl" />
+    <div className="flex-1 space-y-2">
+      <Skeleton className="w-1/4 h-4" />
+      <Skeleton className="w-1/2 h-2" />
+    </div>
+    <Skeleton className="w-24 h-6" />
+  </div>
+);