zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(site): extract BetaPill component (#1198)

Browse Source
This commit is contained in:
Darius Cepulis
2026-04-02 07:53:13 -05:00
committed by GitHub
parent 31ccb1f6ee
commit 508a1046e3
5 changed files with 44 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/NavBar/MobileNav.tsx
+2 -6
View File
@@ -2,6 +2,7 @@ import { Dialog } from '@base-ui/react/dialog';
import clsx from 'clsx';
import { ArrowUpRight } from 'lucide-react';
import Logo from '@/assets/logos/videojs.svg?react';
import BetaPill from '@/components/BetaPill';
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
import GetStartedLink from './GetStartedLink';
@@ -52,12 +53,7 @@ export default function MobileNav({ navLinks, currentPath, children }: MobileNav
<a href="/" className="flex h-7 items-center gap-3 lg:gap-4 lg:h-10">
<Logo height="100%" />
<span className="sr-only">Video.js video player</span>
<span
className="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' } as React.CSSProperties}
>
v10 <span className="whitespace-pre uppercase"> beta</span>
</span>
<BetaPill className="hidden sm:inline-flex" />
</a>
<Dialog.Close
className={clsx(
site/src/components/NavBar/NavBar.astro
+2 -5
View File
@@ -4,6 +4,7 @@ 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 BetaPill from '@/components/BetaPill';
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
import Search from '../Search';
import GetStartedLink from './GetStartedLink';
@@ -41,11 +42,7 @@ const { class: className, dark = false } = Astro.props;
<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
>
<BetaPill className="hidden sm:inline-flex" />
</a>
<Search client:load className="mr-4 ml-auto sm:self-center" />
{/* Desktop nav links */}
site/src/components/NavBar/NavBarDocs.astro
+2 -9
View File
@@ -4,6 +4,7 @@ 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 BetaPill from '@/components/BetaPill';
import Search from '@/components/Search';
import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
import GetStartedLink from './GetStartedLink';
@@ -40,15 +41,7 @@ const { class: className } = Astro.props;
<a href="/" class="flex h-5 items-center gap-2 sm:h-6 sm:gap-3">
<Logo height="100%" />
<span class="sr-only">Video.js video player</span>
<span
class="inline-flex h-full items-center justify-center rounded-full border border-orange px-2 font-display-compact text-(length:--text) font-bold text-orange sm:px-3 sm:font-display"
style={{
"--text": "0.75rem",
} as React.CSSProperties}
>
<span>v10</span>
<span class="hidden whitespace-pre uppercase sm:inline"> beta</span>
</span>
<BetaPill compact />
</a>
<Search client:load className="mr-4 ml-auto sm:self-center" />
{/* Desktop nav links */}