<template>
	<div
		class="
      flex
      m-2
      gap-2
      items-center
      shadow-md
      w-1/4
      flex-grow
      rounded
      overflow-hidden
    "
		style="border: 1px solid #eee"
	>
		BlogIndex

		<BlogCard
			v-for="post in blogPosts"
			:key="post.id"
			:post="post"
		/>
	</div>
</template>

<script setup>
import useResource from '@/composables/useResource'
//import useUser from '@/composables/useUser'
import BlogCard from '@/components/blog/BlogCard'

const { items: blogPosts, fetchAll } = useResource('https://jsonplaceholder.typicode.com/posts')
fetchAll()

</script>
