87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { History } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Separator } from "@/components/ui/separator";
|
|
|
|
interface FloatingVersionTocProps {
|
|
versions: { version: string; date: string }[];
|
|
}
|
|
|
|
export function FloatingVersionToc({ versions }: FloatingVersionTocProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const [activeVersion, setActiveVersion] = useState(versions[0]?.version || "");
|
|
|
|
useEffect(() => {
|
|
const handleIntersection = (entries: IntersectionObserverEntry[]) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setActiveVersion(entry.target.id.replace("version-", ""));
|
|
}
|
|
});
|
|
};
|
|
|
|
const observer = new IntersectionObserver(handleIntersection, {
|
|
root: null,
|
|
rootMargin: "-64px 0px -50% 0px",
|
|
threshold: 0.25,
|
|
});
|
|
|
|
versions.forEach(({ version }) => {
|
|
const section = document.getElementById(`version-${version}`);
|
|
if (section) observer.observe(section);
|
|
});
|
|
|
|
return () => observer.disconnect();
|
|
}, [versions]);
|
|
|
|
const handleScrollToVersion = (version: string) => {
|
|
const element = document.getElementById(`version-${version}`);
|
|
if (element) {
|
|
setTimeout(() => {
|
|
element.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
}, 100);
|
|
setActiveVersion(version);
|
|
setOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 md:hidden z-50">
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" className="rounded-full shadow-lg px-4 py-2 flex items-center gap-2">
|
|
<History className="w-5 h-5" />
|
|
Version - {activeVersion}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-56 p-2 bg-background shadow-md rounded-lg">
|
|
<ScrollArea className="h-72">
|
|
<h2 className="px-4 py-2 font-semibold">Version History</h2>
|
|
<ul className="space-y-1">
|
|
{versions.map(({ version }) => (
|
|
<li key={version}>
|
|
<Separator />
|
|
<Button
|
|
variant="ghost"
|
|
className={cn("w-full justify-start text-sm", {
|
|
"text-primary font-bold": activeVersion === version,
|
|
})}
|
|
onClick={() => handleScrollToVersion(version)}
|
|
>
|
|
v.{version}
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</ScrollArea>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
);
|
|
}
|