Files
interview-demo-code/spa/src/components/ProductCard.vue
Nikita Kiselev 846fa64fb4 feat: WIP
2025-07-10 18:31:02 +03:00

17 lines
601 B
Vue

<template>
<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>
<script setup>
</script>
<style scoped>
</style>