Kevin
58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { router } from '@inertiajs/vue3'
|
|
import { useAdminMode } from '~/composables/isAdminMode'
|
|
|
|
const props = defineProps({
|
|
computerId: Number,
|
|
imageSrc: String,
|
|
imageAlt: String,
|
|
title: String,
|
|
description: String,
|
|
cost: Number,
|
|
price: Number,
|
|
})
|
|
|
|
const { isAdminActive } = useAdminMode()
|
|
|
|
function goToShow() {
|
|
router.get(`/computers/${props.computerId}`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="rounded-lg bg-white shadow-secondary-1 dark:bg-surface-dark h-full flex flex-col hover:cursor-pointer"
|
|
@click="goToShow"
|
|
>
|
|
<img class="w-full h-2/3 object-cover" :src="imageSrc" :alt="imageAlt" />
|
|
<div class="flex flex-col justify-between grow px-6 py-2">
|
|
<div class="text-xl font-bold text-gray-900 line-clamp-4">
|
|
{{ props.title }}
|
|
</div>
|
|
<div class="flex justify-end mt-auto">
|
|
<span
|
|
v-if="isAdminActive"
|
|
class="inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full"
|
|
>
|
|
{{ props.cost?.toFixed(2) }}
|
|
</span>
|
|
<span
|
|
class="inline-block px-3 py-1 mb-2 mr-2 text-sm font-semibold text-gray-700 bg-gray-200 rounded-full"
|
|
>
|
|
{{ props.price?.toFixed(2) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.line-clamp-4 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|