Untitled

<script setup>
defineProps({
  recipeList: Array,
});
</script>
<template>
  <div class="d-flex flex-row justify-content-around gap-3 w-100 flex-wrap">
    <div v-for="item in recipeList" :key="item.id">
      <div
        class="card text-decoration-none col-12 position-relative"
        style="padding-top: 12px; padding-bottom: 12px; height: 398px"
      >
        <img
          :src="item.imageLink"
          class="card-img-top"
          alt="Food"
          height="240"
          width="285"
          style="object-fit: fill"
        />
        <div class="card-body" style="color: #0a0a0a">
          <p class="mb-0">{{ item.category }}</p>
          <div class="h-50">
            <h4 class="fs-5 mb-0">{{ item.name }}</h4>
          </div>
          <p>Recipe By {{ item.username }}</p>
        </div>
      </div>
      <div
        class="position-absolute text-secondary bg-light px-2 py-1 rounded-circle top-0 end-0 m-4 like-icon"
      >
        <i class="fas fa-heart"></i>
      </div>
    </div>
  </div>
</template>
<style scoped></style>