File size: 2,256 Bytes
de1e3fc 9122959 de1e3fc 6213763 de1e3fc 6213763 de1e3fc | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import { Link, NavLink, useNavigate } from "react-router-dom";
import { useAuth } from "../auth";
import type { ReactNode } from "react";
function navClass({ isActive }: { isActive: boolean }) {
return `px-3 py-2 rounded-md text-sm font-medium ${
isActive ? "bg-brand-50 text-brand-700" : "text-gray-600 hover:bg-gray-100"
}`;
}
export default function Layout({ children }: { children: ReactNode }) {
const { user, logout } = useAuth();
const navigate = useNavigate();
return (
<div className="min-h-screen text-gray-900">
<header className="border-b border-gray-200 bg-white sticky top-0 z-10">
<div className="mx-auto max-w-5xl px-4 flex items-center justify-between h-14">
<Link to="/" className="flex items-center font-bold tracking-tight text-brand-700">
PawTrace
</Link>
<nav className="flex items-center gap-1">
{user ? (
<>
{user.role === "admin" ? (
<NavLink to="/admin" className={navClass}>
Admin
</NavLink>
) : (
<>
<NavLink to="/dogs" className={navClass}>
My Dogs
</NavLink>
<NavLink to="/cases" className={navClass}>
My Cases
</NavLink>
</>
)}
<button
className="btn-secondary ml-2"
onClick={() => {
logout();
navigate("/");
}}
>
Log out
</button>
</>
) : (
<NavLink to="/login" className="btn-primary ml-2">
Log in
</NavLink>
)}
</nav>
</div>
</header>
<main className="mx-auto max-w-5xl px-4 py-6">{children}</main>
<footer className="mx-auto max-w-5xl px-4 py-8 text-center text-xs text-gray-400">
PawTrace · Photo matches are suggestions requiring human confirmation. Contact is mediated
through the platform — addresses are never shared.
</footer>
</div>
);
}
|