@xenterprises/nuxt-x-marketing 1.0.0 → 1.0.2

package/.playground/pages/index.vue

@@ -129,8 +129,8 @@
     </main>
 
     <!-- Footer -->
-    <XFooter />
-    <XFooterXLegal />
+    <XXFooter />
+    <XXLegal />
   </div>
 </template>
 

package/.playground/pages/layout/x-legal.vue

@@ -17,7 +17,7 @@
           Without any props, displays X Enterprises logo, copyright, and legal links.
         </p>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal />
+          <XXLegal />
         </div>
       </section>
 
@@ -25,7 +25,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Custom Copyright</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             copyright="© 2024 Acme Corporation. All rights reserved."
           />
         </div>
@@ -35,7 +35,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Custom Links</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             :links="customLinks"
           />
         </div>
@@ -45,7 +45,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Custom Logo</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             :logo="{ src: 'https://cdn.x.enterprises/logo-x.png', alt: 'Custom Logo', href: '/' }"
             copyright="© 2024 Custom Company"
           />
@@ -56,7 +56,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">No Logo</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             :logo="false"
             copyright="© 2024 Simple Company. All rights reserved."
           />
@@ -67,7 +67,7 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Fully Customized</h2>
         <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XFooterXLegal
+          <XXLegal
             :logo="{ src: 'https://cdn.x.enterprises/logo-x.png', alt: 'Acme Inc', href: 'https://example.com' }"
             copyright="© 2020-2024 Acme Inc. Built with love."
             :links="fullCustomLinks"
@@ -163,15 +163,15 @@ const fullCustomLinks = [
 ]
 
 const codeExample = `<!-- Default (X Enterprises branding) -->
-<XFooterXLegal />
+<XXLegal />
 
 <!-- Custom copyright only -->
-<XFooterXLegal
+<XXLegal
   copyright="© 2024 Your Company. All rights reserved."
 />
 
 <!-- Custom links -->
-<XFooterXLegal
+<XXLegal
   :links="[
     { label: 'Privacy Policy', href: '/privacy' },
     { label: 'Terms of Service', href: '/terms' },
@@ -180,15 +180,15 @@ const codeExample = `<!-- Default (X Enterprises branding) -->
 />
 
 <!-- Custom logo -->
-<XFooterXLegal
+<XXLegal
   :logo="{ src: '/logo.png', alt: 'Company', href: '/' }"
 />
 
 <!-- Hide logo -->
-<XFooterXLegal :logo="false" />
+<XXLegal :logo="false" />
 
 <!-- Fully customized -->
-<XFooterXLegal
+<XXLegal
   :logo="{ src: '/logo.png', alt: 'Company', href: '/' }"
   copyright="© 2024 Company Inc. All rights reserved."
   :links="[

package/.playground/pages/notifications/social-proof-toast.vue

@@ -1,51 +1,204 @@
 <template>
   <div class="min-h-screen">
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Social Proof Toast</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Automated notifications showing recent customer activity.</p>
+    <div
+      class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6"
+    >
+      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">
+        Social Proof Toast
+      </h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
+        Automated notifications showing recent customer activity.
+      </p>
     </div>
 
     <div class="p-8 space-y-12">
       <!-- Demo -->
       <section>
         <h2 class="text-lg font-semibold mb-4">Live Demo</h2>
-        <p class="text-sm text-neutral-500 mb-4">The social proof notifications will cycle through automatically. Select placement and click Start Demo.</p>
+        <p class="text-sm text-neutral-500 mb-4">
+          The social proof notifications will cycle through automatically.
+          Select placement, type, and click Start Demo.
+        </p>
         <div class="flex flex-wrap items-center gap-3">
           <UButton @click="startDemo">Start Demo</UButton>
-          <UButton color="neutral" variant="outline" @click="stopDemo">Stop Demo</UButton>
+          <UButton color="neutral" variant="outline" @click="stopDemo"
+            >Stop Demo</UButton
+          >
           <div class="flex items-center gap-2 ml-4">
             <span class="text-sm text-neutral-500">Placement:</span>
             <UButtonGroup>
