"use client";
import { useEffect } from "react";
import { useClient } from "@lazarv/react-server/client";
import { Link, type LinkProps } from "@lazarv/react-server/navigation";
export default function KeyLink<T>({
to,
eventKey,
target,
fallback,
revalidate,
children,
...props
}: LinkProps<__react_server_routing__.RouteImpl<T>> & { eventKey: string }) {
const { navigate } = useClient();
useEffect(() => {
const abortController = new AbortController();
document.addEventListener(
"keydown",
(event) => {
if (
document.activeElement?.tagName !== "INPUT" &&
event.key === eventKey &&
to !== "#" &&
(to === "/" || (to !== "/" && !location.href.includes(to)))
) {
navigate(to, {
outlet: target,
push: true,
fallback,
revalidate,
});
}
},
{ signal: abortController.signal }
);
return () => abortController.abort();
}, [to, eventKey, target, fallback, revalidate, navigate]);
return (
<Link
to={to}
push
target={target}
fallback={fallback}
revalidate={revalidate}
{...props}
>
{children}
</Link>
);
}