Files
web/components/Current/Header/LoginButton.tsx
Niclas Edenvin e67212bd94 Merged in feature/refactor-lang (pull request #387)
feat: SW-238 Avoid prop drilling of lang

Approved-by: Michael Zetterberg
2024-08-14 11:00:20 +00:00

52 lines
1.2 KiB
TypeScript

"use client"
import { usePathname } from "next/navigation"
import { PropsWithChildren, useEffect } from "react"
import { login } from "@/constants/routes/handleAuth"
import Link from "@/components/TempDesignSystem/Link"
import { LinkProps } from "@/components/TempDesignSystem/Link/link"
import useLang from "@/hooks/useLang"
import { trackLoginClick } from "@/utils/tracking"
import { TrackingPosition } from "@/types/components/tracking"
export default function LoginButton({
className,
position,
trackingId,
children,
color = "black",
}: PropsWithChildren<{
className: string
trackingId: string
position: TrackingPosition
color?: LinkProps["color"]
}>) {
const lang = useLang()
const pathName = usePathname()
useEffect(() => {
document
.getElementById(trackingId)
?.addEventListener("click", () => trackLoginClick(position))
return () => {
document
.getElementById(trackingId)
?.removeEventListener("click", () => trackLoginClick(position))
}
}, [position, trackingId])
return (
<Link
className={className}
id={trackingId}
color={color}
href={`${login[lang]}?redirectTo=${encodeURIComponent(pathName)}`}
>
{children}
</Link>
)
}