From 5a3fd2d7573c62467a40c919244d12b468458a38 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 17 Feb 2024 12:39:54 +0000
Subject: ui: Add bookmark card skeleton

---
 .../bookmarks/components/BookmarkCardSkeleton.tsx  |  32 +++++++++++++++++++++
 packages/web/components/ui/skeleton.tsx            |  15 ++++++++++
 packages/web/public/blur.avif                      | Bin 0 -> 52746 bytes
 3 files changed, 47 insertions(+)
 create mode 100644 packages/web/app/dashboard/bookmarks/components/BookmarkCardSkeleton.tsx
 create mode 100644 packages/web/components/ui/skeleton.tsx
 create mode 100644 packages/web/public/blur.avif

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarkCardSkeleton.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarkCardSkeleton.tsx
new file mode 100644
index 00000000..d28a229e
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarkCardSkeleton.tsx
@@ -0,0 +1,32 @@
+import {
+  ImageCard,
+  ImageCardBody,
+  ImageCardContent,
+  ImageCardFooter,
+  ImageCardTitle,
+  ImageCardBanner,
+} from "@/components/ui/imageCard";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function BookmarkCardSkeleton() {
+  return (
+    <ImageCard
+      className={
+        "border-grey-100 border bg-gray-50 duration-300 ease-in hover:border-blue-300 hover:transition-all"
+      }
+    >
+      <ImageCardBanner src="/blur.avif" />
+      <ImageCardContent>
+        <ImageCardTitle>
+        </ImageCardTitle>
+        <ImageCardBody className="space-y-2">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-full" />
+        </ImageCardBody>
+        <ImageCardFooter>
+        </ImageCardFooter>
+      </ImageCardContent>
+    </ImageCard>
+  );
+}
diff --git a/packages/web/components/ui/skeleton.tsx b/packages/web/components/ui/skeleton.tsx
new file mode 100644
index 00000000..01b8b6d4
--- /dev/null
+++ b/packages/web/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/packages/web/public/blur.avif b/packages/web/public/blur.avif
new file mode 100644
index 00000000..cbc6cd37
Binary files /dev/null and b/packages/web/public/blur.avif differ
-- 
cgit v1.2.3-70-g09d2