From 47a541406e31428c614a4d7e771f7dfe417eabe9 Mon Sep 17 00:00:00 2001
From: DEEPAK KUMAR MANDAL <dev.workwithdeepak@gmail.com>
Date: Sun, 4 Aug 2024 22:41:57 +0530
Subject: [PATCH]  feat: skeleton

---
 src/App.tsx                             |  9 +++++++++
 src/components/ui/Skeleton/Skeleton.tsx | 13 +++++++++++++
 src/components/ui/Skeleton/index.ts     |  1 +
 src/components/ui/index.ts              |  1 +
 4 files changed, 24 insertions(+)
 create mode 100644 src/components/ui/Skeleton/Skeleton.tsx
 create mode 100644 src/components/ui/Skeleton/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index 4464a77..f806572 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,7 @@ import {
   ContextMenu,
   Tooltip,
   HoverCard,
+  Skeleton,
 } from "@Components/ui";
 
 const App = () => (
@@ -187,6 +188,14 @@ const App = () => (
     <Flex asElement="section" className="w-full">
       <HoverCardDemo />
     </Flex>
+
+    <Flex asElement="section" className="w-full space-x-2" alignItems="center">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </Flex>
   </Container>
 );
 
diff --git a/src/components/ui/Skeleton/Skeleton.tsx b/src/components/ui/Skeleton/Skeleton.tsx
new file mode 100644
index 0000000..a0c61db
--- /dev/null
+++ b/src/components/ui/Skeleton/Skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@Utils/className";
+
+const Skeleton = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("animate-pulse rounded-md bg-muted-light/20", className)}
+    {...props}
+  />
+);
+
+export { Skeleton };
diff --git a/src/components/ui/Skeleton/index.ts b/src/components/ui/Skeleton/index.ts
new file mode 100644
index 0000000..55879b8
--- /dev/null
+++ b/src/components/ui/Skeleton/index.ts
@@ -0,0 +1 @@
+export * from "./Skeleton";
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index 00e33eb..cd279fa 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -14,3 +14,4 @@ export { Checkbox } from "./CheckBox";
 export { ContextMenu } from "./ContextMenu";
 export { Tooltip } from "./ToolTip";
 export { HoverCard } from "./HoverCard";
+export { Skeleton } from "./Skeleton";