From 2fefa8ab74675e54763aec77c5b27ac62950e36b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 22 Mar 2024 12:49:59 +0100
Subject: [PATCH] playground(link): improve

---
 playground/pages/link.vue | 90 ++++++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 43 deletions(-)

diff --git a/playground/pages/link.vue b/playground/pages/link.vue
index 2d148b5c..911127e9 100644
--- a/playground/pages/link.vue
+++ b/playground/pages/link.vue
@@ -1,51 +1,55 @@
 <template>
-  <div class="flex flex-col items-start gap-2 text-sm">
-    <ULink raw>
-      Button raw
-    </ULink>
+  <div class="flex items-center gap-4">
+    <div class="flex flex-col items-start gap-2 text-sm">
+      <ULink raw>
+        Button raw
+      </ULink>
 
-    <ULink active>
-      Button active
-    </ULink>
-    <ULink active class="font-medium" active-class="text-gray-900 dark:text-white">
-      Button active with class
-    </ULink>
-    <ULink active disabled>
-      Button active disabled
-    </ULink>
+      <ULink active>
+        Button active
+      </ULink>
+      <ULink active class="font-medium" active-class="text-gray-900 dark:text-white">
+        Button active with class
+      </ULink>
+      <ULink active disabled>
+        Button active disabled
+      </ULink>
 
-    <ULink>
-      Button inactive
-    </ULink>
-    <ULink class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
-      Button inactive with class
-    </ULink>
-    <ULink disabled>
-      Button inactive disabled
-    </ULink>
+      <ULink>
+        Button inactive
+      </ULink>
+      <ULink class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
+        Button inactive with class
+      </ULink>
+      <ULink disabled>
+        Button inactive disabled
+      </ULink>
+    </div>
 
-    <ULink to="/link" raw>
-      Link raw
-    </ULink>
+    <div class="flex flex-col items-start gap-2 text-sm">
+      <ULink to="/link" raw>
+        Link raw
+      </ULink>
 
-    <ULink to="/link">
-      Link active
-    </ULink>
-    <ULink to="/link" class="font-medium" active-class="text-gray-900 dark:text-white">
-      Link active with class
-    </ULink>
-    <ULink to="/link" disabled>
-      Link active disabled
-    </ULink>
+      <ULink to="/link">
+        Link active
+      </ULink>
+      <ULink to="/link" class="font-medium" active-class="text-gray-900 dark:text-white">
+        Link active with class
+      </ULink>
+      <ULink to="/link" disabled>
+        Link active disabled
+      </ULink>
 
-    <ULink to="/button">
-      Link inactive
-    </ULink>
-    <ULink to="/button" class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
-      Link inactive with class
-    </ULink>
-    <ULink to="/button" disabled>
-      Link inactive disabled
-    </ULink>
+      <ULink to="/button">
+        Link inactive
+      </ULink>
+      <ULink to="/button" class="font-medium" inactive-class="hover:text-primary-500 dark:hover:text-primary-400">
+        Link inactive with class
+      </ULink>
+      <ULink to="/button" disabled>
+        Link inactive disabled
+      </ULink>
+    </div>
   </div>
 </template>