40 lines
985 B
Vue
40 lines
985 B
Vue
<script setup>
|
||
import { decimalFormatter } from '@/utils/helpers.js'
|
||
|
||
defineProps({
|
||
imageUrl: String,
|
||
title: String,
|
||
price: Number,
|
||
isAdded: Boolean,
|
||
isFavorite: Boolean,
|
||
onClickAdd: Function,
|
||
onClickFavorite: Function,
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="relative border bg-white border-slate-100 rounded-3xl p-8 cursor-pointer transition hover:-translate-y-2 hover:shadow-xl">
|
||
<img
|
||
:src="isFavorite ? '/like-2.svg' : '/like-1.svg'"
|
||
alt="Like"
|
||
class="absolute top-8 left-8"
|
||
@click="onClickFavorite"
|
||
>
|
||
|
||
<img :src="imageUrl" alt="Sneaker">
|
||
<p class="mt-2">{{title}}</p>
|
||
|
||
<div class="flex justify-between mt-5">
|
||
<div class="flex flex-col">
|
||
<span class="text-slate-400 uppercase">Цена:</span>
|
||
<b>{{decimalFormatter.format(price)}} руб.</b>
|
||
</div>
|
||
|
||
<img @click="onClickAdd" :src="isAdded ? '/checked.svg' : '/plus.svg'" alt="Add">
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
|