791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<template>
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-card flat :elevation="hover ? 8 : 0" @click.prevent="$router.push(route)" color="primary">
|
|
<v-card-text class="d-flex justify-space-between">
|
|
<div class="d-flex">
|
|
<v-avatar
|
|
size="60"
|
|
:color="hover ? 'accent' : 'deep-orange lighten-5'"
|
|
>
|
|
<v-icon :color="hover ? 'white' : 'accent'">{{ icon }}</v-icon>
|
|
</v-avatar>
|
|
|
|
<div v-if="count" class="mx-6 txt--text">
|
|
<v-card-title class="font-weight-bold my-0 pa-0">
|
|
{{ count }}
|
|
</v-card-title>
|
|
|
|
<v-card-subtitle v-if="count" class="my-0 pa-0">
|
|
{{ label }}
|
|
</v-card-subtitle>
|
|
</div>
|
|
|
|
<div v-else class="mx-6 txt--text d-flex align-center">
|
|
<v-card-title class="my-0 pa-0 text-subtitle-1">
|
|
{{ label }}
|
|
</v-card-title>
|
|
</div>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-hover>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
count: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
route: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
}
|
|
</script>
|