雨霖铃
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { Box, IconButton, Typography } from '@mui/material';
|
|
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
|
|
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import { jsonDiffPageStyles } from '@/config/pageTheme';
|
|
|
|
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 (
|
|
<Box sx={jsonDiffPageStyles.NAVIGATOR}>
|
|
<Typography variant="body2" sx={{ fontWeight: 700, color: 'text.secondary' }}>
|
|
{t('jsonDiff:noDiffs')}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box sx={jsonDiffPageStyles.NAVIGATOR}>
|
|
<IconButton size="small" aria-label={t('jsonDiff:previousDiff')} onClick={onPrev}>
|
|
<NavigateBeforeIcon />
|
|
</IconButton>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{ fontWeight: 800, fontFamily: 'monospace', minWidth: 60, textAlign: 'center' }}
|
|
>
|
|
{currentIndex + 1} / {total}
|
|
</Typography>
|
|
<IconButton size="small" aria-label={t('jsonDiff:nextDiff')} onClick={onNext}>
|
|
<NavigateNextIcon />
|
|
</IconButton>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export type { DiffNavigatorProps };
|