fix: add correct login button instead of sending everyone to my pages

components/LoginButton/index.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+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 { useLazyPathname } from "@/hooks/useLazyPathname"
+import { trackLoginClick } from "@/utils/tracking"
+
+import { TrackingPosition } from "@/types/components/tracking"
+
+export default function LoginButton({
+  className,
+  position,
+  trackingId,
+  children,
+  color = "black",
+  variant = "default",
+}: PropsWithChildren<{
+  className: string
+  trackingId: string
+  position: TrackingPosition
+  color?: LinkProps["color"]
+  variant?: "default" | "signupVerification"
+}>) {
+  const lang = useLang()
+  const pathName = useLazyPathname({ includeSearchParams: true })
+
+  const href = pathName
+    ? `${login[lang]}?redirectTo=${encodeURIComponent(pathName)}`
+    : login[lang]
+
+  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={href}
+      prefetch={false}
+      variant={variant}
+    >
+      {children}
+    </Link>
+  )
+}