1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-30 02:26:36 +00:00
homebox/frontend/components/Item/Card.vue

38 lines
999 B
Vue
Raw Normal View History

2022-09-03 09:17:57 +00:00
<template>
<NuxtLink
class="group card bg-neutral text-neutral-content hover:bg-primary transition-colors duration-300"
:to="`/item/${item.id}`"
>
<div class="card-body py-4 px-6">
<h2 class="card-title">
<Icon name="mdi-package-variant" />
{{ item.name }}
</h2>
2022-09-06 18:32:13 +00:00
<p>{{ description }}</p>
2022-09-03 09:17:57 +00:00
<div class="flex gap-2 flex-wrap justify-end">
<LabelChip
v-for="label in item.labels"
:key="label.id"
:label="label"
class="badge-primary group-hover:badge-secondary"
/>
2022-09-03 09:17:57 +00:00
</div>
</div>
</NuxtLink>
</template>
<script setup lang="ts">
import { ItemOut, ItemSummary } from "~~/lib/api/types/data-contracts";
import { truncate } from "~~/lib/strings";
2022-09-03 09:17:57 +00:00
2022-09-06 18:32:13 +00:00
const props = defineProps({
2022-09-03 09:17:57 +00:00
item: {
type: Object as () => ItemOut | ItemSummary,
2022-09-03 09:17:57 +00:00
required: true,
},
});
2022-09-06 18:32:13 +00:00
const description = computed(() => {
return truncate(props.item.description, 80);
});
2022-09-03 09:17:57 +00:00
</script>