Navigation List

1import * as React from 'react';
2import Link from 'next/link';
3import { cn } from '@/lib/utils/deso';
4import { LucideIcon } from 'lucide-react';
5import { Badge } from '@/components/ui/badge';
6 
7export interface NavigationItemProps {
8  href: string;
9  icon: LucideIcon;
10  label: string;
11  isActive?: boolean;
12  unreadCount?: number;
13}
14 
15export function NavigationItem({
16  href,
17  icon: Icon,
18  label,
19  isActive = false,
20  unreadCount,
21}: NavigationItemProps) {
22  return (
23    <li>
24      <Link
25        href={href}
26        className={cn(
27          'flex items-center gap-3 rounded-full px-4 py-2 text-lg font-normal transition-colors',
28          isActive
29            ? 'bg-accent text-accent-foreground'
30            : 'hover:bg-accent/50 text-muted-foreground hover:text-accent-foreground'
31        )}
32      >
33        <Icon className="h-6 w-6" />
34        <span>{label}</span>
35        {unreadCount && unreadCount > 0 && (
36          <Badge variant="destructive" className="ml-auto rounded-full">
37            {unreadCount > 99 ? '99+' : unreadCount}
38          </Badge>
39        )}
40      </Link>
41    </li>
42  );
43}
44 
45export interface NavigationListProps {
46  items: NavigationItemProps[];
47  className?: string;
48}
49 
50export function NavigationList({ items, className }: NavigationListProps) {
51  return (
52    <nav className={cn('w-full', className)}>
53      <ul className="space-y-1">
54        {items.map((item) => (
55          <NavigationItem key={item.href} {...item} />
56        ))}
57      </ul>
58    </nav>
59  );
60}