雨霖铃
de7da9f1db
- 在 tailwind.config.js 中启用 darkMode: 'class' 并扩展语义化颜色变量 - 将全项目硬编码颜色（bg-white、text-gray-*、border-gray-* 等）替换为语义化类名 - 修复 popup/index.html 硬编码浅色背景色 - 同步更新相关单元测试中的类名断言
49 lines
1.5 KiB
TypeScript
49 lines
1.5 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-primary/10 border border-primary/30">
|
|
<span className="text-sm font-bold text-muted-foreground">{t('jsonDiff:noDiffs')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center gap-3 p-2.5 rounded-lg bg-primary/10 border border-primary/30">
|
|
<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 };
|