-              <UButton size="sm" :variant="demoPlacement === 'bottomLeft' ? 'solid' : 'outline'" @click="demoPlacement = 'bottomLeft'">Bottom Left</UButton>
-              <UButton size="sm" :variant="demoPlacement === 'bottomRight' ? 'solid' : 'outline'" @click="demoPlacement = 'bottomRight'">Bottom Right</UButton>
-              <UButton size="sm" :variant="demoPlacement === 'topLeft' ? 'solid' : 'outline'" @click="demoPlacement = 'topLeft'">Top Left</UButton>
-              <UButton size="sm" :variant="demoPlacement === 'topRight' ? 'solid' : 'outline'" @click="demoPlacement = 'topRight'">Top Right</UButton>
+              <UButton
+                size="sm"
+                :variant="demoPlacement === 'bottomLeft' ? 'solid' : 'outline'"
+                @click="demoPlacement = 'bottomLeft'"
+                >Bottom Left</UButton
+              >
+              <UButton
+                size="sm"
+                :variant="demoPlacement === 'bottomRight' ? 'solid' : 'outline'"
+                @click="demoPlacement = 'bottomRight'"
+                >Bottom Right</UButton
+              >
+              <UButton
+                size="sm"
+                :variant="demoPlacement === 'topLeft' ? 'solid' : 'outline'"
+                @click="demoPlacement = 'topLeft'"
+                >Top Left</UButton
+              >
+              <UButton
+                size="sm"
+                :variant="demoPlacement === 'topRight' ? 'solid' : 'outline'"
+                @click="demoPlacement = 'topRight'"
+                >Top Right</UButton
+              >
+            </UButtonGroup>
+          </div>
+          <div class="flex items-center gap-2 ml-4">
+            <span class="text-sm text-neutral-500">Type:</span>
+            <UButtonGroup>
+              <UButton
+                size="sm"
+                :variant="demoType === 'success' ? 'solid' : 'outline'"
+                @click="demoType = 'success'"
+                >Success</UButton
+              >
+              <UButton
+                size="sm"
+                :variant="demoType === 'error' ? 'solid' : 'outline'"
+                @click="demoType = 'error'"
+                >Error</UButton
+              >
+              <UButton
+                size="sm"
+                :variant="demoType === 'warning' ? 'solid' : 'outline'"
+                @click="demoType = 'warning'"
+                >Warning</UButton
+              >
+              <UButton
+                size="sm"
+                :variant="demoType === 'info' ? 'solid' : 'outline'"
+                @click="demoType = 'info'"
+                >Info</UButton
+              >
             </UButtonGroup>
           </div>
         </div>
       </section>
 
-      <!-- Preview -->
+      <!-- Type Examples -->
       <section>
