mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-06 13:05:36 -04:00
57 lines
1.0 KiB
Vue
57 lines
1.0 KiB
Vue
<template>
|
|
<v-card
|
|
:min-width="minWidth"
|
|
:to="to"
|
|
:hover="to ? true : false"
|
|
>
|
|
<div class="d-flex flex-no-wrap">
|
|
<v-avatar
|
|
class="ml-3 mr-0 mt-3"
|
|
color="primary"
|
|
size="36"
|
|
>
|
|
<v-icon
|
|
color="white"
|
|
class="pa-1"
|
|
size="x-large"
|
|
>
|
|
{{ activeIcon }}
|
|
</v-icon>
|
|
</v-avatar>
|
|
<div>
|
|
<v-card-title class="text-subtitle-1 pt-2 pb-2">
|
|
<slot name="title" />
|
|
</v-card-title>
|
|
<v-card-subtitle class="pb-2">
|
|
<slot name="value" />
|
|
</v-card-subtitle>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
icon: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
minWidth: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
to: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const { $globals } = useNuxtApp();
|
|
|
|
const activeIcon = computed(() => {
|
|
return props.icon ?? $globals.icons.primary;
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|