[TSK-310] components: skeleton

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";

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}
+    />
+  );
+};

lib/components/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from "./Skeleton";

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 }