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/BetaPill.tsx
+33
View File
@@ -0,0 +1,33 @@
import { twMerge } from '@/utils/twMerge';
interface BetaPillProps {
className?: string;
style?: React.CSSProperties;
compact?: boolean;
}
export default function BetaPill({ className, style, compact }: BetaPillProps) {
return (
<span
className={twMerge(
'inline-flex items-center justify-center rounded-full border border-orange text-(length:--text) font-bold text-orange',
compact
? 'h-5 px-2 font-display-compact sm:h-6 sm:px-3 sm:font-display'
: 'h-7 px-3 font-display lg:h-10 lg:border-2 lg:px-4 lg:text-h4',
className
)}
style={{ '--text': '0.75rem', ...style } as React.CSSProperties}
>
{compact ? (
<>
<span>v10</span>
<span className="hidden whitespace-pre uppercase sm:inline"> beta</span>
</>
) : (
<>
v10<span className="whitespace-pre uppercase"> beta</span>
</>
)}
</span>
);
}
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 */}
site/src/components/home/Header.astro
+5 -5
View File
@@ -1,5 +1,6 @@
---
import MuxLogoSmall from '@/assets/logos/mux-small.svg?react';
import BetaPill from '@/components/BetaPill';
import FrameworkControl from '@/components/home/FrameworkControl';
import HeroVideo from '@/components/home/HeroVideo';
import SkinControl from '@/components/home/SkinControl';
@@ -20,11 +21,10 @@ const poster = `${VJS10_DEMO_VIDEO.poster}?time=0`;
class="relative mx-auto mb-25 grid w-full max-w-305 grid-cols-1 px-5 pt-19 [grid-template-areas:var(--grid-template-areas)] md:py-0 md:[grid-template-areas:var(--md-grid-template-areas)]"
style="--grid-template-areas: 'pill' 'title' 'description' 'video' 'mux' 'control'; --md-grid-template-areas: 'video' 'mux' 'description' 'control'"
>
<span
class="mb-7 inline-flex h-7 items-center justify-center justify-self-center rounded-full border border-orange px-3 font-display text-(length:--text) font-bold text-orange sm:hidden"
style={{ "--text": "0.75rem", gridArea: "pill" }}
>v10 <span class="whitespace-pre uppercase">beta</span></span
>
<BetaPill
className="mb-7 justify-self-center sm:hidden"
style={{ gridArea: "pill" }}
/>
<h1
class="z-10 mb-5 w-full self-center justify-self-center text-center font-display text-h2 text-balance uppercase [grid-area:var(--grid-area)] md:mb-0 md:px-5 md:text-h15 md:text-manila-light md:[grid-area:var(--md-grid-area)] lg:text-h1"
style="--grid-area: title; --md-grid-area: video;"