Files
kycnotme/web/src/components/Footer.astro
2025-06-11 22:28:53 +00:00

80 lines
1.6 KiB
Plaintext

---
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>