Component Boom

src/demo/Components/FlowingMenuDemo.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flowing-menu-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container" style="height: 600px; overflow: hidden; padding: 100px 0;">
+          <FlowingMenu :items="demoItems" />
+        </div>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['gsap']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="flowingMenu" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="flowingMenu.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import Dependencies from '../../components/code/Dependencies.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import FlowingMenu from '../../content/Components/FlowingMenu/FlowingMenu.vue'
+import { flowingMenu } from '@/constants/code/Components/flowingMenuCode'
+
+const propData = [
+  {
+    name: 'items',
+    type: 'object[]',
+    default: '[]',
+    description: 'An array of objects containing: link, text, image.'
+  }
+]
+
+const demoItems = [
+  { link: '#', text: 'Mojave', image: 'https://picsum.photos/600/400?random=1' },
+  { link: '#', text: 'Sonoma', image: 'https://picsum.photos/600/400?random=2' },
+  { link: '#', text: 'Monterey', image: 'https://picsum.photos/600/400?random=3' },
+  { link: '#', text: 'Sequoia', image: 'https://picsum.photos/600/400?random=4' }
+]
+</script>