40 lines
832 B
Vue
40 lines
832 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
price: string
|
|
image: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="overflow-hidden rounded-2xl border bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
|
|
<img
|
|
:src="image"
|
|
:alt="title"
|
|
class="h-64 w-full object-cover"
|
|
>
|
|
|
|
<div class="space-y-4 p-5">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
{{ title }}
|
|
</h3>
|
|
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Premium product for your daily needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xl font-bold text-primary">
|
|
{{ price }}
|
|
</span>
|
|
|
|
<UButton>
|
|
Buy Now
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|