e-tib.com/components/ui/TransitionLink.tsx

'use client';

import React from 'react';
import Link, { LinkProps } from 'next/link';
import { useTransition } from '@/components/providers/TransitionProvider';
import { cn } from './utils';

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;
    }

    // Hash links on the same page should not trigger a transition
    if (href.toString().startsWith('#')) {
      return;
    }

    // Default Link Navigation blockieren
    e.preventDefault();
    
    // Die Transition starten (welche intern pusht)
    startTransition(href.toString(), transitionMessage);
  };

  return (
    <Link href={href} onClick={handleClick} prefetch={props.prefetch ?? false} className={cn('cursor-pointer', props.className)} {...props}>
      {children}
    </Link>
  );
}