Spaces:
Running
Running
File size: 3,889 Bytes
4fb6d26 |
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 110 111 112 113 114 115 116 117 118 119 120 |
"use client";
import { useState } from "react";
import classNames from "classnames";
import { Button } from "@/components/ui/button";
import Loading from "@/components/loading";
import {
History,
ChevronUp,
ChevronDown,
MousePointerClick,
} from "lucide-react";
interface HistoryNotificationProps {
/** Whether the historical version notification should be visible */
isVisible: boolean;
/** Whether the version promotion is in progress */
isPromotingVersion: boolean;
/** Function to promote the current historical version */
onPromoteVersion: () => void;
/** Function to go back to the current version */
onGoBackToCurrent: () => void;
/** Additional CSS classes */
className?: string;
}
export const HistoryNotification = ({
isVisible,
isPromotingVersion,
onPromoteVersion,
onGoBackToCurrent,
className,
}: HistoryNotificationProps) => {
const [isCollapsed, setIsCollapsed] = useState(false);
if (!isVisible) {
return null;
}
return (
<div
className={classNames(
"absolute bottom-4 left-4 z-10 bg-white/95 backdrop-blur-sm border border-neutral-200 rounded-xl shadow-lg transition-all duration-300 ease-in-out",
className
)}
>
{isCollapsed ? (
// Collapsed state
<div className="flex items-center gap-2 p-3">
<History className="size-4 text-neutral-600" />
<span className="text-xs text-neutral-600 font-medium">
Historical Version
</span>
<Button
variant="outline"
size="iconXs"
className="!rounded-md !border-neutral-200"
onClick={() => setIsCollapsed(false)}
>
<ChevronUp className="text-neutral-400 size-3" />
</Button>
</div>
) : (
// Expanded state
<div className="p-4 max-w-sm w-full">
<div className="flex items-start gap-3">
<History className="size-4 text-neutral-600 translate-y-1.5" />
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<p className="font-semibold text-sm text-neutral-800">
Historical Version
</p>
</div>
<Button
variant="outline"
size="iconXs"
className="!rounded-md !border-neutral-200"
onClick={() => setIsCollapsed(true)}
>
<ChevronDown className="text-neutral-400 size-3" />
</Button>
</div>
<p className="text-xs text-neutral-600 leading-relaxed mb-3">
You're viewing a previous version of this project. Promote this
version to make it current and deploy it live.
</p>
<div className="flex items-center gap-2">
<Button
size="xs"
variant="black"
className="!pr-3"
onClick={onPromoteVersion}
disabled={isPromotingVersion}
>
{isPromotingVersion ? (
<Loading overlay={false} />
) : (
<MousePointerClick className="size-3" />
)}
Promote Version
</Button>
<Button
size="xs"
variant="outline"
className=" !text-neutral-600 !border-neutral-200"
disabled={isPromotingVersion}
onClick={onGoBackToCurrent}
>
Go back to current
</Button>
</div>
</div>
</div>
</div>
)}
</div>
);
};
|