mirror of https://github.com/nuxt/nuxt.git
76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<component
|
|
:is="component"
|
|
:to="to"
|
|
:aria-label="title"
|
|
class="flex flex-col items-center transition duration-200 p-6 rounded-md"
|
|
:class="hoverClass"
|
|
>
|
|
<InjectComponent
|
|
:component="image"
|
|
class="mb-4 transition duration-200 text-primary group-hover:text-primary-400"
|
|
:class="imageClass"
|
|
>
|
|
<img loading="lazy" :src="image" :alt="`A ${title} image`">
|
|
</InjectComponent>
|
|
<h3 class="relative inline-flex mb-1 text-center text-body-lg items-center lg:text-body-xl font-bold">
|
|
{{ title }}
|
|
<span v-if="soon" class="absolute -right-48px inline-flex items-center mt-1px px-1.5 py-0.5 rounded text-xs font-medium font-mono bg-cloud-surface dark:bg-sky-dark dark:text-white">soon</span>
|
|
</h3>
|
|
<p class="text-center text-sm lg:text-base mb-4">
|
|
{{ description }}
|
|
</p>
|
|
</component>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent, computed } from '@nuxtjs/composition-api'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
image: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
imageClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
soon: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hoverClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
to: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
linkName: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
setup (props) {
|
|
const component = computed(() => {
|
|
if (props.to && !props.linkName) {
|
|
return 'Link'
|
|
}
|
|
return 'div'
|
|
})
|
|
|
|
return { component }
|
|
}
|
|
})
|
|
</script>
|