42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
import { Icon } from '@/components/icon';
|
|
import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
|
|
import { BookOpen, Folder } from 'lucide-react';
|
|
import { type ComponentPropsWithoutRef } from 'react';
|
|
|
|
const footerNavItems = [
|
|
{
|
|
title: 'Repository',
|
|
href: 'https://github.com/laravel/react-starter-kit',
|
|
icon: Folder,
|
|
},
|
|
{
|
|
title: 'Documentation',
|
|
href: 'https://laravel.com/docs/starter-kits',
|
|
icon: BookOpen,
|
|
},
|
|
];
|
|
|
|
export function NavFooter({ className, ...props }: ComponentPropsWithoutRef<typeof SidebarGroup>) {
|
|
return (
|
|
<SidebarGroup {...props} className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{footerNavItems.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={item.href} 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>
|
|
);
|
|
}
|