"use client";
import { useState } from "react";
import { History, RotateCcw, Check } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
const versions = [
{
id: "v8",
timestamp: "2 minutes ago",
author: {
name: "You",
avatar: "",
initials: "YO",
},
changes: "Updated pricing section",
current: true,
},
{
id: "v7",
timestamp: "1 hour ago",
author: {
name: "Sarah Chen",
avatar:
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&auto=format&fit=crop",
initials: "SC",
},
changes: "Added new testimonial",
},
{
id: "v6",
timestamp: "3 hours ago",
author: {
name: "Alex Morgan",
avatar:
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&auto=format&fit=crop",
initials: "AM",
},
changes: "Fixed typos in header",
},
{
id: "v5",
timestamp: "Yesterday",
author: {
name: "You",
avatar: "",
initials: "YO",
},
changes: "Rewrote introduction paragraph",
},
{
id: "v4",
timestamp: "2 days ago",
author: {
name: "Sarah Chen",
avatar:
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&auto=format&fit=crop",
initials: "SC",
},
changes: "Added feature comparison table",
},
];
export const title = "React Dialog Block Version History";
export default function DialogVersionHistory() {
const [open, setOpen] = useState(false);
const [selectedVersion, setSelectedVersion] = useState<string | null>(null);
const [restored, setRestored] = useState(false);
const handleRestore = () => {
setRestored(true);
};
const handleClose = () => {
setOpen(false);
setTimeout(() => {
setSelectedVersion(null);
setRestored(false);
}, 200);
};
const selectedVersionData = versions.find((v) => v.id === selectedVersion);
if (restored) {
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<History className="mr-2 h-4 w-4" />
Version History
</Button>
</DialogTrigger>
</div>
<DialogContent style={{ maxWidth: "384px" }}>
<div className="flex flex-col items-center justify-center py-6 text-center">
<Check className="h-8 w-8 text-primary" />
<h3 className="mt-4 text-lg font-medium">Version Restored</h3>
<p className="mt-1 text-sm text-muted-foreground">
Restored to {selectedVersionData?.timestamp}
</p>
<Button onClick={handleClose} className="mt-6">
Done
</Button>
</div>
</DialogContent>
</Dialog>
);
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<History className="mr-2 h-4 w-4" />
Version History
</Button>
</DialogTrigger>
</div>
<DialogContent style={{ maxWidth: "384px" }}>
<DialogHeader>
<DialogTitle>Version History</DialogTitle>
<DialogDescription>
Select a version to restore.
</DialogDescription>
</DialogHeader>
<ScrollArea className="h-[250px] -mx-6 px-6">
<div className="space-y-1">
{versions.map((version) => (
<button
key={version.id}
className={cn(
"w-full text-left rounded-md p-2 transition-colors",
selectedVersion === version.id
? "bg-muted"
: "hover:bg-muted/50"
)}
onClick={() => setSelectedVersion(version.id)}
>
<div className="flex items-center gap-3">
<Avatar className="h-7 w-7">
<AvatarImage
src={version.author.avatar}
alt={version.author.name}
/>
<AvatarFallback className="text-xs">
{version.author.initials}
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm font-medium truncate">
{version.changes}
</span>
{version.current && (
<Badge variant="secondary" className="text-xs shrink-0">
Current
</Badge>
)}
</div>
<p className="text-xs text-muted-foreground">
{version.author.name} · {version.timestamp}
</p>
</div>
</div>
</button>
))}
</div>
</ScrollArea>
<DialogFooter>
<Button variant="outline" onClick={handleClose}>
Cancel
</Button>
<Button
onClick={handleRestore}
disabled={!selectedVersion || selectedVersion === "v8"}
>
<RotateCcw className="mr-2 h-4 w-4" />
Restore
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}