From d5b44e1ed5132bfad4a4a8419488f8b9257f6f9b Mon Sep 17 00:00:00 2001
From: maany <imptodefeat@gmail.com>
Date: Sun, 13 Oct 2024 17:52:20 +0200
Subject: [PATCH] [TSK-310] components: skeleton

---
 lib/components/index.ts              |  1 +
 lib/components/skeleton/Skeleton.tsx | 16 ++++++++++++++++
 lib/components/skeleton/index.ts     |  1 +
 lib/components/ui/skeleton.tsx       | 15 +++++++++++++++
 4 files changed, 33 insertions(+)
 create mode 100644 lib/components/skeleton/Skeleton.tsx
 create mode 100644 lib/components/skeleton/index.ts
 create mode 100644 lib/components/ui/skeleton.tsx

diff --git a/lib/components/index.ts b/lib/components/index.ts
index 4630ba4..528b8ec 100644
--- a/lib/components/index.ts
+++ b/lib/components/index.ts
@@ -7,5 +7,6 @@ export * from "./mode-toggle";
 export * from "./research-context";
 export * from "./site-header";
 export * from "./site-footer";
+export * from "./skeleton";
 export * from "./spinner";
 export * from "./table";
diff --git a/lib/components/skeleton/Skeleton.tsx b/lib/components/skeleton/Skeleton.tsx
new file mode 100644
index 0000000..4b9602b
--- /dev/null
+++ b/lib/components/skeleton/Skeleton.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/utils/utils";
+
+export const Skeleton = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
diff --git a/lib/components/skeleton/index.ts b/lib/components/skeleton/index.ts
new file mode 100644
index 0000000..0ea7701
--- /dev/null
+++ b/lib/components/skeleton/index.ts
@@ -0,0 +1 @@
+export { Skeleton } from "./Skeleton";
diff --git a/lib/components/ui/skeleton.tsx b/lib/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d3acded
--- /dev/null
+++ b/lib/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/utils/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-slate-100 dark:bg-slate-800", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }