docs: use LiveCodes playground for examples

Author: hatemhosny

docs/.vitepress/components/Playground.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useData } from 'vitepress'
+import type { EmbedOptions, Playground } from 'livecodes'
+import LiveCodes from 'livecodes/vue'
+
+const props = defineProps<{
+  code: string
+  styles?: string
+  loading?: 'lazy' | 'click' | 'eager'
+  view?: 'split' | 'editor' | 'result'
+  mode?: 'full' | 'focus' | 'simple' | 'editor' | 'codeblock' | 'result'
+  height?: string
+}>()
+
+const { isDark } = useData()
+
+const config: EmbedOptions['config'] = {
+  title: 'Vue3-carousel',
+  theme: isDark.value ? 'dark' : 'light',
+  themeColor: 'hsl(220, 14%, 80%)',
+  view: props.view || 'result',
+  mode: props.mode || 'simple',
+  activeEditor: 'script',
+  tools: {
+    status: 'none',
+  },
+  style: {
+    language: 'css',
+    content: props.styles || '',
+  },
+  script: {
+    language: 'vue',
+    content: props.code,
+    title: 'App.vue',
+  },
+  imports: {
+    vue: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.runtime.esm-browser.prod.js',
+    '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',
+  },
+}
+
+let playground: Playground | undefined
+const onReady = (sdk: Playground) => {
+  playground = sdk
+}
+
+watch(isDark, () => {
+  if (playground) {
+    playground.setConfig({
+      theme: isDark.value ? 'dark' : 'light',
+    })
+  }
+})
+</script>
+
+<template>
+  <LiveCodes
+    appUrl="https://v41.livecodes.io/"
+    :config="config"
+    @sdk-ready="onReady"
+    :style="{ height: props.height || '250px' }"
+  />
+</template>

docs/examples.md

@@ -6,55 +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.
 
-<Example id="vue3-carousel-example-basic" />
+<Playground v-bind="examples.basic" />
 
 ## Wrap Around
 
 Demonstrates a carousel with continuous wrap-around functionality.
 
-<Example id="vue3-carousel-example-wrap-around" />
+<Playground v-bind="examples.wrapAround" />
 
 ## Vertical
 
 Showcases a vertically scrolling carousel. Adjust the height to better fit your content.
 
-<Example id="vue3-carousel-example-vertical" :height="475" />
+<Playground v-bind="examples.vertical" height="475px" />
 
 ## Breakpoints
 
 An example of a responsive carousel with breakpoints for varying screen sizes.
 
-<Example id="vue3-carousel-example-breakpoints" :height="300" />
+<Playground v-bind="examples.breakpoints" />
 
 ## Autoplay
 
 Illustrates the carousel with autoplay functionality enabled.
 
-<Example id="vue3-carousel-example-autoplay" />
+<Playground v-bind="examples.autoplay" />
 
 ## Active Classes
 
 An example highlighting active items with custom classes.
 
-<Example id="vue3-carousel-example-status-classes" />
+<Playground v-bind="examples.activeClasses" />
 
 ## Custom Navigation
 
 A demonstration of the carousel with fully customizable navigation controls.
 
-<Example id="vue3-carousel-example-custom-navigation" :height="310" />
+<Playground v-bind="examples.customNavigation" height="260px" />
 
 ## Gallery
 
 Transforms the carousel into a gallery-style component.
 
-<Example id="vue3-carousel-example-gallery" :height="500" />
+<Playground v-bind="examples.gallery" height="455px" />
 
-<script>
-import Example from './.vitepress/components/Example.vue';
-export default {
-  components: {
-    Example,
-  },
-};
+<script setup>
+import Playground from './.vitepress/components/Playground.vue';
+import { examples } from './examples/examples';
 </script>