51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
import { useCanvasGraphContext } from "../../contexts/CanvasGraphContext";
|
|
import { setCurrentArtifactIndex } from "../../utils/artifact";
|
|
|
|
export function CanvasArtifactVersionNav() {
|
|
const { artifact, setArtifact } = useCanvasGraphContext();
|
|
|
|
if (!artifact || artifact.contents.length <= 1) return null;
|
|
|
|
const total = artifact.contents.length;
|
|
const current = artifact.currentIndex;
|
|
const canGoPrev = current > 1;
|
|
const canGoNext = current < total;
|
|
|
|
function go(delta: -1 | 1) {
|
|
if (!artifact) return;
|
|
setArtifact(setCurrentArtifactIndex(artifact, current + delta));
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-0.5">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={() => go(-1)}
|
|
disabled={!canGoPrev}
|
|
title="上一个版本"
|
|
>
|
|
<ChevronLeft className="h-3.5 w-3.5" />
|
|
</Button>
|
|
<span className="text-xs text-muted-foreground tabular-nums w-10 text-center">
|
|
{current}/{total}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={() => go(1)}
|
|
disabled={!canGoNext}
|
|
title="下一个版本"
|
|
>
|
|
<ChevronRight className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|