From 38e8a8eaf0c5e3647367a938e84c8a26a9da5ffd Mon Sep 17 00:00:00 2001
From: wasimTQ <wasimthoufiq21@gmail.com>
Date: Fri, 29 Dec 2023 15:12:29 +0530
Subject: [PATCH] feat: create demos for the carousel component

---
 apps/www/__registry__/index.ts                | 14 +++++++++
 .../registry/default/example/CarouselDemo.vue | 24 +++++++++++++++
 .../default/example/CarouselOrientation.vue   | 30 +++++++++++++++++++
 3 files changed, 68 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/example/CarouselOrientation.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index b24d3ade..9dadf617 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -184,6 +184,20 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CardWithForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CardWithForm.vue'],
     },
+    CarouselDemo: {
+      name: 'CarouselDemo',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselDemo.vue'],
+    },
+    CarouselOrientation: {
+      name: 'CarouselOrientation',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'button'],
+      component: () => import('../src/lib/registry/default/example/CarouselOrientation.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselOrientation.vue'],
+    },
     CheckboxDemo: {
       name: 'CheckboxDemo',
       type: 'components:example',
diff --git a/apps/www/src/lib/registry/default/example/CarouselDemo.vue b/apps/www/src/lib/registry/default/example/CarouselDemo.vue
new file mode 100644
index 00000000..1fa4f1a3
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselDemo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <Carousel class="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>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
new file mode 100644
index 00000000..7d19c06e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+</script>
+
+<template>
+  <div class="w-1/2">
+    <Carousel
+      orientation="vertical"
+      class="w-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>
+  </div>
+</template>