雨霖铃
49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
|
|
interface DiffNavigatorProps {
|
|
total: number;
|
|
/** 0-based index */
|
|
currentIndex: number;
|
|
onPrev: () => void;
|
|
onNext: () => void;
|
|
}
|
|
|
|
export default function DiffNavigator({ total, currentIndex, onPrev, onNext }: DiffNavigatorProps) {
|
|
const { t } = useLazyTranslation('jsonDiff');
|
|
|
|
if (total === 0) {
|
|
return (
|
|
<div className="flex items-center justify-center gap-3 p-2.5 rounded-lg bg-blue-50 border border-blue-200">
|
|
<span className="text-sm font-bold text-gray-500">{t('jsonDiff:noDiffs')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center gap-3 p-2.5 rounded-lg bg-blue-50 border border-blue-200">
|
|
<button
|
|
type="button"
|
|
aria-label={t('jsonDiff:previousDiff')}
|
|
onClick={onPrev}
|
|
className="p-1 rounded-md hover:bg-blue-100 transition-colors"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</button>
|
|
<span className="text-sm font-extrabold font-mono min-w-[60px] text-center">
|
|
{currentIndex + 1} / {total}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
aria-label={t('jsonDiff:nextDiff')}
|
|
onClick={onNext}
|
|
className="p-1 rounded-md hover:bg-blue-100 transition-colors"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type { DiffNavigatorProps };
|