74 lines
2.6 KiB
TypeScript

"use client";
import { RotateCcw } from "lucide-react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
export default function HeaderAgenda() {
const pathname = usePathname();
const router = useRouter();
const isAg = pathname?.startsWith("/agenda");
const isPr = pathname?.startsWith("/procedimento");
const isFi = pathname?.startsWith("/financeiro");
return (
<header className="border-b bg-background border-border">
<div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
<h1 className="text-[18px] font-semibold text-foreground">Novo Agendamento</h1>
<div className="flex items-center gap-2">
<nav
role="tablist"
aria-label="Navegação de Agendamento"
className="flex items-center gap-2"
>
<Link
href="/agenda"
role="tab"
className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
isAg
? "bg-primary text-white border-primary dark:bg-primary dark:text-white"
: "text-foreground hover:bg-muted border-input"
}`}
>
Agendamento
</Link>
<Link
href="/procedimento"
role="tab"
className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
isPr
? "bg-primary text-white border-primary dark:bg-primary dark:text-white"
: "text-foreground hover:bg-muted border-input"
}`}
>
Procedimento
</Link>
<Link
href="/financeiro"
role="tab"
className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
isFi
? "bg-primary text-white border-primary dark:bg-primary dark:text-white"
: "text-foreground hover:bg-muted border-input"
}`}
>
Financeiro
</Link>
</nav>
<button
type="button"
aria-label="Voltar para Calendário"
onClick={() => router.push("/calendar")}
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-primary hover:text-white hover:border-primary transition-colors"
>
<RotateCcw className="h-4 w-4" />
</button>
</div>
</div>
</header>
);
}