mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
102 lines
3.1 KiB
Plaintext
102 lines
3.1 KiB
Plaintext
---
|
|
import clsx from 'clsx';
|
|
import { ArrowUpRight } from 'lucide-react';
|
|
import Discord from '@/assets/logos/discord.svg?react';
|
|
import GitHub from '@/assets/logos/github.svg?react';
|
|
import Logo from '@/assets/logos/videojs.svg?react';
|
|
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
|
|
import Search from '../Search';
|
|
import GetStartedLink from './GetStartedLink';
|
|
import MobileNav from './MobileNav';
|
|
|
|
export interface Props {
|
|
dark?: boolean;
|
|
class?: string;
|
|
}
|
|
|
|
type NavLink = {
|
|
href: string;
|
|
label: string;
|
|
matchPath: string | null;
|
|
external?: boolean;
|
|
};
|
|
const navLinks: NavLink[] = [
|
|
{ href: '/docs', label: 'Docs', matchPath: '/docs' },
|
|
{ href: '/blog', label: 'Blog', matchPath: '/blog' },
|
|
];
|
|
|
|
const currentPath = Astro.url.pathname;
|
|
const isDocsActive = currentPath.startsWith('/docs');
|
|
const otherNavLinks = navLinks.filter((link) => link.href !== '/docs');
|
|
const { class: className, dark = false } = Astro.props;
|
|
---
|
|
|
|
<nav
|
|
class:list={[
|
|
"flex justify-between",
|
|
"mx-auto w-full max-w-305 items-center px-5 py-7 md:py-10",
|
|
className,
|
|
]}
|
|
>
|
|
<a href="/" class="flex h-7 items-center gap-3 lg:h-10 lg:gap-4">
|
|
<Logo height="100%" />
|
|
<span class="sr-only">Video.js video player</span>
|
|
<span
|
|
class="hidden h-full items-center justify-center rounded-full border border-orange px-3 font-display text-(length:--text) font-bold text-orange sm:inline-flex lg:border-2 lg:px-4 lg:text-h4"
|
|
style={{ "--text": "0.75rem" }}
|
|
>v10 <span class="whitespace-pre uppercase">beta</span></span
|
|
>
|
|
</a>
|
|
<Search client:load className="mr-4 ml-auto sm:self-center" />
|
|
{/* Desktop nav links */}
|
|
<div class="hidden md:flex">
|
|
<GetStartedLink
|
|
client:idle
|
|
className={clsx(
|
|
"flex items-center rounded-xs px-5 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
|
|
)}
|
|
aria-current={isDocsActive ? "page" : undefined}
|
|
>
|
|
Docs
|
|
</GetStartedLink>
|
|
{
|
|
otherNavLinks.map((link) => (
|
|
<a
|
|
href={link.href}
|
|
class:list={[
|
|
"flex items-center rounded-xs px-5 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
|
|
]}
|
|
>
|
|
{link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
|
|
</a>
|
|
))
|
|
}
|
|
<a
|
|
href={DISCORD_INVITE_URL}
|
|
class={clsx(
|
|
"flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase 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={clsx(
|
|
"flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase 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>
|
|
|
|
<MobileNav client:idle navLinks={navLinks} currentPath={currentPath}>
|
|
<slot name="mobile-nav" />
|
|
</MobileNav>
|
|
</nav>
|