99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import {
|
|
Button,
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from '@boring.tools/ui'
|
|
import { Link, Outlet, createLazyFileRoute } from '@tanstack/react-router'
|
|
import {
|
|
FileStackIcon,
|
|
Globe2Icon,
|
|
PencilIcon,
|
|
TerminalSquareIcon,
|
|
} from 'lucide-react'
|
|
import { ChangelogDelete } from '../components/Changelog/Delete'
|
|
import { useChangelogById } from '../hooks/useChangelog'
|
|
|
|
const Component = () => {
|
|
const { id } = Route.useParams()
|
|
const { data, error, isPending, refetch } = useChangelogById({ id })
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex items-center justify-center mt-32 flex-col">
|
|
<h1 className="text-3xl">Changelogs</h1>
|
|
<p>Please try again later</p>
|
|
|
|
<Button onClick={() => refetch()}>Retry</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-5">
|
|
{!isPending && data && (
|
|
<div>
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex gap-3 items-center">
|
|
<FileStackIcon
|
|
strokeWidth={1.5}
|
|
className="w-10 h-10 text-muted-foreground"
|
|
/>
|
|
<div>
|
|
<h1 className="text-3xl">{data.title}</h1>
|
|
|
|
<p className="text-muted-foreground mt-2">{data.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant={'ghost'}>
|
|
<TerminalSquareIcon strokeWidth={1.5} />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>CLI</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant={'ghost'}>
|
|
<Globe2Icon strokeWidth={1.5} />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Public Page</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Link to={'/changelog/$id/edit'} params={{ id }}>
|
|
<Button variant={'ghost'}>
|
|
<PencilIcon strokeWidth={1.5} />
|
|
</Button>
|
|
</Link>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Edit</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<ChangelogDelete id={id} />
|
|
</div>
|
|
</div>
|
|
|
|
<Outlet />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const Route = createLazyFileRoute('/changelog/$id')({
|
|
component: Component,
|
|
})
|