62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import { Check, ChevronLeft, ChevronRight, X } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface ControlBarProps {
|
|
currentIndex: number;
|
|
videosLength: number;
|
|
onPrevious: () => void;
|
|
onNext: () => void;
|
|
onLabel: (label: boolean) => void;
|
|
}
|
|
|
|
export function ControlBar({
|
|
currentIndex,
|
|
videosLength,
|
|
onPrevious,
|
|
onNext,
|
|
onLabel,
|
|
}: ControlBarProps) {
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 bg-background border-t p-4 shadow-lg">
|
|
<div className="max-w-4xl mx-auto flex items-center justify-between gap-4">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onPrevious}
|
|
disabled={currentIndex === 0}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
上一个
|
|
</Button>
|
|
|
|
<div className="flex gap-4">
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => onLabel(false)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<X className="h-4 w-4" />否
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
onClick={() => onLabel(true)}
|
|
className="flex items-center gap-2 bg-green-600 hover:bg-green-700"
|
|
>
|
|
<Check className="h-4 w-4" />是
|
|
</Button>
|
|
</div>
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={onNext}
|
|
disabled={currentIndex === videosLength - 1}
|
|
className="flex items-center gap-2"
|
|
>
|
|
下一个
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|