75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import {
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@boring.tools/ui'
|
|
import { Link, createLazyFileRoute } from '@tanstack/react-router'
|
|
import { PlusCircleIcon } from 'lucide-react'
|
|
import { PageWrapper } from '../components/PageWrapper'
|
|
import { useChangelogList } from '../hooks/useChangelog'
|
|
|
|
const Component = () => {
|
|
const { data, error, isPending, refetch } = useChangelogList()
|
|
|
|
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 (
|
|
<PageWrapper breadcrumbs={[{ name: 'Changelog', to: '/changelog' }]}>
|
|
<div className="flex flex-col gap-5">
|
|
<h1 className="text-3xl">Changelog</h1>
|
|
|
|
<div className="flex gap-10 w-full">
|
|
{!isPending &&
|
|
data &&
|
|
data.map((changelog) => {
|
|
return (
|
|
<Link
|
|
to="/changelog/$id"
|
|
params={{ id: changelog.id }}
|
|
key={changelog.id}
|
|
>
|
|
<Card className="max-w-56 min-w-56 w-full h-36 hover:border-emerald-700 transition">
|
|
<CardHeader className="flex items-center justify-center">
|
|
<CardTitle>{changelog.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex items-center justify-center flex-col">
|
|
<span>Versions: {changelog.computed.versionCount}</span>
|
|
|
|
<span>Commits: {changelog.computed.commitCount}</span>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
)
|
|
})}
|
|
|
|
<Link to="/changelog/create">
|
|
<Card className="max-w-56 min-w-56 w-full h-36 hover:border-emerald-700 transition">
|
|
<CardHeader className="flex items-center justify-center">
|
|
<CardTitle>New Changelog</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex items-center justify-center">
|
|
<PlusCircleIcon strokeWidth={1.5} className="w-10 h-10" />
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</PageWrapper>
|
|
)
|
|
}
|
|
|
|
export const Route = createLazyFileRoute('/changelog/')({
|
|
component: Component,
|
|
})
|