45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { BacklinkPage } from "@/hooks/useBacklinks";
|
|
|
|
interface Props {
|
|
backlinks: BacklinkPage[];
|
|
}
|
|
|
|
export default function BacklinkIndicator({ backlinks }: Props) {
|
|
if (backlinks.length === 0) return null;
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger
|
|
render={<Button variant="ghost" size="sm" className="text-xs text-muted-foreground h-7 px-2" />}
|
|
>
|
|
← {backlinks.length} backlink{backlinks.length !== 1 ? "s" : ""}
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-64 p-2" align="end">
|
|
<p className="text-xs font-semibold text-muted-foreground mb-2 px-1">
|
|
Pages linking here
|
|
</p>
|
|
<ul className="space-y-0.5">
|
|
{backlinks.map((page) => (
|
|
<li key={page.name}>
|
|
<Link
|
|
to={`/editor/${page.name}`}
|
|
className="flex items-center gap-1.5 text-sm px-2 py-1 rounded hover:bg-accent"
|
|
>
|
|
<span>{page.title ?? page.name}</span>
|
|
{page.title && (
|
|
<span className="text-xs text-muted-foreground font-mono">
|
|
({page.name})
|
|
</span>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|