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 | 1x 1x 1x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 7x 7x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 14x 6x 8x 14x 14x 14x 14x 14x | 'use client';
import { Button } from '@/components/Calendar/Shadcn/button';
import { ChevronIcon } from '@/components/icons/reacts';
interface DecadeNavigatorProps {
decadeStart: number;
minYear: number;
maxYear: number;
onPrevious: () => void;
onNext: () => void;
}
export const DecadeNavigator = ({
decadeStart,
minYear,
maxYear,
onPrevious,
onNext,
}: DecadeNavigatorProps) => {
return (
<div className="flex items-center justify-between mb-3.25 w-full mx-auto">
{/* Previous Decade */}
<Button
variant="ghost"
size="icon"
onClick={onPrevious}
disabled={decadeStart <= minYear}
data-testid="previous-decade"
className={`bg-transparent hover:bg-transparent ${
decadeStart <= minYear
? 'text-gray-300 cursor-not-allowed'
: 'text-primary-350 hover:text-primary-350'
}`}
>
<ChevronIcon direction="left" width={18} height={18} />
</Button>
{/* Decade Label */}
<div className="text-4xs leading-6 font-semibold text-primary-350">
{decadeStart} – {decadeStart + 9}
</div>
{/* Next Decade */}
<Button
variant="ghost"
size="icon"
onClick={onNext}
data-testid="next-decade"
disabled={decadeStart + 9 >= maxYear}
className={`bg-transparent hover:bg-transparent ${
decadeStart + 9 >= maxYear
? 'text-gray-300 cursor-not-allowed'
: 'text-primary-350 hover:text-primary-350'
}`}
>
<ChevronIcon direction="right" width={18} height={18} />
</Button>
</div>
);
};
|