57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
interface ImageNavigationButtonsProps {
|
|
onPrev: () => void;
|
|
onNext: () => void;
|
|
currentIndex: number;
|
|
totalImages: number;
|
|
}
|
|
|
|
export function ImageNavigationButtons({
|
|
onPrev,
|
|
onNext,
|
|
currentIndex,
|
|
totalImages,
|
|
}: ImageNavigationButtonsProps) {
|
|
const hasPrev = currentIndex > 0;
|
|
const hasNext = currentIndex < totalImages - 1;
|
|
|
|
return (
|
|
<>
|
|
{/* 左侧按钮 */}
|
|
<button
|
|
className={`
|
|
absolute left-4 top-6/17 -translate-y-1/2 z-20
|
|
w-12 h-12 rounded-full
|
|
bg-black/40 backdrop-blur-sm border border-white/20
|
|
flex items-center justify-center
|
|
text-white transition-all
|
|
${hasPrev ? "opacity-100 hover:bg-black/60 cursor-pointer" : "opacity-30 cursor-not-allowed"}
|
|
`}
|
|
onClick={onPrev}
|
|
disabled={!hasPrev}
|
|
aria-label="上一张图片"
|
|
>
|
|
<ChevronLeft size={24} />
|
|
</button>
|
|
|
|
{/* 右侧按钮 */}
|
|
<button
|
|
className={`
|
|
absolute right-4 top-6/17 -translate-y-1/2 z-20
|
|
w-12 h-12 rounded-full
|
|
bg-black/40 backdrop-blur-sm border border-white/20
|
|
flex items-center justify-center
|
|
text-white transition-all
|
|
${hasNext ? "opacity-100 hover:bg-black/60 cursor-pointer" : "opacity-30 cursor-not-allowed"}
|
|
`}
|
|
onClick={onNext}
|
|
disabled={!hasNext}
|
|
aria-label="下一张图片"
|
|
>
|
|
<ChevronRight size={24} />
|
|
</button>
|
|
</>
|
|
);
|
|
}
|