From aaedabda3b0eec49336d3b6d7cceb426823b759e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 11 Mar 2024 15:08:48 +0100
Subject: [PATCH] playground: update

---
 playground/app.vue               | 10 ++++++----
 playground/pages/button.vue      |  6 +++---
 playground/pages/collapsible.vue | 13 ++++++++++---
 playground/pages/tooltip.vue     |  4 ++--
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/playground/app.vue b/playground/app.vue
index fdf4c340..e59868ad 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -5,19 +5,21 @@ useHead({
   }
 })
 
-const components = ['badge', 'button', 'collapsible', 'tooltip']
+const components = ['avatar', 'badge', 'button', 'collapsible', 'tooltip']
 </script>
 
 <template>
   <UProvider>
-    <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center">
-      <div class="flex gap-1.5">
+    <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto">
+      <div class="flex gap-1.5 py-4">
         <ULink v-for="component in components" :key="component" :to="`/${component}`" active-class="text-primary capitalize text-sm">
           {{ component }}
         </ULink>
       </div>
 
-      <NuxtPage />
+      <div class="flex-1 flex flex-col justify-center">
+        <NuxtPage />
+      </div>
     </UContainer>
   </UProvider>
 </template>
\ No newline at end of file
diff --git a/playground/pages/button.vue b/playground/pages/button.vue
index c92b0854..1b90df68 100644
--- a/playground/pages/button.vue
+++ b/playground/pages/button.vue
@@ -45,7 +45,7 @@
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" />
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
     </div>
-    <div class="flex items-center gap-2 -ml-[174px]">
+    <div class="flex items-center gap-2 -ml-[171px]">
       <UButton icon="i-heroicons-rocket-launch" label="Button" size="2xs" />
       <UButton icon="i-heroicons-rocket-launch" label="Button" size="xs" />
       <UButton icon="i-heroicons-rocket-launch" label="Button" size="sm" />
@@ -53,7 +53,7 @@
       <UButton icon="i-heroicons-rocket-launch" label="Button" size="lg" />
       <UButton icon="i-heroicons-rocket-launch" label="Button" size="xl" />
     </div>
-    <div class="flex items-center gap-2 -ml-[162px]">
+    <div class="flex items-center gap-2 -ml-[159px]">
       <UButton icon="i-heroicons-rocket-launch" label="Square" square size="2xs" />
       <UButton icon="i-heroicons-rocket-launch" label="Square" square size="xs" />
       <UButton icon="i-heroicons-rocket-launch" label="Square" square size="sm" />
@@ -61,7 +61,7 @@
       <UButton icon="i-heroicons-rocket-launch" label="Square" square size="lg" />
       <UButton icon="i-heroicons-rocket-launch" label="Square" square size="xl" />
     </div>
-    <div class="flex items-center gap-2 -ml-[68px]">
+    <div class="flex items-center gap-2 -ml-[67px]">
       <UButton icon="i-heroicons-rocket-launch" size="2xs" />
       <UButton icon="i-heroicons-rocket-launch" size="xs" />
       <UButton icon="i-heroicons-rocket-launch" size="sm" />
diff --git a/playground/pages/collapsible.vue b/playground/pages/collapsible.vue
index 5e47372a..57e85e91 100644
--- a/playground/pages/collapsible.vue
+++ b/playground/pages/collapsible.vue
@@ -1,10 +1,17 @@
 <template>
   <div class="flex gap-1.5">
-    <UCollapsible class="space-y-2 flex flex-col justify-start">
-      <UButton trailing-icon="i-heroicons-chevron-right" label="Open" class="group" :ui="{ icon: 'group-data-[state=open]:rotate-180' }" />
+    <UCollapsible class="space-y-2 w-48">
+      <UButton
+        class="group"
+        color="gray"
+        label="Open"
+        block
+        trailing-icon="i-heroicons-chevron-right-20-solid"
+        :ui="{ trailingIcon: 'group-data-[state=open]:rotate-90 transition' }"
+      />
 
       <template #content>
-        <div class="bg-red-500 h-12 w-48" />
+        <div class="bg-red-500 h-12 w-full" />
       </template>
     </UCollapsible>
   </div>
diff --git a/playground/pages/tooltip.vue b/playground/pages/tooltip.vue
index 3b1865a8..3c4889f9 100644
--- a/playground/pages/tooltip.vue
+++ b/playground/pages/tooltip.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex gap-1.5">
-    <UTooltip content="Tooltip" side="bottom">
-      <UButton icon="i-heroicons-rocket-launch" label="Button" loading />
+    <UTooltip content="Tooltip">
+      <UButton icon="i-heroicons-rocket-launch" label="Button" disabled />
     </UTooltip>
   </div>
 </template>
\ No newline at end of file