components/Navigation/Link.tsx

"use client";

import { useRouterContext } from "@/contexts/RouterContext";
import NextLink from "next/link";
import { usePathname } from "next/navigation";
import { ComponentProps, FC, KeyboardEvent, MouseEvent } from "react";

type LinkProps = Omit<ComponentProps<typeof NextLink>, "as"> & {
    nextLink?: boolean;
    as?: keyof JSX.IntrinsicElements | FC;
};

export default function Link({
    nextLink = true,
    as = NextLink as unknown as keyof JSX.IntrinsicElements,
    onClick,
    onKeyUp,
    href,
    children,
    ...props
}: LinkProps) {
    const { setIsChanging } = useRouterContext();
    const pathname = usePathname();
    const Component = ((nextLink ? NextLink : as) ?? "a") as "a";
    const propsToPass = {
        ...props,
        href,
    } as ComponentProps<typeof NextLink>;

    if (nextLink) {
        propsToPass.as = as as unknown as keyof JSX.IntrinsicElements;
    }

    const stringHref = href.toString();

    const onNavigate = () => {
        const pos = stringHref.indexOf("?");

        if (
            !stringHref.startsWith("https://") &&
            !stringHref.startsWith("http://") &&
            pathname !==
                stringHref
                    .substring(0, pos === -1 ? undefined : pos)
                    .replace(/\/+/g, "/")
                    .replace(/\/$/g, "")
        ) {
            setIsChanging(true);
        }
    };

    return (
        <Component
            href={href as string}
            {...props}
            onClick={event => {
                event.stopPropagation();
                onClick?.(event as MouseEvent<any, any>);
                onNavigate();
            }}
            onKeyUp={event => {
                onKeyUp?.(event as KeyboardEvent<any>);

                if (event.key === "Enter") {
                    onNavigate();
                }
            }}
        >
            {children}
        </Component>
    );
}
1	rakinar2	575	"use client";
2
3			import { useRouterContext } from "@/contexts/RouterContext";
4			import NextLink from "next/link";
5			import { usePathname } from "next/navigation";
6			import { ComponentProps, FC, KeyboardEvent, MouseEvent } from "react";
7
8			type LinkProps = Omit<ComponentProps<typeof NextLink>, "as"> & {
9			nextLink?: boolean;
10			as?: keyof JSX.IntrinsicElements \| FC;
11			};
12
13			export default function Link({
14			nextLink = true,
15			as = NextLink as unknown as keyof JSX.IntrinsicElements,
16			onClick,
17			onKeyUp,
18			href,
19			children,
20			...props
21			}: LinkProps) {
22			const { setIsChanging } = useRouterContext();
23			const pathname = usePathname();
24			const Component = ((nextLink ? NextLink : as) ?? "a") as "a";
25			const propsToPass = {
26			...props,
27			href,
28			} as ComponentProps<typeof NextLink>;
29
30			if (nextLink) {
31			propsToPass.as = as as unknown as keyof JSX.IntrinsicElements;
32			}
33
34			const stringHref = href.toString();
35
36			const onNavigate = () => {
37			const pos = stringHref.indexOf("?");
38
39			if (
40			!stringHref.startsWith("https://") &&
41			!stringHref.startsWith("http://") &&
42			pathname !==
43			stringHref
44			.substring(0, pos === -1 ? undefined : pos)
45			.replace(/\/+/g, "/")
46			.replace(/\/$/g, "")
47			) {
48			setIsChanging(true);
49			}
50			};
51
52			return (
53			<Component
54			href={href as string}
55			{...props}
56			onClick={event => {
57			event.stopPropagation();
58			onClick?.(event as MouseEvent<any, any>);
59			onNavigate();
60			}}
61			onKeyUp={event => {
62			onKeyUp?.(event as KeyboardEvent<any>);
63
64			if (event.key === "Enter") {
65			onNavigate();
66			}
67			}}
68			>
69			{children}
70			</Component>
71			);
72			}