---
import MicroblogItem from '@/components/microblog-item.astro';
import Layout from '@/layouts/Layout.astro';
import { createServerClient } from '@/utils/pocketbase';

const pb = createServerClient('https://pb.juancman.dev/');
const data = await pb.collection('microblogs').getFullList({
  expand: 'tags',
  sort: '-published',
});
---

<Layout
  title='Microblog'
  description='Short-format writing. Instead of using shitty social media.'
>
  <div class='prose prose-invert max-w-3xl mx-auto'>
    <h1>Microblog</h1>
    <p>Short-format writing.</p>
    <p>Instead of using shitty social media.</p>
    <ul class='mx-auto p-0 mt-10 flex flex-col gap-10 list-none'>
      {
        data.map((item: any) => (
          <li>
            <MicroblogItem {...item} />
          </li>
        ))
      }
    </ul>
  </div>
</Layout>