This repository has been archived on 2021-12-13. You can view files and clone it, but cannot push or open issues or pull requests.
portfolio/components/Blogs.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>