-        <h2 class="text-lg font-semibold mb-4">Preview</h2>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-8">
-          <p class="text-sm text-neutral-500 mb-6">Notification appears in the bottom-left corner:</p>
-          <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3 max-w-sm">
-            <img
-              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
-              alt="Customer"
-              class="w-10 h-10 rounded-full object-cover"
-            />
-            <div class="flex-1">
-              <p class="text-sm text-neutral-900 dark:text-white">
-                <span class="font-medium">Sarah M.</span>
-                just purchased Pro Plan
-              </p>
-              <p class="text-xs text-neutral-500 mt-0.5">
-                2 minutes ago
-              </p>
+        <h2 class="text-lg font-semibold mb-4">Toast Types</h2>
+        <div class="grid md:grid-cols-2 gap-4">
+          <!-- Success -->
+          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
+            <h3 class="font-medium mb-4 text-green-600 dark:text-green-400">
+              Success
+            </h3>
+            <div
+              class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
+            >
+              <img
+                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+                alt="Customer"
+                class="w-10 h-10 rounded-full object-cover"
+              />
+              <div class="flex-1">
+                <p class="text-sm text-neutral-900 dark:text-white">
+                  <span class="font-medium">Sarah M.</span>
+                  just purchased Pro Plan
+                </p>
+                <p class="text-xs text-neutral-500 mt-0.5">2 minutes ago</p>
+              </div>
+              <UIcon
+                name="i-lucide-badge-check"
+                class="w-5 h-5 text-green-500 flex-shrink-0"
+              />
+            </div>
+          </div>
+
+          <!-- Error -->
+          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
+            <h3 class="font-medium mb-4 text-red-600 dark:text-red-400">
+              Error
+            </h3>
+            <div
+              class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
+            >
+              <div
+                class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
+              >
+                <span class="text-primary-600 dark:text-primary-400 font-medium"
+                  >J</span
+                >
+              </div>
+              <div class="flex-1">
+                <p class="text-sm text-neutral-900 dark:text-white">
+                  <span class="font-medium">John D.</span>
+                  payment failed
+                </p>
+                <p class="text-xs text-neutral-500 mt-0.5">5 minutes ago</p>
+              </div>
+              <UIcon
+                name="i-lucide-x-circle"
+                class="w-5 h-5 text-red-500 flex-shrink-0"
+              />
+            </div>
+          </div>
+
+          <!-- Warning -->
+          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
+            <h3 class="font-medium mb-4 text-yellow-600 dark:text-yellow-400">
+              Warning
+            </h3>
+            <div
+              class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
+            >
+              <div
+                class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
+              >
+                <span class="text-primary-600 dark:text-primary-400 font-medium"
+                  >E</span
+                >
+              </div>
+              <div class="flex-1">
+                <p class="text-sm text-neutral-900 dark:text-white">
+                  <span class="font-medium">Emily R.</span>
+                  subscription expiring soon
+                </p>
+                <p class="text-xs text-neutral-500 mt-0.5">10 minutes ago</p>
+              </div>
+              <UIcon
+                name="i-lucide-alert-triangle"
+                class="w-5 h-5 text-yellow-500 flex-shrink-0"
+              />
+            </div>
+          </div>
+
+          <!-- Info -->
+          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
+            <h3 class="font-medium mb-4 text-blue-600 dark:text-blue-400">
+              Info
+            </h3>
+            <div
+              class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
+            >
+              <img
+                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
+                alt="Customer"
+                class="w-10 h-10 rounded-full object-cover"
+              />
+              <div class="flex-1">
+                <p class="text-sm text-neutral-900 dark:text-white">
+                  <span class="font-medium">James W.</span>
+                  viewed pricing page
+                </p>
+                <p class="text-xs text-neutral-500 mt-0.5">1 minute ago</p>
+              </div>
+              <UIcon
+                name="i-lucide-info"
+                class="w-5 h-5 text-blue-500 flex-shrink-0"
+              />
             </div>
-            <UIcon name="i-lucide-badge-check" class="w-5 h-5 text-green-500" />
           </div>
         </div>
       </section>
@@ -56,7 +209,9 @@
         <div class="grid md:grid-cols-3 gap-4">
           <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
             <h3 class="font-medium mb-1">Initial Delay</h3>
-            <p class="text-sm text-neutral-500">Wait before first notification</p>
+            <p class="text-sm text-neutral-500">
+              Wait before first notification
+            </p>
             <p class="mt-2 font-mono text-sm">5000ms (5 seconds)</p>
           </div>
           <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
@@ -85,19 +240,62 @@
             </tr>
           </thead>
           <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">notifications</td><td class="py-3 px-4">Array</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Array of notification objects</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">interval</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">4000</td><td class="py-3 px-4">Time between notifications (ms)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">initialDelay</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">5000</td><td class="py-3 px-4">Delay before first notification (ms)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">displayDuration</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">3000</td><td class="py-3 px-4">How long each notification shows (ms)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">placement</td><td class="py-3 px-4">String</td><td class="py-3 px-4">bottomLeft</td><td class="py-3 px-4">topLeft, topRight, bottomLeft, bottomRight</td></tr>
