Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 1x 1x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 8x 11x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 8x 11x 19x 19x 19x 19x 19x 19x 19x 1x | import { ChevronLeft, ChevronRight } from 'lucide-react';
import React from 'react';
interface NavigationArrowsProps {
onPrevious: () => void;
onNext: () => void;
hasPrevious: boolean;
hasNext: boolean;
isLoading?: boolean;
className?: string;
}
export const NavigationArrows: React.FC<NavigationArrowsProps> = ({
onPrevious,
onNext,
hasPrevious,
hasNext,
isLoading = false,
className = '',
}) => {
console.log('🎯 NavigationArrows props:', { hasPrevious, hasNext, isLoading, className });
return (
<div className={`flex items-center justify-between ${className}`}>
{/* Previous Arrow */}
<button
onClick={onPrevious}
disabled={!hasPrevious || isLoading}
className={`
p-2 rounded-lg transition-all
${hasPrevious && !isLoading
? 'text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200'
: 'text-gray-300 cursor-not-allowed'
}
`}
title={hasPrevious ? 'Previous newsletter' : 'No previous newsletter'}
aria-label="Navigate to previous newsletter"
>
<ChevronLeft className="h-5 w-5" />
</button>
{/* Next Arrow */}
<button
onClick={onNext}
disabled={!hasNext || isLoading}
className={`
p-2 rounded-lg transition-all
${hasNext && !isLoading
? 'text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200'
: 'text-gray-300 cursor-not-allowed'
}
`}
title={hasNext ? 'Next newsletter' : 'No next newsletter'}
aria-label="Navigate to next newsletter"
>
<ChevronRight className="h-5 w-5" />
</button>
</div>
);
};
export default NavigationArrows;
|