product-card

pages/index.vue

@@ -1,22 +1,61 @@
 <template>
-  <div class="card">
-    <ProductImages />
-    <ProductDescription />
+  <div class="index">
+    <div
+      class="cards-list"
+    >
+      <pre>
+      {{ productCardData }}
+      </pre>
+
+      <div
+        v-for="product in productCardData"
+        :key="product.id"
+        class="card"
+        @click="router.push(`/product/${product.id}`)"
+      >
+        <img :src="product?.images[0]?.src" alt="product?.image">
+
+        <div class="card__description">
+          <div>{{ product?.name }}</div>
+
+          <div class="d-flex align-items-center">
+            {{ product?.price }}
+            <Icon name="ph:currency-rub" />
+          </div>
+
+          <div v-if="product?.variations?.length">
+            {{ `+${product?.variations?.length} Цвета` }}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useProductsList } from '~/composables'
+
+const { productCardData } = useProductsList()
+const router = useRouter()
 </script>
 
 <style lang="scss">
-.card {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
+.cards-list {
+  padding: 40px;
 
-  @media (max-width: 768px) {
-    flex-direction: column;
-    align-items: center;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
+}
+
+.card {
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+
+  &__description {
+    padding-inline: 10px;
   }
 }
 </style>

pages/product/[id].vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="product">
+    <ProductImages />
+    <ProductDescription />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+.product {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>