39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link, { LinkProps } from 'next/link';
|
|
import { useTransition } from '@/components/providers/TransitionProvider';
|
|
|
|
interface TransitionLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>, LinkProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
href: string;
|
|
transitionMessage?: string;
|
|
}
|
|
|
|
export function TransitionLink({ children, href, onClick, transitionMessage, ...props }: TransitionLinkProps) {
|
|
const { startTransition } = useTransition();
|
|
|
|
const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
|
|
// Falls ein eigener onClick Handler übergeben wurde
|
|
if (onClick) onClick(e);
|
|
|
|
// Nicht bei neuen Tabs, Command-Klick, etc. intervenieren
|
|
if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || props.target === '_blank') {
|
|
return;
|
|
}
|
|
|
|
// Default Link Navigation blockieren
|
|
e.preventDefault();
|
|
|
|
// Die Transition starten (welche intern pusht)
|
|
startTransition(href.toString(), transitionMessage);
|
|
};
|
|
|
|
return (
|
|
<Link href={href} onClick={handleClick} {...props}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|