feat(components): add skeleton component

src/components/index.ts

@@ -24,3 +24,4 @@ export { Tag } from "./tag";
 export { Toast } from "./toast";
 export { Toggle } from "./toggle";
 export { TopBar } from "./top-bar";
+export { Skeleton } from "./skeleton";

src/components/skeleton/index.ts

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

src/components/skeleton/skeleton.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import React from "react";
+import { Skeleton } from "./skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+    title: "Skeleton",
+    component: Skeleton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+    render: (args) => <Skeleton {...args} />,
+    args: {
+        className: "w-96 h-8",
+        isAnimated: false,
+    },
+};

src/components/skeleton/skeleton.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+export interface SkeletonProps {
+    className?: string;
+    isAnimated?: boolean;
+}
+
+export const Skeleton = ({ className, isAnimated = false }: SkeletonProps) => {
+    return (
+        <span
+            className={classNames(
+                "block bg-neutral-100 rounded-sm",
+                isAnimated && "animate-pulse",
+                className
+            )}
+        />
+    );
+};