klz-cables.com/components/blog/BlogPaginationKeyboardObserver.tsx

'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

interface BlogPaginationProps {
  currentPage: number;
  totalPages: number;
  locale: string;
}

export function BlogPaginationKeyboardObserver({
  currentPage,
  totalPages,
  locale,
}: BlogPaginationProps) {
  const router = useRouter();

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Don't trigger if user is typing in an input
      if (
        document.activeElement?.tagName === 'INPUT' ||
        document.activeElement?.tagName === 'TEXTAREA' ||
        document.activeElement?.tagName === 'SELECT'
      ) {
        return;
      }

      if (e.key === 'ArrowLeft' && currentPage > 1) {
        router.push(`/${locale}/blog?page=${currentPage - 1}`);
      } else if (e.key === 'ArrowRight' && currentPage < totalPages) {
        router.push(`/${locale}/blog?page=${currentPage + 1}`);
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [currentPage, totalPages, locale, router]);

  return null;
}