fix: style

bo/src/stores/product.ts

@@ -42,6 +42,22 @@ export const useProductStore = defineStore('product', () => {
       loading.value = false
     }
   }
+
+  async function getProductDescriptionTranslations() {
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await useFetchJson('api/v1/restricted/product-description/translate-product-description?productID=51&productShopID=1&productFromLangID=1&productToLangID=2')
+      productDescription.value = response
+    } catch (e: any) {
+      error.value = e?.message || 'Failed to load product description'
+      console.error('Failed to fetch product description:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+  
   // Fetch single product by ID
   async function fetchProductById(id: number) {
     loading.value = true
@@ -102,6 +118,7 @@ export const useProductStore = defineStore('product', () => {
     getProductDescription,
     fetchProductById,
     clearCurrentProduct,
-    saveProductDescription
+    saveProductDescription,
+    getProductDescriptionTranslations
   }
 })

bo/src/views/customer/ProductDetailView.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="container my-10 ">
+
+    <UButton>Translations</UButton>
     <div class="flex items-start gap-30">
       <div class="flex flex-col gap-10">
         <p class="p-60 bg-yellow-300">img</p>
@@ -8,11 +10,14 @@
         <p class="text-[25px] font-bold">{{ productStore.productDescription.name }}</p>
         <p v-html="productStore.productDescription.description_short"></p>
 
-        <div class="space-2">
+        <div>
           <p>Ilość:</p>
-          <button @click="decrement" class="px-3 py-1 bg-gray-200 rounded">-</button>
-          <span class="px-2">{{ quantity }}</span>
-          <button @click="increment" class="px-3 py-1 bg-gray-200 rounded">+</button>
+          <div
+            class="flex items-center w-[15%] border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-200">
+            <button @click="decrement" class="px-3 py-1 cursor-pointer">-</button>
+            <span class="px-6">{{ quantity }}</span>
+            <button @click="increment" class="px-3 py-1 cursor-pointer">+</button>
+          </div>
         </div>
 
         <div class="space-[10px]">
@@ -25,32 +30,36 @@
             <UIcon name="marketeq:car-shipping" class="text-[25px] text-green-600" />
             <p class="text-[18px] font-bold">{{ productStore.productDescription.delivery_in_stock }}</p>
           </div>
-          <UButton>
+          <UButton class="cursor-pointer">
             <UIcon name="tdesign:cart-filled" class="text-[20px]" />
             <p> Dodaj do koszyka </p>
           </UButton>
         </div>
       </div>
-
     </div>
 
     <div class="mt-16">
       <div class="flex gap-4 m-2">
-        <UButton @click="activeTab = 'description'" color="neutral" variant="outline">
+        <UButton @click="activeTab = 'description'"
+          :class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
+          variant="outline">
           <p>Description</p>
         </UButton>
-        <UButton @click="activeTab = 'usage'" color="neutral" variant="outline">
+
+        <UButton @click="activeTab = 'usage'"
+          :class="['cursor-pointer', activeTab === 'usage' ? 'bg-blue-500 text-white' : '']" color="neutral"
+          variant="outline">
           <p>Usage</p>
         </UButton>
       </div>
 
       <div v-if="activeTab === 'usage'">
         <div class="flex  items-center gap-3 mb-3">
-          <UButton @click="usageEdit.enableEdit()" class="flex items-center gap-2 m-2">
+          <UButton @click="usageEdit.enableEdit()" class="flex items-center gap-2 m-2 cursor-pointer">
             <p>Create Text</p>
             <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px]" />
           </UButton>
-          <UButton @click="save" color="neutral" variant="outline" class="p-2.5">
+          <UButton @click="save" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
             <p>Save the edited text</p>
           </UButton>
         </div>
@@ -61,11 +70,11 @@
 
       <div v-if="activeTab === 'description'">
         <div class="flex items-center gap-3 mb-3">
-          <UButton @click="descriptionEdit.enableEdit()" class="flex items-center gap-2 m-2">
+          <UButton @click="descriptionEdit.enableEdit()" class="flex items-center gap-2 m-2 cursor-pointer">
             <p>Create Text</p>
             <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px]" />
           </UButton>
-          <UButton @click="save" color="neutral" variant="outline" class="p-2.5">
+          <UButton @click="save" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
             <p>Save the edited text</p>
           </UButton>
         </div>
@@ -85,6 +94,7 @@ import { useEditable } from '@/composable/useConteditable'
 const activeTab = ref('description')
 const productStore = useProductStore()
 await productStore.getProductDescription()
+await productStore.getProductDescriptionTranslations()
 
 const quantity = ref(1)
 
@@ -106,10 +116,10 @@ const save = async () => {
 
   descriptionEdit.disableEdit()
   usageEdit.disableEdit()
-  await productStore.saveProductDescription({
-    description,
-    usage
-  })
+  // await productStore.saveProductDescription({
+  //   description,
+  //   usage
+  // })
 }
 
 </script>