mirror of
https://github.com/zoriya/v10.git
synced 2026-08-14 18:04:49 +00:00
108 lines
3.6 KiB
Plaintext
108 lines
3.6 KiB
Plaintext
---
|
|
import { ArrowUpRight } from 'lucide-react';
|
|
import Discord from '@/assets/logos/discord.svg?react';
|
|
import GitHub from '@/assets/logos/github.svg?react';
|
|
import LogoMonoVersion from '@/assets/logos/videojs-mono.svg?react';
|
|
import { DISCORD_INVITE_URL, GITHUB_REPO_URL, MUX_URL } from '@/consts';
|
|
import GetStartedLink from './NavBar/GetStartedLink';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
|
|
type NavLink = {
|
|
href: string;
|
|
label: string;
|
|
external?: boolean;
|
|
};
|
|
const navLinks: NavLink[] = [
|
|
{ href: '/blog', label: 'Blog' },
|
|
{ href: '/privacy', label: 'Privacy' },
|
|
{ href: 'https://legacy.videojs.org', label: 'V8', external: true },
|
|
];
|
|
|
|
type Props = {
|
|
class?: string;
|
|
};
|
|
const { class: className } = Astro.props;
|
|
---
|
|
|
|
<footer
|
|
class:list={[
|
|
"@container mt-30 grid gap-3 pb-11 @4xl:mt-32 @4xl:pt-0",
|
|
className,
|
|
]}
|
|
>
|
|
<div
|
|
class="mb-2 items-start justify-between gap-3 border-faded-black px-5 pt-5 sm:mb-0 @4xl:flex-row @4xl:items-start @4xl:border-t @4xl:px-10 dark:border-warm-gray"
|
|
>
|
|
<nav
|
|
class="flex flex-col gap-0 text-faded-black @4xl:-ml-5 @4xl:flex-row dark:text-manila-light"
|
|
>
|
|
<div
|
|
class="flex flex-wrap justify-between gap-2 border-t border-b border-faded-black pt-3 pb-3 @4xl:justify-center @4xl:border-0 @4xl:pt-0 @4xl:pb-0 dark:border-manila-light"
|
|
>
|
|
<GetStartedLink
|
|
client:idle
|
|
className="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
|
|
>
|
|
Docs
|
|
</GetStartedLink>
|
|
{
|
|
navLinks.map((link) => (
|
|
<a
|
|
href={link.href}
|
|
class="flex items-center gap-1.5 rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
|
|
>
|
|
{link.label}{" "}
|
|
{link.external ? (
|
|
<ArrowUpRight size="1em" aria-hidden="true" />
|
|
) : null}
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
<div
|
|
class="flex flex-1 justify-start gap-4 pt-5 pb-8 @4xl:justify-center @4xl:gap-0 @4xl:py-0 @4xl:pb-0"
|
|
>
|
|
<a
|
|
href={DISCORD_INVITE_URL}
|
|
class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
|
|
aria-label="Discord"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Discord width="1.5em" height="1.5em" />
|
|
</a>
|
|
<a
|
|
href={GITHUB_REPO_URL}
|
|
class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase @4xl:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
|
|
aria-label="GitHub"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<GitHub width="1.5em" height="1.5em" />
|
|
</a>
|
|
<div class="ml-auto">
|
|
<ThemeToggle client:idle />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<p
|
|
class="mt-10 text-left font-sans text-p2 text-faded-black dark:text-manila-light"
|
|
>
|
|
Video.js is a free and open source HTML5 <a
|
|
href="/"
|
|
class="underline intent:decoration-gold">video player.</a
|
|
>
|
|
<br class="@5xl:hidden" />Video hosting and streaming <a
|
|
href={MUX_URL}
|
|
class="underline intent:decoration-gold"
|
|
>sponsored by Mux.
|
|
</a>
|
|
<br />
|
|
The term VIDEO.JS is a registered trademark of Brightcove Inc. <br
|
|
class="@5xl:hidden"
|
|
/>© 2010–{new Date().getFullYear()} Video.js contributors
|
|
</p>
|
|
</div>
|
|
</footer>
|