94 lines
3.6 KiB
TypeScript
94 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { HeaderAccount } from "@/components/HeaderAccount";
|
|
import { CurrencySwitcher } from "@/components/CurrencySwitcher";
|
|
import { ReviewsMenu } from "@/components/ReviewsMenu";
|
|
import { siteConfig } from "@/lib/site-config";
|
|
import { useAuth } from "@/context/AuthContext";
|
|
|
|
const nav = [
|
|
{ href: "/#rooms", label: "Rooms" },
|
|
{ href: "/guest", label: "Guest hub" },
|
|
{ href: "/services", label: "Services" },
|
|
{ href: "/#wellness", label: "Gym & Spa" },
|
|
{ href: "/#dining", label: "Dining & venues" },
|
|
{ href: "/#meetings", label: "Meetings" },
|
|
{ href: "/#location", label: "Location" },
|
|
];
|
|
|
|
export function Header() {
|
|
const { session } = useAuth();
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40">
|
|
<div className="border-b border-white/10 bg-[var(--color-navy)] text-white">
|
|
<div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-x-3 gap-y-2 px-4 py-2 sm:gap-4 md:px-8">
|
|
<CurrencySwitcher />
|
|
<div className="flex flex-wrap items-center justify-end gap-1 sm:gap-3">
|
|
<Link
|
|
href="/#tour"
|
|
className="rounded-md px-2.5 py-1 text-xs font-medium text-white/90 transition hover:bg-white/10 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:px-3 sm:text-sm"
|
|
>
|
|
3D tour
|
|
</Link>
|
|
<span className="hidden h-4 w-px bg-white/25 sm:block" aria-hidden />
|
|
<ReviewsMenu variant="topBar" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-b border-[var(--color-border)] bg-[var(--color-surface)]/95 backdrop-blur-md">
|
|
<div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4 md:px-8">
|
|
<Link
|
|
href="/"
|
|
className="group flex min-w-0 shrink items-center gap-2.5 leading-tight sm:gap-3"
|
|
>
|
|
<Image
|
|
src="/images/shitaye-logo.png"
|
|
alt=""
|
|
width={400}
|
|
height={390}
|
|
className="h-9 w-auto shrink-0 sm:h-10 md:h-11"
|
|
priority
|
|
/>
|
|
<span className="flex min-w-0 flex-col">
|
|
<span className="font-nav text-lg tracking-tight text-[var(--color-primary)] sm:text-xl md:text-2xl">
|
|
{siteConfig.name}
|
|
</span>
|
|
<span className="text-[10px] font-medium uppercase tracking-[0.2em] text-[var(--color-muted)] sm:text-[11px]">
|
|
{siteConfig.city}
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
<nav
|
|
className="hidden items-center gap-6 text-sm font-medium text-[var(--color-text)] lg:flex"
|
|
aria-label="Main"
|
|
>
|
|
{nav.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="transition-colors hover:text-[var(--color-accent)]"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="flex shrink-0 items-center gap-2 md:gap-3">
|
|
<HeaderAccount />
|
|
{!session && (
|
|
<Link
|
|
href="/booking"
|
|
className="btn-mustard px-4 py-2.5 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:px-5"
|
|
>
|
|
Book
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|