57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { Icon } from '@/components/icon';
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
} from '@/components/ui/sidebar';
|
|
import { type NavItem } from '@/types';
|
|
import { type ComponentPropsWithoutRef } from 'react';
|
|
|
|
export function NavFooter({
|
|
items,
|
|
className,
|
|
...props
|
|
}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
|
|
items: NavItem[];
|
|
}) {
|
|
return (
|
|
<SidebarGroup
|
|
{...props}
|
|
className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}
|
|
>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{items.map((item) => (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton
|
|
asChild
|
|
className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
|
|
>
|
|
<a
|
|
href={
|
|
typeof item.href === 'string'
|
|
? item.href
|
|
: item.href.url
|
|
}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{item.icon && (
|
|
<Icon
|
|
iconNode={item.icon}
|
|
className="h-5 w-5"
|
|
/>
|
|
)}
|
|
<span>{item.title}</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
);
|
|
}
|