48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
const DASHBOARD_URL = "https://dashboard.core.dev";
|
|
|
|
export default function Header() {
|
|
const navItems = [
|
|
{ href: "https://docs.core.dev", label: "Docs" },
|
|
{ href: "https://status.core.dev", label: "Status" },
|
|
{ href: "https://api.core.dev", label: "API" },
|
|
];
|
|
|
|
return (
|
|
<header class="backdrop-blur sticky top-0 z-20 border-b border-white/5 bg-surface/80">
|
|
<div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="h-10 w-10 rounded-lg border border-accent/30 bg-accent/10 text-accent shadow-inner shadow-accent/20 grid place-items-center font-semibold">
|
|
CF
|
|
</span>
|
|
<div class="leading-tight">
|
|
<p class="text-sm uppercase tracking-[0.18em] text-foreground/70">
|
|
Core Landing
|
|
</p>
|
|
<p class="text-lg font-semibold text-foreground">
|
|
Cloud Ops Console
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<nav class="hidden items-center gap-8 text-sm font-medium text-foreground/80 md:flex">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
class="transition hover:text-foreground"
|
|
href={item.href}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
<a
|
|
class="rounded-md border border-accent/50 bg-accent/10 px-4 py-2 text-accent shadow-[0_0_0_1px_rgba(34,211,238,0.2)] transition hover:-translate-y-0.5 hover:shadow-accent/40"
|
|
href={DASHBOARD_URL}
|
|
>
|
|
Login
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|