cosette/components/cosetta.vue
2022-08-16 00:57:18 +02:00

22 lines
No EOL
798 B
Vue

<script setup>
const { cosetta } = defineProps({
cosetta: {
type: Object,
required: true
}
})
</script>
<template>
<div class="rounded overflow-hidden shadow-lg">
<img class="object-cover w-full h-48" :src="`src/public/${cosetta.images[0]}`" alt="Mountain">
<div class="px-6 py-4">
<nuxt-link :to="`/c/${cosetta.uuid}`">
<h2 class="text-pink-500 card-title hover:underline uppercase mb-2" v-text='cosetta.name' />
</nuxt-link>
<p class="text-gray-700 text-base line-clamp-2" v-text='cosetta.description' />
</div>
<div class="px-6 pt-4 pb-2">
<span v-for='tag in cosetta.tags' :key='tag' class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2" v-text='tag'/>
</div>
</div>
</template>