feat: WIP

spa/src/components/ProductCard.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="bg-white rounded-lg shadow p-3">
-    <img src="https://placehold.co/300x300" alt="Футболка" class="w-full h-auto rounded-md mb-2" />
-    <h2 class="font-semibold text-base">Базовая футболка</h2>
-    <p class="text-sm text-gray-500">RUB 6,000</p>
+  <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+    <a v-for="product in products" :key="product.id" :href="product.href" class="group">
+      <img :src="product.imageSrc" :alt="product.imageAlt" class="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8" />
+      <h3 class="mt-4 text-sm text-gray-700">{{ product.name }}</h3>
+      <p class="mt-1 text-lg font-medium text-gray-900">{{ product.price }}</p>
+    </a>
   </div>
 </template>
 

spa/src/components/ProductList.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="bg-white">
+    <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+      <h2 class="sr-only">Products</h2>
+
+      <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+        <a v-for="product in products" :key="product.id" class="group">
+          <img :src="product.image" :alt="product.name"
+               class="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8"/>
+          <h3 class="mt-4 text-sm text-gray-700">{{ product.name }}</h3>
+          <p class="mt-1 text-lg font-medium text-gray-900">{{ product.price }}</p>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {$fetch} from 'ofetch';
+import {onMounted, ref} from "vue";
+
+const products = ref([]);
+
+onMounted(async () => {
+  const {data} = await $fetch('http://localhost:8000/index.php?route=tgshop/handle&api_action=products');
+  products.value = data;
+});
+</script>