screenshot-to-code/frontend/src/components/history/HistoryDisplay.tsx
2023-12-07 13:21:10 -05:00

85 lines
2.7 KiB
TypeScript

import { History } from "./history_types";
import toast from "react-hot-toast";
import classNames from "classnames";
import {
HoverCard,
HoverCardTrigger,
HoverCardContent,
} from "../ui/hover-card";
interface Props {
history: History;
currentVersion: number | null;
revertToVersion: (version: number) => void;
shouldDisableReverts: boolean;
}
// function displayHistoryItemType(itemType: HistoryItemType) {
// switch (itemType) {
// case "ai_create":
// return "Create";
// case "ai_edit":
// return "Edit";
// default:
// // TODO: Error out since this is exhaustive
// return "Unknown";
// }
// }
export default function HistoryDisplay({
history,
currentVersion,
revertToVersion,
shouldDisableReverts,
}: Props) {
return history.length === 0 ? null : (
<div className="flex flex-col h-screen">
<h1 className="font-bold mb-2">Versions</h1>
<ul className="space-y-0 flex flex-col-reverse">
{history.map((item, index) => (
<li key={index}>
<HoverCard>
<HoverCardTrigger
className={classNames(
"flex items-center justify-between space-x-2 p-2",
"border-b cursor-pointer",
{
" hover:bg-black hover:text-white":
index !== currentVersion,
"bg-slate-500 text-white": index === currentVersion,
}
)}
onClick={() =>
shouldDisableReverts
? toast.error(
"Please wait for code generation to complete before viewing an older version."
)
: revertToVersion(index)
}
>
{" "}
<div className="flex gap-x-1 truncate">
<h2 className="text-sm truncate">
{item.type === "ai_edit" ? item.inputs.prompt : "Create"}
</h2>
{/* <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2> */}
{item.parentIndex !== null &&
item.parentIndex !== index - 1 ? (
<h2 className="text-sm">
(parent: v{(item.parentIndex || 0) + 1})
</h2>
) : null}
</div>
<h2 className="text-sm">v{index + 1}</h2>
</HoverCardTrigger>
<HoverCardContent>
{item.type === "ai_edit" ? item.inputs.prompt : "Create"}
</HoverCardContent>
</HoverCard>
</li>
))}
</ul>
</div>
);
}