From b2b4804e78e24e914add8837e919dba62e069c99 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 21 Mar 2024 14:58:38 +0100
Subject: [PATCH] playground: add link

---
 playground/app.vue        |  3 ++-
 playground/pages/link.vue | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 playground/pages/link.vue

diff --git a/playground/app.vue b/playground/app.vue
index b06c4b5c..7d8433ea 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -19,6 +19,7 @@ const components = [
   'form-field',
   'input',
   'kbd',
+  'link',
   'modal',
   'navigation-menu',
   'popover',
@@ -36,7 +37,7 @@ function upperName (name: string) {
 <template>
   <UProvider>
     <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto">
-      <UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800" />
+      <UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800 overflow-x-auto" />
 
       <div class="flex-1 flex flex-col justify-center pb-12">
         <NuxtPage />
diff --git a/playground/pages/link.vue b/playground/pages/link.vue
new file mode 100644
index 00000000..08cd768d
--- /dev/null
+++ b/playground/pages/link.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const activeClass = 'text-primary-500 dark:text-primary-400'
+const inactiveClass = 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-2 text-sm">
+    <ULink v-slot="{ active }" active :active-class="activeClass" :inactive-class="inactiveClass">
+      Button active ({{ active }})
+    </ULink>
+    <ULink v-slot="{ active }" disabled :active-class="activeClass" :inactive-class="inactiveClass">
+      Button disabled ({{ active }})
+    </ULink>
+    <ULink v-slot="{ active }" to="/link" :active-class="activeClass" :inactive-class="inactiveClass">
+      Link ({{ active }})
+    </ULink>
+    <ULink v-slot="{ active }" to="/link" disabled :active-class="activeClass" :inactive-class="inactiveClass">
+      Link disabled ({{ active }})
+    </ULink>
+    <ULink v-slot="{ active }" to="/modal" :active-class="activeClass" :inactive-class="inactiveClass">
+      Modal ({{ active }})
+    </ULink>
+  </div>
+</template>