77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
SidebarMenuAction,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
} from '@boring.tools/ui'
|
|
import { Link } from '@tanstack/react-router'
|
|
import { ChevronRightIcon, FileStackIcon, PlusIcon } from 'lucide-react'
|
|
import { useChangelogList } from '../hooks/useChangelog'
|
|
|
|
export const SidebarChangelog = () => {
|
|
const { data, error } = useChangelogList()
|
|
|
|
return (
|
|
<Collapsible asChild>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild tooltip="Changelog">
|
|
<Link
|
|
to="/changelog"
|
|
activeProps={{ className: 'bg-sidebar-accent' }}
|
|
>
|
|
<FileStackIcon />
|
|
<span>Changelog</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
|
|
<CollapsibleTrigger asChild>
|
|
<SidebarMenuAction className="data-[state=open]:rotate-90">
|
|
<ChevronRightIcon />
|
|
<span className="sr-only">Toggle</span>
|
|
</SidebarMenuAction>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
{!error &&
|
|
data?.map((changelog) => (
|
|
<SidebarMenuSubItem key={changelog.id}>
|
|
<SidebarMenuSubButton asChild>
|
|
<Link
|
|
to={`/changelog/${changelog.id}`}
|
|
activeProps={{
|
|
className: 'bg-sidebar-primary',
|
|
}}
|
|
>
|
|
<span>{changelog.title}</span>
|
|
</Link>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
))}
|
|
|
|
<SidebarMenuSubItem className="opacity-60">
|
|
<SidebarMenuSubButton asChild>
|
|
<Link
|
|
to="/changelog/create"
|
|
activeProps={{
|
|
className: 'bg-sidebar-primary',
|
|
}}
|
|
>
|
|
<span className="flex items-center gap-1">
|
|
<PlusIcon className="w-3 h-3" />
|
|
New changelog
|
|
</span>
|
|
</Link>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
)
|
|
}
|