| 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> |
| ); |
| } |
|
|
