feat: add Skeleton and SkeletonCard components for loading placeholders

Author: pphatdev

components/ui/skeleton-card.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function SkeletonCard() {
+    return (
+        <div className="flex flex-col space-y-3">
+            <Skeleton className="h-[125px] w-full rounded-xl" />
+            <div className="space-y-2">
+                <Skeleton className="h-4 w-full max-w-[250px]" />
+                <Skeleton className="h-4 w-1/2 max-w-[200px]" />
+            </div>
+        </div>
+    )
+}

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }