app/frontend/src/components/base/BaseActionCard.vue
<template>
<v-hover>
<template v-slot="{ hover }">
<router-link class="action-link" :to="{ name: linkName, params: linkParams }">
<v-card tile :elevation="hover ? 12 : 4" class="action-card mx-auto">
<v-system-bar />
<div class="px-5 py-3">
<slot />
</div>
</v-card>
</router-link>
</template>
</v-hover>
</template>
<script>
export default {
name: 'BaseActionCard',
props: {
linkName: String,
linkParams: Object
}
};
</script>
<style scoped>
.action-card {
height: 100%;
}
.v-card {
border-radius: 0.4rem;
}
.v-system-bar {
background-color: #38598a;
}
a {
text-decoration: none;
}
</style>