playground: update

playground/app.config.ts

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

playground/app.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
+useHead({
+  bodyAttrs: {
+    class: 'antialiased font-sans text-gray-900 dark:text-white bg-white dark:bg-gray-900'
+  }
+})
+
+const components = ['button', 'tooltip']
 </script>
 
 <template>
-  <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="/" />
+  <UProvider>
+    <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center">
+      <div class="flex gap-1">
+        <ULink v-for="component in components" :key="component" :to="`/${component}`" active-class="text-primary capitalize text-sm">
+          {{ component }}
+        </ULink>
+      </div>
 
-      <UButton color="green" trailing-icon="i-heroicons-light-bulb" to="/about" label="/about" />
-
-      <UButton color="red" label="Button" class="font-bold" />
-    </div>
-
-    <NuxtPage />
-  </UContainer>
+      <NuxtPage />
+    </UContainer>
+  </UProvider>
 </template>

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

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

playground/pages/button.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex gap-1">
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="outline" />
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="soft" />
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="ghost" />
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="link" />
+  </div>
+</template>

playground/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>

playground/pages/tooltip.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex gap-1">
+    <UTooltip text="Tooltip">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
+    </UTooltip>
+  </div>
+</template>