OpenVuln / src /components /Layout.tsx
zRzRzRzRzRzRzR
feat: sync latest OpenVuln frontend
d22337b
Raw
History Blame Contribute Delete
2.65 kB
import { Link, Outlet, useLocation } from "react-router-dom";
import { Github } from "lucide-react";
import { AuthButton } from "./AuthButton";
import { NotificationBell } from "./NotificationBell";
/** OpenVuln public repo; override at build time via VITE_GITHUB_REPO_URL. */
const OWN_REPO =
(import.meta.env.VITE_GITHUB_REPO_URL as string | undefined) ||
"https://github.com/Clouditera/OpenVuln";
export function Layout() {
const { pathname } = useLocation();
const isDeck = pathname === "/";
return (
<div className="flex min-h-screen flex-col">
{!isDeck && <header className="app-shell-chrome sticky top-0 z-30 h-14 border-b border-line bg-surface/85 backdrop-blur">
<div className="flex h-full items-center justify-between gap-4 px-5">
<div className="flex items-center">
<Link
to="/"
className="flex items-center gap-2.5 rounded-md focus-ring"
>
<img
src="/logo.svg"
alt=""
className="h-7 w-7 shrink-0 rounded-lg"
aria-hidden
/>
<span className="font-display text-[15px] font-semibold tracking-tight text-ink">
OpenVuln
</span>
</Link>
</div>
<div className="flex items-center gap-2">
<NotificationBell />
<AuthButton />
<a
href={OWN_REPO}
target="_blank"
rel="noreferrer"
className="flex h-9 w-9 items-center justify-center rounded-full border border-line bg-surface-raised text-ink-secondary transition-colors hover:border-line-strong hover:bg-surface-sunken hover:text-ink focus-ring"
title="OpenVuln on GitHub"
>
<Github size={15} />
</a>
</div>
</div>
</header>}
<main className="flex-1">
<Outlet />
</main>
{!isDeck && (
<footer className="app-shell-chrome mt-auto border-t border-line">
<div className="flex flex-col gap-2 px-5 py-6 text-[13px] text-ink-secondary sm:flex-row sm:items-center sm:justify-between">
<p className="text-ink-tertiary">© 2026 OpenVuln · Powered by VulnHunter</p>
<div className="flex flex-wrap gap-x-5 gap-y-1">
<a href={OWN_REPO} target="_blank" rel="noreferrer" className="hover:text-ink">
GitHub
</a>
<Link to="/about" className="hover:text-ink">
About
</Link>
</div>
</div>
</footer>
)}
</div>
);
}