OrphansPage

---
import type { OrphanListItem } from '../../lib/internal-links/backlink-graph'
import Base from './Base.astro'
import Heading from '../0_atoms/Heading.astro'
import MarkdownBlock from '../2_organisms/MarkdownBlock.astro'

interface Props {
  items: OrphanListItem[]
}

const { items } = Astro.props
---

<Base title="Orphans" noindex={true}>
  <div class="mb-5">
    <Heading class="mt-0 mb-6 text-xl font-medium text-ink">Orphans</Heading>
    <MarkdownBlock>
    Public items with no inbound internal links. The counter to
    <a href="/backlinks" class="underline-offset-4 hover:underline">backlinks</a>. Does not include unlisted items.
  </MarkdownBlock>
  </div>
  {
    items.length === 0 ? (
      <p class="text-sm meta text-ink-faint">Nothing orphaned.</p>
    ) : (
      <ul class="list-none p-0 m-0 flex flex-col gap-2">
        {items.map(({ title, collection, slug }) => (
          <li class="flex items-baseline gap-4 leading-snug">
            <a
              href={`/${collection}/${slug}`}
              class="min-w-0 flex-1 text-sm meta text-ink underline-offset-4 transition-colors hover:underline"
            >
              {title}
            </a>
          </li>
        ))}
      </ul>
    )
  }
</Base>