53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
"use client"
|
|
import { useColorSections } from "@/hooks/color-sections"
|
|
import { type translations } from "@/i18n/translations"
|
|
import { cn } from "@/lib/utils"
|
|
import { useRef } from "react"
|
|
import { MobileNav } from "./mobile-nav"
|
|
import { NavContainer } from "./nav-container"
|
|
|
|
const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
|
|
"hero",
|
|
"about",
|
|
"where",
|
|
"when",
|
|
"tickets",
|
|
"accommodation",
|
|
"food",
|
|
"contact",
|
|
]
|
|
|
|
export function MainpageNav({
|
|
t,
|
|
}: {
|
|
t: typeof translations.pl
|
|
}) {
|
|
const parent = useRef<HTMLDivElement>(null);
|
|
useColorSections(parent);
|
|
|
|
return (
|
|
<NavContainer title={t.nav.title}>
|
|
<>
|
|
<div className="hidden md:flex md:items-center md:gap-4 lg:gap-8" ref={parent}>
|
|
|
|
{linksOrder.map((value) => (
|
|
<a
|
|
key={value}
|
|
href={`#${value}`}
|
|
className="text-sm md:text-md hover:text-primary transition-colors relative group will-change-[color]"
|
|
>
|
|
{t.nav[value]}
|
|
<span data-sub={value} className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform will-change-transform", {
|
|
})} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="md:hidden ml-2">
|
|
<MobileNav t={t} linksOrder={linksOrder} />
|
|
</div>
|
|
</>
|
|
</NavContainer>
|
|
)
|
|
}
|
|
|