siakad-itm/resources/js/components/nav-secondary.tsx

51 lines
1.4 KiB
TypeScript

'use client';
import { Link } from '@inertiajs/react';
import type { Icon } from '@tabler/icons-react';
import * as React from 'react';
import {
SidebarGroup,
SidebarGroupContent,
SidebarMenu,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
export function NavSecondary({
items,
...props
}: {
items: {
title: string;
url: string;
icon: Icon;
badge?: number;
}[];
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
return (
<SidebarGroup {...props}>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild tooltip={item.title}>
<Link href={item.url}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
{!!item.badge && (
<SidebarMenuBadge>
{item.badge}
</SidebarMenuBadge>
)}
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
);
}