+            <tr>
+              <td class="py-3 px-4 font-mono text-xs">notifications</td>
+              <td class="py-3 px-4">Array</td>
+              <td class="py-3 px-4">required</td>
+              <td class="py-3 px-4">Array of notification objects</td>
+            </tr>
+            <tr>
+              <td class="py-3 px-4 font-mono text-xs">interval</td>
+              <td class="py-3 px-4">Number</td>
+              <td class="py-3 px-4">4000</td>
+              <td class="py-3 px-4">Time between notifications (ms)</td>
+            </tr>
+            <tr>
+              <td class="py-3 px-4 font-mono text-xs">initialDelay</td>
+              <td class="py-3 px-4">Number</td>
+              <td class="py-3 px-4">5000</td>
+              <td class="py-3 px-4">Delay before first notification (ms)</td>
+            </tr>
+            <tr>
+              <td class="py-3 px-4 font-mono text-xs">displayDuration</td>
+              <td class="py-3 px-4">Number</td>
+              <td class="py-3 px-4">3000</td>
+              <td class="py-3 px-4">How long each notification shows (ms)</td>
+            </tr>
+            <tr>
+              <td class="py-3 px-4 font-mono text-xs">placement</td>
+              <td class="py-3 px-4">String</td>
+              <td class="py-3 px-4">topRight</td>
+              <td class="py-3 px-4">
+                topLeft, topRight, bottomLeft, bottomRight
+              </td>
+            </tr>
+            <tr>
+              <td class="py-3 px-4 font-mono text-xs">type</td>
+              <td class="py-3 px-4">String</td>
+              <td class="py-3 px-4">success</td>
+              <td class="py-3 px-4">success, error, warning, info</td>
+            </tr>
+            <tr>
+              <td class="py-3 px-4 font-mono text-xs">showIcon</td>
+              <td class="py-3 px-4">Boolean</td>
+              <td class="py-3 px-4">true</td>
+              <td class="py-3 px-4">Whether to show the status icon</td>
+            </tr>
           </tbody>
         </table>
       </section>
 
       <!-- Notification Structure -->
       <section>
