kycnotme/web/src/components/Footer.astro

---
import { Icon } from 'astro-icon/components'
import { SOURCE_CODE_URL } from 'astro:env/client'
import { I2P_ADDRESS, ONION_ADDRESS } from 'astro:env/server'

import { cn } from '../lib/cn'

import type { HTMLAttributes } from 'astro/types'

type Props = HTMLAttributes<'footer'>

const links = [
  {
    href: SOURCE_CODE_URL,
    label: 'Code',
    icon: 'ri:git-repository-line',
    external: true,
  },
  {
    href: ONION_ADDRESS,
    label: 'Tor',
    icon: 'onion',
    external: true,
  },
  {
    href: I2P_ADDRESS,
    label: 'I2P',
    icon: 'i2p',
    external: true,
  },
  {
    href: '/docs/api',
    label: 'API',
    icon: 'ri:plug-line',
    external: false,
  },
  {
    href: '/feeds',
    label: 'RSS',
    icon: 'ri:rss-line',
    external: false,
  },
  {
    href: '/about',
    label: 'About',
    icon: 'ri:information-line',
    external: false,
  },
] as const satisfies {
  href: string
  label: string
  icon: string
  external: boolean
}[]

const { class: className, ...htmlProps } = Astro.props
---

<footer
  class={cn('xs:gap-x-6 flex flex-wrap items-center justify-center gap-x-3 gap-y-2 p-4', className)}
  {...htmlProps}
>
  {
    links.map(
      ({ href, label, icon, external }) =>
        href && (
          <a
            href={href}
            target={external ? '_blank' : undefined}
            rel={external ? 'noopener noreferrer' : undefined}
            class="text-day-500 xs:gap-1 flex items-center gap-0.5 text-sm transition-colors hover:text-gray-200 hover:underline"
          >
            <Icon name={icon} class="xs:opacity-100 h-4 w-4 opacity-40" />
            {label}
          </a>
        )
    )
  }
</footer>