cosette/components/cosetta.vue

<script setup>
const { cosetta } = defineProps({
  cosetta: {
    type: Object,
    required: true
  }
})
</script>
<template>
  <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
    <nuxt-link :to="`/c/${cosetta.name}`">
      <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1555982105-d25af4182e4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80">
      <div class="pt-3 flex items-center justify-between">
        <p class=" text-black font-bold uppercase" v-text='cosetta.name'></p>
      </div>
      <p class="pt-1 text-gray-700 text-sm" v-text='cosetta.description'></p>
    </nuxt-link>
  </div>
</template>