BacklinksPage

---
import type { BacklinkCount } from '../../lib/internal-links/backlink-graph'
import Base from './Base.astro'
import Heading from '../0_atoms/Heading.astro'

interface Props {
  items: BacklinkCount[]
  /** Pass from page: `Astro.site ? new URL(Astro.url.pathname, Astro.site).href : undefined` */
  canonicalHref?: string
}

const { items, canonicalHref } = Astro.props
---

<Base title="Most linked" canonicalHref={canonicalHref}>
  <Heading class="mt-0 mb-6 text-xl font-medium text-ink">Most linked</Heading>
  {
    items.length === 0 ? (
      <p class="text-sm meta text-ink-faint">No backlinks yet.</p>
    ) : (
      <ul class="list-none p-0 m-0 flex flex-col gap-2">
        {items.map(({ title, collection, slug, count }) => (
          <li class="flex justify-between items-baseline gap-4">
            <a
              href={`/${collection}/${slug}`}
              class="text-sm meta text-ink underline-offset-4 transition-colors hover:underline"
            >
              {title}
            </a>
            <span class="text-xs meta shrink-0 text-ink tabular-nums">{count}</span>
          </li>
        ))}
      </ul>
    )
  }
</Base>