wf4/app/components/Blog/Card.vue
webfussel 91b59e4ebe add: basic blog layout
Basic Blog Layout to work on
2025-07-11 13:32:59 +02:00

42 lines
No EOL
941 B
Vue

<template>
<NuxtLink :to="link" class="BlogCard z-2">
<img :src="image" alt=" " aria-hidden="true" />
<div class="card-content">
<header>
<span class="chip">{{ category }}</span>
<h2>{{ title }}</h2>
<small>{{ description }}</small>
</header>
<main>
<ContentRenderer :value="excerpt" />
</main>
<footer>
<BlogAuthor :name="author.name" :image="author.image" :date="date" />
<div class="tags">
<span>tags</span>
<span class="tag" v-for="tag in tags">{{tag}}</span>
</div>
</footer>
</div>
</NuxtLink>
</template>
<script setup lang="ts">
type Props = {
title : string
description : string
image : string
date : string
excerpt : { type: string, children?: any }
link : string
tags : string[]
category : string
author : {
name : string
image : string
}
}
defineProps<Props>()
</script>