Spaces:
Running
Running
File size: 3,958 Bytes
c10f8f8 25f348d c10f8f8 25f348d c10f8f8 d157265 c10f8f8 d157265 25f348d c10f8f8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import { History as HistoryIcon } from "lucide-react";
import { useState } from "react";
import { Commit } from "@/types";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { useEditor } from "@/hooks/useEditor";
import classNames from "classnames";
export function History() {
const { commits, currentCommit, setCurrentCommit, project } = useEditor();
const [open, setOpen] = useState(false);
if (commits.length === 0) return null;
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
size="xs"
variant={open ? "default" : "outline"}
className="!rounded-md max-lg:hidden"
>
<HistoryIcon className="size-3.5" />
{commits?.length} edit{commits?.length !== 1 ? "s" : ""}
</Button>
</PopoverTrigger>
<PopoverContent
className="!rounded-2xl !p-0 overflow-hidden !bg-neutral-900"
align="start"
>
<header className="text-sm px-4 py-3 border-b gap-2 bg-neutral-950 border-neutral-800 font-semibold text-neutral-200">
History
</header>
<main className="space-y-3">
{project?.private && (
<div className="px-4 pt-3">
<p className="text-amber-500 text-xs px-2 py-1 bg-amber-500/10 border border-amber-500/20 rounded-md">
As this project is private, you can't see the history of
changes.
</p>
</div>
)}
<ul className="max-h-[250px] overflow-y-auto">
{commits?.map((item: Commit, index: number) => (
<li
key={index}
className={classNames(
"px-4 text-gray-200 py-2 border-b border-gray-800 last:border-0 space-y-1",
{
"bg-blue-500/10":
currentCommit === item.oid ||
(index === 0 && currentCommit === null),
}
)}
>
<p className="line-clamp-1 text-sm">{item.title}</p>
<div className="w-full flex items-center justify-between gap-2">
<p className="text-gray-500 text-[10px]">
{new Date(item.date).toLocaleDateString("en-US", {
month: "2-digit",
day: "2-digit",
year: "2-digit",
}) +
" " +
new Date(item.date).toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: false,
})}
</p>
{currentCommit === item.oid ||
(index === 0 && currentCommit === null) ? (
<span className="text-blue-500 bg-blue-500/10 border border-blue-500/20 rounded-full text-[10px] px-2 py-0.5">
Current version
</span>
) : (
!project?.private && (
<Button
variant="link"
size="xss"
className="text-gray-400 hover:text-gray-200"
onClick={() => {
if (index === 0) {
setCurrentCommit(null);
} else {
setCurrentCommit(item.oid);
}
}}
>
See version
</Button>
)
)}
</div>
</li>
))}
</ul>
</main>
</PopoverContent>
</Popover>
);
}
|