playground: update

playground/app.config.ts

@@ -1,5 +1,6 @@
 export default defineAppConfig({
   ui: {
+    primary: 'green',
     button: {
       base: 'font-semibold',
       variants: {

playground/app.vue

@@ -1,8 +1,16 @@
+<script setup lang="ts">
+</script>
+
 <template>
-  <div class="max-w-7xl mx-auto py-24">
-    <UButton color="green" icon="i-heroicons-rocket-launch" to="/" label="/" />
-    <UButton color="red" icon="i-heroicons-rocket-launch" to="/about" label="/about" square />
+  <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center">
+    <div class="flex gap-1">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="/" />
+
+      <UButton color="green" trailing-icon="i-heroicons-light-bulb" to="/about" label="/about" />
+
+      <UButton color="red" label="Button" class="font-bold" />
+    </div>
 
     <NuxtPage />
-  </div>
+  </UContainer>
 </template>

playground/pages/[...slug].vue

@@ -1,5 +1,7 @@
 <template>
-  <div>{{ $route.path }}</div>
+  <div class="text-primary-500">
+    Route: {{ $route.path }}
+  </div>
 </template>
 
 <script setup lang="ts">