-        <h2 class="text-lg font-semibold mb-4">Notification Object Structure</h2>
-        <pre class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"><code>notifications: [
+        <h2 class="text-lg font-semibold mb-4">
+          Notification Object Structure
+        </h2>
+        <pre
+          class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"
+        ><code>notifications: [
   {
     name: 'Sarah M.',           // Customer name (required)
     action: 'just purchased Pro Plan',  // Action text (required)
@@ -112,7 +310,11 @@
       <section>
         <h2 class="text-lg font-semibold mb-4">Sample Notifications</h2>
         <div class="grid md:grid-cols-2 gap-4">
-          <div v-for="notification in notifications" :key="notification.name" class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 flex items-center gap-3">
+          <div
+            v-for="notification in notifications"
+            :key="notification.name"
+            class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 flex items-center gap-3"
+          >
             <img
               v-if="notification.avatar"
               :src="notification.avatar"
@@ -143,19 +345,34 @@
         <h2 class="text-lg font-semibold mb-4">Usage Tips</h2>
         <ul class="space-y-3 text-neutral-600 dark:text-neutral-400">
           <li class="flex gap-2">
-            <UIcon name="i-lucide-lightbulb" class="w-5 h-5 text-yellow-500 flex-shrink-0" />
-            <span>Use real customer data or realistic fake data for authenticity</span>
+            <UIcon
+              name="i-lucide-lightbulb"
+              class="w-5 h-5 text-yellow-500 flex-shrink-0"
+            />
+            <span
+              >Use real customer data or realistic fake data for
+              authenticity</span
+            >
           </li>
           <li class="flex gap-2">
-            <UIcon name="i-lucide-lightbulb" class="w-5 h-5 text-yellow-500 flex-shrink-0" />
+            <UIcon
+              name="i-lucide-lightbulb"
+              class="w-5 h-5 text-yellow-500 flex-shrink-0"
+            />
             <span>Keep action text short and focused on conversions</span>
           </li>
           <li class="flex gap-2">
-            <UIcon name="i-lucide-lightbulb" class="w-5 h-5 text-yellow-500 flex-shrink-0" />
+            <UIcon
+              name="i-lucide-lightbulb"
+              class="w-5 h-5 text-yellow-500 flex-shrink-0"
+            />
             <span>Use recent-sounding times ("2 minutes ago") for urgency</span>
           </li>
           <li class="flex gap-2">
-            <UIcon name="i-lucide-lightbulb" class="w-5 h-5 text-yellow-500 flex-shrink-0" />
+            <UIcon
+              name="i-lucide-lightbulb"
+              class="w-5 h-5 text-yellow-500 flex-shrink-0"
+            />
             <span>Include diverse customer names and avatars</span>
           </li>
         </ul>
@@ -166,6 +383,12 @@
         <h2 class="text-lg font-semibold mb-4">Code Example</h2>
         <CodeExample title="Social Proof Toast Usage" :code="codeExample" />
       </section>
+
+      <!-- Type Examples Code -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Type Examples</h2>
+        <CodeExample title="Different Toast Types" :code="typeExamplesCode" />
+      </section>
     </div>
 
     <!-- Actual Component -->
@@ -176,6 +399,7 @@
       :initial-delay="1000"
       :display-duration="3000"
       :placement="demoPlacement"
+      :type="demoType"
     />
   </div>
 </template>
@@ -186,6 +410,7 @@ const codeExample = `<XMarkSocialProofToast
   :interval="4000"
   :initial-delay="5000"
   :display-duration="3000"
+  type="success"
 />
 
 <script setup>
@@ -208,48 +433,83 @@ const notifications = [
     time: '8 minutes ago'
   }
 ]
-<\/script>`
+<\/script>`;
+
+const typeExamplesCode = `<!-- Success (default) -->
+<XMarkSocialProofToast
+  :notifications="notifications"
+  type="success"
+/>
+
+<!-- Error -->
+<XMarkSocialProofToast
+  :notifications="notifications"
+  type="error"
+/>
+
+<!-- Warning -->
+<XMarkSocialProofToast
+  :notifications="notifications"
+  type="warning"
+/>
 
-const demoActive = ref(false)
-const demoPlacement = ref('bottomLeft')
+<!-- Info -->
+<XMarkSocialProofToast
+  :notifications="notifications"
+  type="info"
+/>
+
+<!-- Hide icon -->
+<XMarkSocialProofToast
+  :notifications="notifications"
+  :show-icon="false"
+/>`;
+
+const demoActive = ref(false);
+const demoPlacement = ref("bottomLeft");
+const demoType = ref("success");
 
 const notifications = [
   {
-    name: 'Sarah M.',
-    action: 'just purchased Pro Plan',
-    time: '2 minutes ago',
-    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop'
+    name: "Sarah M.",
+    action: "just purchased Pro Plan",
+    time: "2 minutes ago",
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
   },
   {
-    name: 'James W.',
-    action: 'signed up for a free trial',
-    time: '5 minutes ago',
-    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop'
+    name: "James W.",
+    action: "signed up for a free trial",
+    time: "5 minutes ago",
+    avatar:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",
   },
   {
-    name: 'Emily R.',
-    action: 'upgraded to Enterprise',
-    time: '8 minutes ago',
-    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop'
+    name: "Emily R.",
+    action: "upgraded to Enterprise",
+    time: "8 minutes ago",
+    avatar:
+      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",
   },
   {
-    name: 'Michael T.',
-    action: 'just made a purchase',
-    time: '12 minutes ago'
+    name: "Michael T.",
+    action: "just made a purchase",
+    time: "12 minutes ago",
   },
   {
-    name: 'Lisa K.',
-    action: 'joined the newsletter',
-    time: '15 minutes ago',
-    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop'
-  }
-]
+    name: "Lisa K.",
+    action: "joined the newsletter",
+    time: "15 minutes ago",
+    avatar:
+      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop",
+  },
+];
 
 const startDemo = () => {
-  demoActive.value = true
-}
+  demoActive.value = true;
+};
 
 const stopDemo = () => {
-  demoActive.value = false
-}
+  demoActive.value = false;
+};
 </script>