From 3ec55ada1b68620bb78e90d7229181b9b6e7b39d Mon Sep 17 00:00:00 2001
From: Saeid Zareie <65568529+Saeid-Za@users.noreply.github.com>
Date: Tue, 5 Mar 2024 14:37:35 +0330
Subject: [PATCH] docs: adding skeleton card example (#382)

---
 apps/www/__registry__/index.ts                 | 18 ++++++++++++++++--
 .../src/content/docs/components/skeleton.md    | 11 ++++++++---
 .../registry/default/example/SkeletonCard.vue  | 13 +++++++++++++
 .../registry/new-york/example/SkeletonCard.vue | 13 +++++++++++++
 4 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/SkeletonCard.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/SkeletonCard.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 999ff3a9..cf742c04 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -619,6 +619,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/SheetSideDemo.vue"],
     },
+    "SkeletonCard": {
+      name: "SkeletonCard",
+      type: "components:example",
+      registryDependencies: ["skeleton"],
+      component: () => import("../src/lib/registry/default/example/SkeletonCard.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/SkeletonCard.vue"],
+    },
     "SkeletonDemo": {
       name: "SkeletonDemo",
       type: "components:example",
@@ -636,7 +643,7 @@ export const Index = {
     "SliderForm": {
       name: "SliderForm",
       type: "components:example",
-      registryDependencies: ["button","form","select","toast"],
+      registryDependencies: ["button","form","slider","toast"],
       component: () => import("../src/lib/registry/default/example/SliderForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/SliderForm.vue"],
     },
@@ -1593,6 +1600,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/SheetSideDemo.vue"],
     },
+    "SkeletonCard": {
+      name: "SkeletonCard",
+      type: "components:example",
+      registryDependencies: ["skeleton"],
+      component: () => import("../src/lib/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/SkeletonCard.vue"],
+    },
     "SkeletonDemo": {
       name: "SkeletonDemo",
       type: "components:example",
@@ -1610,7 +1624,7 @@ export const Index = {
     "SliderForm": {
       name: "SliderForm",
       type: "components:example",
-      registryDependencies: ["button","form","select","toast"],
+      registryDependencies: ["button","form","slider","toast"],
       component: () => import("../src/lib/registry/new-york/example/SliderForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/SliderForm.vue"],
     },
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index 628ba177..fc9b3248 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -1,9 +1,9 @@
 ---
 title: Skeleton
-description: Use to show a placeholder while content is loading. 
+description: Use to show a placeholder while content is loading.
 ---
 
-<ComponentPreview name="SkeletonDemo" /> 
+<ComponentPreview name="SkeletonDemo" />
 
 ## Installation
 
@@ -21,7 +21,6 @@ npx shadcn-vue@latest add skeleton
 
 ### Copy and paste the following code into your project
 
-
 <<< @/lib/registry/default/ui/skeleton/Skeleton.vue
 
 </Steps>
@@ -40,3 +39,9 @@ import { Skeleton } from '@/components/ui/skeleton'
   <Skeleton class="w-[100px] h-5 rounded-full" />
 </template>
 ```
+
+## Examples
+
+### Card
+
+<ComponentPreview name="SkeletonCard" />
diff --git a/apps/www/src/lib/registry/default/example/SkeletonCard.vue b/apps/www/src/lib/registry/default/example/SkeletonCard.vue
new file mode 100644
index 00000000..a3a473ad
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/SkeletonCard.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { Skeleton } from '@/lib/registry/default/ui/skeleton'
+</script>
+
+<template>
+  <div class="flex flex-col space-y-3">
+    <Skeleton class="h-[125px] w-[250px] rounded-xl" />
+    <div class="space-y-2">
+      <Skeleton class="h-4 w-[250px]" />
+      <Skeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/SkeletonCard.vue b/apps/www/src/lib/registry/new-york/example/SkeletonCard.vue
new file mode 100644
index 00000000..e780af88
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/SkeletonCard.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { Skeleton } from '@/lib/registry/new-york/ui/skeleton'
+</script>
+
+<template>
+  <div class="flex flex-col space-y-3">
+    <Skeleton class="h-[125px] w-[250px] rounded-xl" />
+    <div class="space-y-2">
+      <Skeleton class="h-4 w-[250px]" />
+      <Skeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>