108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
"use client";
|
||
|
||
import { isAfter } from "date-fns";
|
||
import { motion } from "framer-motion";
|
||
import { useState } from "react";
|
||
import { useSWRConfig } from "swr";
|
||
import { useWindowSize } from "usehooks-ts";
|
||
import { useArtifact } from "@/hooks/use-artifact";
|
||
import type { Document } from "@/lib/db/schema";
|
||
import { getDocumentTimestampByIndex } from "@/lib/utils";
|
||
import { LoaderIcon } from "./icons";
|
||
import { Button } from "./ui/button";
|
||
|
||
type VersionFooterProps = {
|
||
handleVersionChange: (type: "next" | "prev" | "toggle" | "latest") => void;
|
||
documents: Document[] | undefined;
|
||
currentVersionIndex: number;
|
||
};
|
||
|
||
export const VersionFooter = ({
|
||
handleVersionChange,
|
||
documents,
|
||
currentVersionIndex,
|
||
}: VersionFooterProps) => {
|
||
const { artifact } = useArtifact();
|
||
|
||
const { width } = useWindowSize();
|
||
const isMobile = width < 768;
|
||
|
||
const { mutate } = useSWRConfig();
|
||
const [isMutating, setIsMutating] = useState(false);
|
||
|
||
if (!documents) {
|
||
return;
|
||
}
|
||
|
||
return (
|
||
<motion.div
|
||
animate={{ y: 0 }}
|
||
className="absolute bottom-0 z-50 flex w-full flex-col justify-between gap-4 border-t bg-background p-4 lg:flex-row"
|
||
exit={{ y: isMobile ? 200 : 77 }}
|
||
initial={{ y: isMobile ? 200 : 77 }}
|
||
transition={{ type: "spring", stiffness: 140, damping: 20 }}
|
||
>
|
||
<div>
|
||
<div>当前查看的是历史版本</div>
|
||
<div className="text-muted-foreground text-sm">
|
||
如需编辑，请先恢复此版本
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-row gap-4">
|
||
<Button
|
||
disabled={isMutating}
|
||
onClick={async () => {
|
||
setIsMutating(true);
|
||
|
||
mutate(
|
||
`/api/document?id=${artifact.documentId}`,
|
||
await fetch(
|
||
`/api/document?id=${artifact.documentId}×tamp=${getDocumentTimestampByIndex(
|
||
documents,
|
||
currentVersionIndex
|
||
)}`,
|
||
{
|
||
method: "DELETE",
|
||
}
|
||
),
|
||
{
|
||
optimisticData: documents
|
||
? [
|
||
...documents.filter((document) =>
|
||
isAfter(
|
||
new Date(document.createdAt),
|
||
new Date(
|
||
getDocumentTimestampByIndex(
|
||
documents,
|
||
currentVersionIndex
|
||
)
|
||
)
|
||
)
|
||
),
|
||
]
|
||
: [],
|
||
}
|
||
);
|
||
}}
|
||
>
|
||
<div>恢复该版本</div>
|
||
{isMutating && (
|
||
<div className="animate-spin">
|
||
<LoaderIcon />
|
||
</div>
|
||
)}
|
||
</Button>
|
||
<Button
|
||
onClick={() => {
|
||
handleVersionChange("latest");
|
||
}}
|
||
variant="outline"
|
||
>
|
||
返回最新版本
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
};
|