mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
2e6b877ba9
* docs: fix typos * typos: fix typos found by `codespell` across the codebase * docs: fix `macOS` spelling * docs: fix `authentification` terminology "Authentification" is not a thing. * docs: fix `localhost` typo in example link * typos: fix in-code typos These are potentially higher risk, but no other mentions of these typos show up in the codebase.
57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<template>
|
|
<v-card outlined nuxt :to="link.to" height="100%" class="d-flex flex-column">
|
|
<div v-if="$vuetify.breakpoint.smAndDown" class="pa-2 mx-auto">
|
|
<v-img max-width="150px" max-height="125" :src="image" />
|
|
</div>
|
|
<div class="d-flex justify-space-between">
|
|
<div>
|
|
<v-card-title class="headline pb-0">
|
|
<slot name="title"> </slot>
|
|
</v-card-title>
|
|
<div class="d-flex justify-center align-center">
|
|
<v-card-text class="d-flex flex-row mb-auto">
|
|
<slot name="default"></slot>
|
|
</v-card-text>
|
|
</div>
|
|
</div>
|
|
<div v-if="$vuetify.breakpoint.mdAndUp" class="py-2 px-10 my-auto">
|
|
<v-img max-width="150px" max-height="125" :src="image"></v-img>
|
|
</div>
|
|
</div>
|
|
<v-divider class="mt-auto"></v-divider>
|
|
<v-card-actions>
|
|
<v-btn text color="info" :to="link.to">
|
|
{{ link.text }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "@nuxtjs/composition-api";
|
|
|
|
interface LinkProp {
|
|
text: string;
|
|
url?: string;
|
|
to: string;
|
|
}
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
link: {
|
|
type: Object as () => LinkProp,
|
|
required: true,
|
|
},
|
|
image: {
|
|
type: String,
|
|
required: false,
|
|
default: "",
|
|
},
|
|
},
|
|
setup() {
|
|
return {};
|
|
},
|
|
});
|
|
</script>
|
|
|