61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { ChevronDown, ChevronUp, MessageSquareText } from "lucide-react";
|
|
import type { Neighbors } from "../types";
|
|
|
|
interface NavigationButtonsProps {
|
|
neighbors: Neighbors;
|
|
commentsCount: number;
|
|
onNavigatePrev: () => void;
|
|
onNavigateNext: () => void;
|
|
onToggleComments: () => void;
|
|
}
|
|
|
|
export function NavigationButtons({
|
|
neighbors,
|
|
commentsCount,
|
|
onNavigatePrev,
|
|
onNavigateNext,
|
|
onToggleComments,
|
|
}: NavigationButtonsProps) {
|
|
return (
|
|
<>
|
|
{/* 评论开关（右侧中部） */}
|
|
<button
|
|
className="z-10 grid place-items-center w-[54px] h-[54px] rounded-full absolute right-4 top-2/3 -translate-y-1/2 cursor-pointer"
|
|
onClick={onToggleComments}
|
|
aria-label="切换评论"
|
|
>
|
|
<div className="grid place-items-center gap-1 drop-shadow-lg">
|
|
<MessageSquareText size={40} className="" />
|
|
|
|
{commentsCount > 0 ? <span className="text-[18px] font-semibold text-white/90 drop-shadow">{commentsCount}</span> :
|
|
<span className="text-[12px] font-semibold text-white/90 drop-shadow">暂无评论</span>
|
|
}
|
|
|
|
</div>
|
|
</button>
|
|
|
|
{/* 上下切换按钮（右侧胶囊形状） */}
|
|
<div className="absolute right-4 top-6/11 -translate-y-1/2 z-10">
|
|
<div className="flex flex-col rounded-full bg-black/40 backdrop-blur-sm border border-white/20 overflow-hidden">
|
|
<button
|
|
className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors"
|
|
onClick={onNavigatePrev}
|
|
disabled={!neighbors.prev}
|
|
aria-label="上一条"
|
|
>
|
|
<ChevronUp size={24} />
|
|
</button>
|
|
<button
|
|
className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors border-t border-white/20"
|
|
onClick={onNavigateNext}
|
|
disabled={!neighbors.next}
|
|
aria-label="下一条"
|
|
>
|
|
<ChevronDown size={24} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|