feat(playground): add polished demos

Author: davidstackio

playground/app.vue

@@ -18,25 +18,20 @@ useSeoMeta({
     <AppAnnouncement />
 
     <v-main>
-      <v-container>
+      <v-container class="py-8">
         <v-row>
           <v-col cols="12">
-            <h1>{{ nuxtifyConfig.brand?.name }} playground</h1>
-          </v-col>
-        </v-row>
-
-        <!-- Nuxtify config -->
-        <v-row>
-          <v-col cols="12">
-            <v-card class="pa-4">
-              <h2>nuxtifyConfig</h2>
-              <pre>{{ nuxtifyConfig }}</pre>
-            </v-card>
+            <h1>Welcome to the {{ nuxtifyConfig.brand?.name }} playground!</h1>
+            <p class="text-body-1 text-medium-emphasis">
+              Explore the core functionalities and configuration of the <strong>@nuxtify/core</strong> module.
+            </p>
           </v-col>
         </v-row>
       </v-container>
 
       <DemoCore />
+
+      <DemoConfig />
     </v-main>
 
     <AppToast class="d-print-none" />

playground/components/demo/DemoConfig.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// 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="mdi-cog-outline"
+            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>