From 1c19e5cb78914e3c12d4f6f63d2b78190c86a201 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Wed, 14 Jan 2026 23:34:34 +0700
Subject: [PATCH] Use Card components instead of buttons for product selection

---
 app/pages/catalog/hubs/[id].vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/pages/catalog/hubs/[id].vue b/app/pages/catalog/hubs/[id].vue
index 3acc8bb..c81ba02 100644
--- a/app/pages/catalog/hubs/[id].vue
+++ b/app/pages/catalog/hubs/[id].vue
@@ -43,16 +43,18 @@
         </template>
 
         <template #filters>
-          <div class="flex gap-2 flex-wrap">
-            <button
+          <div class="flex gap-3 overflow-x-auto pb-2">
+            <Card
               v-for="product in products"
               :key="product.uuid"
-              class="btn btn-sm"
-              :class="selectedProductUuid === product.uuid ? 'btn-primary' : 'btn-outline'"
+              padding="sm"
+              interactive
+              class="min-w-32 cursor-pointer shrink-0"
+              :class="selectedProductUuid === product.uuid ? 'ring-2 ring-primary' : ''"
               @click="selectedProductUuid = product.uuid"
             >
-              {{ product.name }}
-            </button>
+              <Text weight="semibold" size="sm">{{ product.name }}</Text>
+            </Card>
           </div>
         </template>