88 lines
3.4 KiB
TypeScript
88 lines
3.4 KiB
TypeScript
import { useQuery } from "@tanstack/react-query"
|
|
import api from "../api/eolas-api"
|
|
import { Link } from "react-router"
|
|
import { Badge } from "./ui/badge"
|
|
|
|
export default function EntryReferences({ entryTitle }) {
|
|
const { data: tags, isLoading: tagsLoading } = useQuery({
|
|
queryKey: [`tags_for_${entryTitle}`],
|
|
queryFn: () => api.get(`/tags/${entryTitle}`).then((res) => res.data),
|
|
})
|
|
|
|
const { data: backlinks, isLoading: backlinksLoading } = useQuery({
|
|
queryKey: [`backlinks_for_${entryTitle}`],
|
|
queryFn: () => api.get(`/entries/backlinks/${entryTitle}`).then((res) => res.data),
|
|
})
|
|
|
|
const { data: outlinks, isLoading: outlinksLoading } = useQuery({
|
|
queryKey: [`outlinks_for_${entryTitle}`],
|
|
queryFn: () => api.get(`/entries/outlinks/${entryTitle}`).then((res) => res.data),
|
|
})
|
|
|
|
console.log(backlinks)
|
|
return (
|
|
<div className="w-full flex flex-row justify-between gap-3">
|
|
<div className="w-full">
|
|
<div className="flex flex row justify-between bg-sidebar">
|
|
<h3 className="font-medium text-sm p-1 ml-1">Tags</h3>
|
|
<Badge variant="secondary" className="rounded-none">
|
|
{tags?.count}
|
|
</Badge>
|
|
</div>
|
|
<div className="mt-2 mb-3 pl-1">
|
|
{tags?.data.map((item, i) => (
|
|
<Link
|
|
key={i}
|
|
to={`/tags/${item}`}
|
|
className="text-foreground underline-offset-3 text-sm underline hover:text-gray-700 dark:hover:text-green-300 pr-2"
|
|
>
|
|
{item}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex row justify-between bg-sidebar">
|
|
<h3 className="font-medium text-sm p-1 ml-1">Incoming links</h3>
|
|
<Badge variant="secondary" className="rounded-none">
|
|
{backlinks?.count}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="mt-2 mb-3 pl-1">
|
|
{backlinks &&
|
|
backlinks?.data.map((item, i) => (
|
|
<Link
|
|
key={i}
|
|
to={`/entries/${item}`}
|
|
className="text-foreground underline-offset-3 text-sm underline hover:text-gray-700 dark:hover:text-green-300 pr-2 block mb-2"
|
|
>
|
|
{item.replace(/_/g, " ")}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full">
|
|
<div className="flex flex row justify-between bg-sidebar">
|
|
<h3 className="font-medium text-sm p-1 ml-1">Outgoing links</h3>
|
|
<Badge variant="secondary" className="rounded-none">
|
|
{outlinks?.count}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="mt-2 mb-3 pl-1">
|
|
{outlinks &&
|
|
outlinks?.data.map((item, i) => (
|
|
<Link
|
|
key={i}
|
|
to={`/entries/${item}`}
|
|
className="text-foreground underline-offset-3 text-sm underline hover:text-gray-700 dark:hover:text-green-300 pr-2 block mb-2"
|
|
>
|
|
{item.replace(/_/g, " ")}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|