создаю телегу товаров

components/ProductDescription.vue

@@ -2,7 +2,7 @@
   <div class="product-description">
     <h1>{{ productsData?.name }}</h1>
 
-    <h2>{{ currentVariant?.options[0]?.price }}  <Icon name="ph:currency-rub" /></h2>
+    <ProductPrice :price="currentVariant?.options[0]?.price" />
 
     <ProductVariations v-if="colors?.length > 1" />
 
@@ -47,6 +47,7 @@
 </template>
 
 <script setup lang="ts">
+import ProductPrice from '~/components/ProductPrice.vue'
 import ProductVariations from '~/components/ProductVariations.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
@@ -92,11 +93,12 @@ function addToCartBtn() {
 </script>
 
 <style lang="scss">
+@use '~/assets/scss/utils' as *;
+
 .product-description {
   width: 100%;
   max-width: 335px;
-  padding-top: 30px;
-  padding-inline: 30px;
+  padding: 30px 30px 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -109,6 +111,10 @@ function addToCartBtn() {
     max-height: calc(100vh - 80px);
   }
 
+  @include mobile {
+    padding: 0 10px;
+  }
+
   &__sizes {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -118,13 +124,5 @@ function addToCartBtn() {
   &__size {
     width: 65px;
   }
-
-  h2 {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    align-items: center;
-    text-align: center;
-  }
 }
 </style>

components/ProductImages.vue

@@ -17,7 +17,7 @@
   >
     <SwiperSlide
       v-for="image in currentVariantImages?.slice(0, 5)"
-      :key="image?.id"
+      :key="image?.src"
     >
       <img width="100%" :src="image?.src" :alt="image?.src">
     </SwiperSlide>

components/ProductPrice.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="product-price">
+    <h2>{{ price }}  <Icon name="ph:currency-rub" /></h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  price: {
+    type: [String, Number],
+    required: true,
+  },
+})
+</script>
+
+<style lang="scss">
+.product-price {
+  h2 {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+    text-align: center;
+  }
+}
+</style>