Add Skeleton component

src/components/__snapshots__/skeleton.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Skeleton component > renders correctly 1`] = `
+<div>
+  <div
+    class="animate-pulse rounded-md bg-gray-300"
+  />
+</div>
+`;

src/components/skeleton.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Skeleton } from "./skeleton";
+
+describe("Skeleton component", () => {
+  it("renders correctly", () => {
+    const { container } = render(<Skeleton />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/skeleton.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Skeleton } from "./skeleton";
+
+const meta = {
+  title: "Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  render() {
+    return (
+      <div className="flex items-center space-x-4">
+        <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>
+      </div>
+    );
+  },
+};
+
+export const Card: Story = {
+  render() {
+    return (
+      <div className="flex flex-col space-y-3">
+        <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-[250px]" />
+          <Skeleton className="h-4 w-[200px]" />
+        </div>
+      </div>
+    );
+  },
+};

src/components/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-gray-300", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };