Files
v10/site/src/components/Footer.astro
T

87 lines
2.6 KiB
Plaintext

---
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
import { ArrowUpRight } from 'lucide-react';
import GitHub from './icons/GitHub';
import Discord from './icons/Discord';
import { ThemeToggle } from './ThemeToggle';
type NavLink = {
href: string;
label: string;
external?: boolean;
prefetch?: boolean;
};
const navLinks: NavLink[] = [
{ href: '/', label: 'Home' },
// docs require a redirect, so, let's prefetch them to hide that latency
{ href: '/docs', label: 'Docs', prefetch: true },
// { href: '/blog', label: 'Blog' },
{ href: '/privacy', label: 'Privacy' },
];
type Props = {
class?: string;
};
const { class: className } = Astro.props;
---
<footer class:list={['border-t border-light-40 dark:border-dark-80 py-6 px-3 grid gap-3', className]}>
<div class="flex items-center justify-between flex-col sm:flex-row gap-3 mb-2 sm:mb-0">
<nav class="flex flex-col sm:flex-row gap-1">
<div class="flex justify-center sm:justify-start">
{
navLinks.map((link) => (
<a
href={link.href}
class="intent:underline px-3 py-2 inline-flex gap-1 items-center"
data-astro-prefetch={link.prefetch ? '' : undefined}
>
{link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
</a>
))
}
</div>
<div class="flex justify-center sm:justify-start">
<a
href={GITHUB_REPO_URL}
class="group px-3 py-2 inline-flex items-center"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<GitHub
size="1em"
className="text-dark-80 dark:text-light-80 group-intent:text-dark-100 dark:group-intent:text-light-40"
/>
</a>
<a
href={DISCORD_INVITE_URL}
class="group px-3 py-2 inline-flex items-center"
aria-label="Discord"
target="_blank"
rel="noopener noreferrer"
>
<Discord
size="1em"
className="text-dark-80 dark:text-light-80 group-intent:text-dark-100 dark:group-intent:text-light-40"
/>
</a>
</div>
</nav>
<ThemeToggle client:idle />
</div>
<p class="text-sm text-center sm:text-left text-dark-40 dark:text-light-40 px-3">
© 2010&ndash;{new Date().getFullYear()}, Video.js contributors
<br />
Video.js is a free and open source HTML5 video player framework
<br />
Sponsored by <a
href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
class="underline intent:decoration-wavy"
>
Mux
</a>
</p>
</footer>