---
import BaseLayout from '../layouts/BaseLayout.astro';
import EntryList from '../components/EntryList.astro';
import { getAllEntries } from '../lib/entries';

const entries = (await getAllEntries()).slice(0, 12);
---

<BaseLayout title="Unique">
  <EntryList entries={entries} />
  <p class="view-toggle">
    <a href="/sources/">sources</a>
    <span aria-hidden="true">·</span>
    <a href="/grid/">grid view →</a>
  </p>

  <style>
    .view-toggle {
      margin-top: 1.75rem;
      text-align: right;
      font-size: 0.85rem;
      color: var(--muted);
    }
    .view-toggle a { color: var(--muted); }
    .view-toggle a:hover { color: var(--accent); }
    .view-toggle span { margin: 0 0.4rem; color: var(--muted); }
  </style>
</BaseLayout>
