497fa474a7
* fix(deps): update dependency lucide-react to v1 * fix(deps): replace lucide brand icons with phosphor ones --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Nicolas Meienberger <github@thisprops.com>
65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { GithubLogoIcon, DiscordLogoIcon } from "@phosphor-icons/react";
|
|
|
|
const discordUrl = "https://discord.gg/MzBXz5v5XB";
|
|
const repoUrl = "https://github.com/nicotsx/zerobyte";
|
|
const homeSectionLinks = [{ href: "/", label: "Home" }];
|
|
const buttonBaseClass =
|
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
|
|
|
|
export default function Header() {
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b border-border bg-background/80 backdrop-blur-sm">
|
|
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
|
|
<div className="flex gap-6">
|
|
<Link to="/" className="flex items-center gap-2">
|
|
<div className="flex h-6 w-6 items-center justify-center">
|
|
<img src="/zerobyte.png" alt="" className="h-full w-full object-contain" />
|
|
</div>
|
|
<span className="text-lg font-semibold text-foreground">Zerobyte</span>
|
|
</Link>
|
|
|
|
<nav className="hidden items-center gap-4 md:flex">
|
|
{homeSectionLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
<Link
|
|
to="/docs/$"
|
|
params={{ _splat: "" }}
|
|
className="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
Docs
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<a
|
|
href={discordUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`${buttonBaseClass} size-9 text-muted-foreground hover:bg-accent hover:text-foreground`}
|
|
>
|
|
<DiscordLogoIcon className="h-5 w-5" />
|
|
<span className="sr-only">Join Discord</span>
|
|
</a>
|
|
<a
|
|
href={repoUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`${buttonBaseClass} size-9 text-muted-foreground hover:bg-accent hover:text-foreground`}
|
|
>
|
|
<GithubLogoIcon className="h-5 w-5" />
|
|
<span className="sr-only">View on GitHub</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|