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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<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>