refactor(04): use new toggle button & component

src/components/04_product-service/ProductCardComponent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { dateFormat } from 'src/utils/datetime';
 import { Status } from 'stores/types';
-
+import ToggleButton from '../button/ToggleButton.vue';
 withDefaults(
   defineProps<{
     title?: string;
@@ -128,23 +128,17 @@ withDefaults(
               </q-item>
               <q-item dense>
                 <q-item-section class="q-py-sm">
-                  <div class="q-pa-sm surface-2 rounded">
-                    <q-toggle
-                      dense
-                      size="sm"
+                  <div class="q-pa-sm surface-2 rounded flex items-center">
+                    <ToggleButton
+                      two-way
                       @click="$emit('toggleStatus', id)"
                       :model-value="!isDisabled"
-                      val="xs"
-                      padding="none"
-                    >
-                      <div class="q-ml-xs">
-                        {{
-                          !isDisabled
-                            ? $t('switchOnLabel')
-                            : $t('switchOffLabel')
-                        }}
-                      </div>
-                    </q-toggle>
+                    />
+                    <span class="q-pl-md">
+                      {{
+                        !isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
+                      }}
+                    </span>
                   </div>
                 </q-item-section>
               </q-item>