38 lines
796 B
Vue
38 lines
796 B
Vue
<template>
|
|
<div class="pt-6 pb-12 bg-gray-300">
|
|
<div
|
|
id="card"
|
|
class=""
|
|
>
|
|
<h2 class="text-center font-serif uppercase text-4xl xl:text-5xl">
|
|
Recent Articles
|
|
</h2>
|
|
<!-- container for all cards -->
|
|
<div class="container w-100 lg:w-4/5 mx-auto flex flex-col">
|
|
<BlogCard
|
|
v-for="post in blogPosts"
|
|
:key="post.id"
|
|
:post="post"
|
|
class="
|
|
flex flex-col md:flex-row overflow-hidden bg-white rounded-lg
|
|
shadow-xl mt-4 w-100 mx-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup async>
|
|
|
|
import useResource from '@/composables/useResource'
|
|
//import useUser from '@/composables/useUser'
|
|
import BlogCard from '@/components/blog/BlogCard'
|
|
|
|
const {
|
|
items: blogPosts,
|
|
fetchAll
|
|
} = useResource('users/1/blogPosts')
|
|
fetchAll()
|
|
|
|
</script>
|