85 lines
1.8 KiB
TypeScript
85 lines
1.8 KiB
TypeScript
"use client"
|
|
import NextLink from "next/link"
|
|
import { usePathname, useRouter } from "next/navigation"
|
|
import { startTransition, useCallback, useEffect } from "react"
|
|
|
|
import useRouterTransitionStore from "@/stores/router-transition"
|
|
|
|
import { trackClick, trackPageViewStart } from "@/utils/tracking"
|
|
|
|
import { linkVariants } from "./variants"
|
|
|
|
import type { LinkProps } from "./link"
|
|
|
|
export default function Link({
|
|
active,
|
|
className,
|
|
color,
|
|
href,
|
|
partialMatch = false,
|
|
textDecoration,
|
|
size,
|
|
scroll = true,
|
|
prefetch,
|
|
variant,
|
|
trackingId,
|
|
...props
|
|
}: LinkProps) {
|
|
const currentPageSlug = usePathname()
|
|
let isActive = active || currentPageSlug === href
|
|
|
|
if (partialMatch && !isActive) {
|
|
isActive = currentPageSlug === href
|
|
}
|
|
|
|
const classNames = linkVariants({
|
|
active: isActive,
|
|
className,
|
|
textDecoration,
|
|
color,
|
|
size,
|
|
variant,
|
|
})
|
|
|
|
const router = useRouter()
|
|
|
|
const startRouterTransition = useRouterTransitionStore(
|
|
(state) => state.startRouterTransition
|
|
)
|
|
|
|
const trackClickById = useCallback(() => {
|
|
if (trackingId) {
|
|
trackClick(trackingId)
|
|
}
|
|
}, [trackingId])
|
|
|
|
useEffect(() => {
|
|
if (trackingId) {
|
|
const linkComponent = document.getElementById(trackingId)
|
|
|
|
linkComponent?.addEventListener("click", trackClickById)
|
|
return () => {
|
|
linkComponent?.removeEventListener("click", trackClickById)
|
|
}
|
|
}
|
|
}, [trackClickById, trackingId])
|
|
|
|
return (
|
|
<NextLink
|
|
scroll={scroll}
|
|
prefetch={prefetch}
|
|
className={classNames}
|
|
onClick={() => {
|
|
trackPageViewStart()
|
|
startTransition(() => {
|
|
startRouterTransition()
|
|
router.push(href)
|
|
})
|
|
}}
|
|
href={href}
|
|
id={trackingId}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|