From c9d1e2d02b7652f38f481a7a8f65a43c3b8b0ee7 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 30 Jan 2025 08:38:40 +0300
Subject: [PATCH] labels

---
 pages/index.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index ee50051..f79bed6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -102,11 +102,11 @@ const setCalcData = (id: number) => {
             <div class="container">
                 <div class="flex col-span-full gap-2 justify-center">
                     <template v-for="item in calculators">
-                        <div class="rounded p-2 cursor-pointer hover:bg-ioprim-300 border border-ioprim-300" :class="[{
-                            'bg-ioprim-200': openTab !== item.id,
-                            'bg-ioprim-400': openTab == item.id,
-                        }]" @click="setCalcData(item.id)">
-                            {{ item.title }}
+                        <div class="flex items-center gap-2">
+                            <label class="rounded p-2 cursor-pointe peer-checked:bg-ioprim-100">
+                                <input type="radio" :value="item.id" v-model="openTab">
+                                {{ item.title }}
+                            </label>
                         </div>
                     </template>
                 </div>