munch-ease-frontend/src/components/ActionItem.vue

<template>
  <div class="card">
    <a @click="emit('click')">
      <h2>{{ title }}</h2>
      <img
        :src="image"
        :alt="title"
      >
    </a>
  </div>
</template>

<script setup>
const emit = defineEmits(['click'])
defineProps({
  title: { type: String, required: true },
  image: { type: String, required: true },
})
</script>

<style scoped>
img {
  width: 100%;
  height: auto;
}

.card {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  width: 20em;
  margin: 1em 1ex;
}

.card:hover {
  background-color: #ccc;
}
</style>