From f852a6aedf0cf717b7d28ef4d455b1657ce770e4 Mon Sep 17 00:00:00 2001
From: Julien Ripouteau <julien@ripouteau.com>
Date: Tue, 9 Jan 2024 22:39:35 +0100
Subject: [PATCH] feat: add v6 support tag

---
 resources/components/tag.vue                     |  4 +++-
 resources/pages/home/components/package_card.vue | 10 ++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/resources/components/tag.vue b/resources/components/tag.vue
index e7466f3..250eddb 100644
--- a/resources/components/tag.vue
+++ b/resources/components/tag.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="rounded-full bg-base4 px-2 py-0.2 text-sm font-content">
+  <div
+    class="flex items-center justify-center rounded-full bg-base4 px-2 py-0.2 text-sm font-content"
+  >
     <slot />
   </div>
 </template>
diff --git a/resources/pages/home/components/package_card.vue b/resources/pages/home/components/package_card.vue
index e3707cd..8bddc82 100644
--- a/resources/pages/home/components/package_card.vue
+++ b/resources/pages/home/components/package_card.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Link } from '@inertiajs/vue3'
 
 import Tag from '@/components/tag.vue'
@@ -7,9 +8,11 @@ import PackageLogo from '@/components/package_logo.vue'
 import PackageStats from '@/components/package_stats.vue'
 import AdonisIcon from '@/components/icons/adonis_icon.vue'
 
-defineProps<{
+const props = defineProps<{
   package: PackageInfo
 }>()
+
+const isV6Compatible = computed(() => props.package.compatibility?.adonis.includes('^6'))
 </script>
 
 <template>
@@ -19,7 +22,10 @@ defineProps<{
     target="_blank"
   >
     <div class="w-full flex items-center justify-between">
-      <Tag data-testid="package-category">{{ package.category }}</Tag>
+      <div class="flex gap-2">
+        <Tag data-testid="package-category">{{ package.category }}</Tag>
+        <Tag v-if="isV6Compatible" class="bg-primary bg-opacity70">V6 support</Tag>
+      </div>
       <i
         class="i-icon-park-outline-share inline-block text-xs text-base10 opacity-0 transition duration-500 hover:text-white group-hover:opacity-100"
       />