feat(snippets): add Carousel snippets

selemondev · Feb 3, 2024 · 0eb3f8b · 0eb3f8b
1 parent 5711055
commit 0eb3f8b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/src/snippets/imports.code-snippets b/src/snippets/imports.code-snippets
@@ -95,6 +95,15 @@
       ],
       "description": "https://shadcn-vue.com/docs/components/card.html"
     },
+
+    "Carousel": {
+      "prefix": ["shadcn-i-carousel", "cni-carousel"],
+      "body": [
+        "import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel'",
+        "import { Card, CardContent } from '@/components/ui/card'"
+      ],
+      "description": "https://shadcn-vue.com/docs/components/carousel.html"
+    },
 
     "Checkbox": {
       "prefix": ["shadcn-i-checkbox", "cni-checkbox"],

diff --git a/src/snippets/usage.code-snippets b/src/snippets/usage.code-snippets
@@ -159,6 +159,56 @@
       ],    
       "description": "https://shadcn-vue.com/docs/components/card.html"
     },
+
+    "Carousel": {
+      "prefix": ["shadcn-x-carousel", "cnx-carousel"],
+      "body": [
+        "  <Carousel class=\"relative w-full max-w-xs\">",
+        "    <CarouselContent>",
+        "      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">",
+        "        <div class=\"p-1\">",
+        "          <Card>",
+        "            <CardContent class=\"flex aspect-square items-center justify-center p-6\">",
+        "              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>",
+        "            </CardContent>",
+        "          </Card>",
+        "        </div>",
+        "      </CarouselItem>",
+        "    </CarouselContent>",
+        "    <CarouselPrevious />",
+        "    <CarouselNext />",
+        "  </Carousel>"
+      ],
+      "description": "https://shadcn-vue.com/docs/components/carousel.html"
+    },
+
+    "Carousel-Vertical": {
+      "prefix": ["shadcn-x-carousel-vertical", "cnx-carousel-vertical"],
+      "body": [
+        " <Carousel",
+        "    orientation=\"vertical\"",
+        "    class=\"relative w-full max-w-xsw-full max-w-xs\"",
+        "    :opts=\"{",
+        "      align: 'start',",
+        "    }\"",
+        "  >",
+        "    <CarouselContent class=\"-mt-1 h-[200px]\">",
+        "      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">",
+        "        <div class=\"p-1\">",
+        "          <Card>",
+        "            <CardContent class=\"flex items-center justify-center p-6\">",
+        "              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>",
+        "            </CardContent>",
+        "          </Card>",
+        "        </div>",
+        "      </CarouselItem>",
+        "    </CarouselContent>",
+        "    <CarouselPrevious />",
+        "    <CarouselNext />",
+        "  </Carousel>"
+      ],
+      "description": "https://shadcn-vue.com/docs/components/carousel.html"
+    },
 
     "Checkbox": {
       "prefix": ["shadcn-x-checkbox", "cnx-checkbox"],