64 lines
2.1 KiB
Vue
64 lines
2.1 KiB
Vue
<template>
|
|
<div class="mt-16">
|
|
<div class="flex justify-center items-center text-base font-semibold text-gray-600 dark:text-gray-300">
|
|
<h2 class="text-center">{{ title }}</h2>
|
|
<IconDoubleDown class="h-4 w-4"/>
|
|
</div>
|
|
|
|
<div class="wrapper-small my-5">
|
|
|
|
<div v-for="post of posts" :key="post.slug" class="project-card md:flex mt-10">
|
|
|
|
<div class="img max-w-lg md:max-w-sm mx-auto m-2">
|
|
<nuxt-link :to="`/posts/${post.slug}`">
|
|
<img :alt="post.title" :src="`${post.thumbnail[0].url}`" class="rounded-xl"/>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="flex flex-col justify-between max-w-lg mx-auto">
|
|
<div class="txt md:px-5 lg:px-0">
|
|
<nuxt-link :to="`/posts/${post.slug}`">
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">{{ post.title }}</h2>
|
|
</nuxt-link>
|
|
<p class="font-semibold text-gray-600 dark:text-gray-300 text-sm">{{ formatDate(post.created_at) }}</p>
|
|
<div class="flex flex-col justify-between max-w-lg mx-auto">
|
|
</div>
|
|
<span
|
|
v-for="tag of post.tags" :key="tag"
|
|
class="font-semibold text-gray-600 bg-opacity-25 dark:bg-opacity-40 dark:text-gray-300 text-sm rounded bg-gray-200 dark:bg-primary mr-1 px-1">
|
|
#{{ tag }}
|
|
</span>
|
|
<p class="text-base text-gray-700 dark:text-gray-200 my-1">{{ post.description }}</p>
|
|
<nuxt-link
|
|
:to="`/posts/${post.slug}`"
|
|
class="text-base font-semibold text-gray-700 dark:text-gray-200 my-3 hover:underline">
|
|
Read more >
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "Blogs",
|
|
},
|
|
posts: {
|
|
type: Array,
|
|
default() {return []}
|
|
},
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
const options = {year: 'numeric', month: 'long', day: 'numeric'}
|
|
return new Date(date).toLocaleDateString('en', options)
|
|
}
|
|
},
|
|
}
|
|
</script>
|