Feat: add Skeleton effect

app/docs/layout.tsx

@@ -125,6 +125,11 @@ const NAVIGATION: NavigationGroup[] = [
         name: 'Toolbar Dynamic',
         href: '/docs/toolbar-dynamic',
       },
+      {
+        name: 'Skeleton',
+        href: '/docs/skeleton',
+        isNew: true,
+      }
     ],
   },
 ];
@@ -193,7 +198,7 @@ function NavigationDesktop() {
                             className={cn(
                               'relative inline-flex items-center space-x-1 pl-4 text-sm font-normal text-zinc-700 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white',
                               isActive &&
-                                'text-zinc-950 before:absolute before:inset-y-0 before:left-[-1.5px] before:w-[2px] before:rounded-full before:bg-zinc-950 dark:text-white dark:before:bg-white'
+                              'text-zinc-950 before:absolute before:inset-y-0 before:left-[-1.5px] before:w-[2px] before:rounded-full before:bg-zinc-950 dark:text-white dark:before:bg-white'
                             )}
                             href={child.href}
                           >

app/docs/skeleton/page.mdx

@@ -0,0 +1,50 @@
+export const metadata = {
+  title: 'Skeleton - Motion-Primitives',
+  description: 'Use to show a loading state while content is loading.',
+};
+
+import { Skeleton } from '@/components/core/skeleton';
+import { SkeletonCard } from '@/components/examples/skeleton-card';
+import { SkeletonBasic1 } from '@/components/examples/skeleton-basic-1';
+import { SkeletonBasic2 } from '@/components/examples/skeleton-basic-2';
+import ComponentCodePreview from '@/components/website/component-code-preview';
+import CodeBlock from '@/components/website/code-block';
+
+# Skeleton
+
+Use to show a placeholder while content is loading.
+
+## Examples
+
+### Skeleton Card
+
+A card with skeleton showing a loading state.
+
+<ComponentCodePreview
+  component={<SkeletonCard />}
+  filePath='examples/skeleton-card'
+/>
+
+### Skeleton Basic User User icon and text
+
+<ComponentCodePreview
+  component={<SkeletonBasic1 />}
+  filePath='examples/skeleton-basic-1'
+/>
+
+### Skeleton Basic Card with text and image
+
+<ComponentCodePreview
+  component={<SkeletonBasic2 />}
+  filePath='examples/skeleton-basic-2'
+/>
+
+## Code
+
+<CodeBlock filePath='components/core/skeleton.tsx' />
+
+## Component API
+
+| Prop          | Type          | Default | Description                                                |
+| :------------ | :------------ | :------ | :--------------------------------------------------------- |
+| className     | string        |         | Optional CSS class for styling the skeleton.               |

components/core/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('bg-zinc-600 animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/examples/skeleton-basic-1.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "../core/skeleton";
+
+export function SkeletonBasic1() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="size-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}

components/examples/skeleton-basic-2.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from "../core/skeleton";
+
+export function SkeletonBasic2() {
+  return (
+    <div className="flex flex-col items-center space-y-3">
+      <Skeleton className="h-[125px] w-[250px] rounded-lg" />
+      <div className="flex items-center justify-between gap-2">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-[170px]" />
+          <Skeleton className="h-4 w-[190px]" />
+        </div>
+        <Skeleton className="size-12 rounded-full" />
+      </div>
+    </div>
+  )
+}

components/examples/skeleton-card.tsx

@@ -0,0 +1,14 @@
+import { Skeleton } from "../core/skeleton";
+
+
+export function SkeletonCard() {
+  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>
+  )
+}