feat: replace Playground component with LiveCodes in examples and add LiveCodes component

Author: ismail9k

docs/.vitepress/components/Example.vue

@@ -39,8 +39,6 @@ const config: EmbedOptions['config'] = {
     'vue3-carousel': 'https://cdn.jsdelivr.net/npm/vue3-carousel/dist/carousel.mjs',
     'vue3-carousel/carousel.css':
       'https://cdn.jsdelivr.net/npm/vue3-carousel/dist/carousel.css',
-    'vue3-carousel/dist/carousel.css':
-      'https://cdn.jsdelivr.net/npm/vue3-carousel/dist/carousel.css',
   },
 }
 
@@ -66,3 +64,10 @@ watch(isDark, () => {
     :style="{ height: props.height || '250px' }"
   />
 </template>
+
+
+<style>
+.carousel {
+  display: none !important;
+}
+</style>

docs/.vitepress/components/Playground.vue renamed to docs/.vitepress/components/LiveCodes.vue

@@ -6,51 +6,51 @@ If you're experiencing issues loading the live examples or you're browsing on a
 
 A simple implementation of the carousel with default settings.
 
-<Playground v-bind="examples.basic" />
+<live-codes v-bind="LiveCodeExamples.basic" />
 
 ## Wrap Around
 
 Demonstrates a carousel with continuous wrap-around functionality.
 
-<Playground v-bind="examples.wrapAround" />
+<live-codes v-bind="LiveCodeExamples.wrapAround" />
 
 ## Vertical
 
 Showcases a vertically scrolling carousel. Adjust the height to better fit your content.
 
-<Playground v-bind="examples.vertical" height="475px" />
+<live-codes v-bind="LiveCodeExamples.vertical" height="475px" />
 
 ## Breakpoints
 
 An example of a responsive carousel with breakpoints for varying screen sizes.
 
-<Playground v-bind="examples.breakpoints" />
+<live-codes v-bind="LiveCodeExamples.breakpoints" />
 
 ## Autoplay
 
 Illustrates the carousel with autoplay functionality enabled.
 
-<Playground v-bind="examples.autoplay" />
+<live-codes v-bind="LiveCodeExamples.autoplay" />
 
 ## Active Classes
 
 An example highlighting active items with custom classes.
 
-<Playground v-bind="examples.activeClasses" />
+<live-codes v-bind="LiveCodeExamples.activeClasses" />
 
 ## Custom Navigation
 
 A demonstration of the carousel with fully customizable navigation controls.
 
-<Playground v-bind="examples.customNavigation" height="260px" />
+<live-codes v-bind="LiveCodeExamples.customNavigation" height="260px" />
 
 ## Gallery
 
 Transforms the carousel into a gallery-style component.
 
-<Playground v-bind="examples.gallery" height="455px" />
+<live-codes v-bind="LiveCodeExamples.gallery" height="455px" />
 
 <script setup>
-import Playground from './.vitepress/components/Playground.vue';
-import { examples } from './examples/examples';
+import LiveCodes from './.vitepress/components/LiveCodes.vue';
+import { LiveCodeExamples } from './examples';
 </script>

docs/examples.md

@@ -1,4 +1,4 @@
-export const examples: Record<string, { code: string; styles: string }> = {
+export const LiveCodeExamples: Record<string, { code: string; styles: string }> = {
   basic: {
     code: `
 <script setup>

docs/examples/examples.ts renamed to docs/examples/LiveCodeExamples.ts

@@ -0,0 +1 @@
+export * from './LiveCodeExamples'