feat(playground): add polished demos

Author: davidstackio

playground/app.config.ts

@@ -2,14 +2,15 @@ import {
   mdiAccountCog,
   mdiAccountMultiple,
   mdiAccountPlus,
+  mdiCog,
   mdiCommentQuote,
   mdiFirebase,
   mdiForum,
   mdiHome,
   mdiLifebuoy,
   mdiLogin,
+  mdiStar,
   mdiTelevisionPlay,
-  mdiTestTube,
   mdiViewDashboard,
 } from '@mdi/js'
 
@@ -44,16 +45,21 @@ export default defineAppConfig({
           to: '/',
           icon: mdiHome,
         },
+        {
+          text: 'Features',
+          to: '/features',
+          icon: mdiStar,
+        },
+        {
+          text: 'Config',
+          to: '/config',
+          icon: mdiCog,
+        },
         {
           text: 'Firebase',
           to: '/firebase',
           icon: mdiFirebase,
         },
-        {
-          text: 'Test',
-          to: '/test',
-          icon: mdiTestTube,
-        },
         {
           text: 'Sign In',
           to: '/signin',

playground/components/demo/DemoApp.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// Quick search
+const quickSearchValue = ref('')
+const searchGroups = [
+  {
+    title: 'Fruits',
+    items: ['Apple', 'Banana', 'Orange', 'Pear', 'Strawberry', 'Watermelon', 'Pineapple'],
+  },
+  {
+    title: 'Vegetables',
+    items: ['Carrot', 'Broccoli', 'Spinach'],
+  },
+]
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <v-card class="pa-4">
+          <h2>QuickSearch</h2>
+          <p class="mb-2">
+            Selected: {{ quickSearchValue || 'none' }}
+          </p>
+          <QuickSearch
+            v-model="quickSearchValue"
+            :search-groups="searchGroups"
+          />
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

playground/components/demo/DemoConfig.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { mdiCogOutline } from '@mdi/js'
+
+// STATE - GLOBAL
+const nuxtifyConfig = useNuxtifyConfig()
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <div class="d-flex align-center mb-4">
+          <v-icon
+            :icon="mdiCogOutline"
+            color="secondary"
+            size="large"
+            class="mr-2"
+          />
+          <h2 class="text-h5 font-weight-bold">
+            Active Module Config
+          </h2>
+        </div>
+        <p class="text-body-1 text-medium-emphasis mb-4">
+          The following config properties have been synced from <code>app.config.ts</code> to the <code>useNuxtifyConfig</code> composable, allowing layout templates and components to remain decoupled and highly flexible.
+        </p>
+
+        <v-card
+          class="pa-4 bg-grey-darken-4 text-light-blue-lighten-4 font-mono rounded"
+          elevation="2"
+        >
+          <pre style="overflow-x: auto; white-space: pre-wrap;">{{ JSON.stringify(nuxtifyConfig, null, 2) }}</pre>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>