70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export type BadgeType = 'red' | 'blue' | 'green'
|
|
|
|
export interface SidebarItemProps {
|
|
label: string
|
|
href: string
|
|
icon: React.ReactNode
|
|
active?: boolean
|
|
badge?: {
|
|
type: BadgeType
|
|
value: string | number
|
|
}
|
|
onClick?: () => void
|
|
}
|
|
|
|
const badgeStyles: Record<BadgeType, string> = {
|
|
red: 'bg-red-500/90 text-white',
|
|
blue: 'bg-blue-500/90 text-white',
|
|
green: 'bg-emerald-500/90 text-white',
|
|
}
|
|
|
|
export default function SidebarItem({
|
|
label,
|
|
href,
|
|
icon,
|
|
active,
|
|
badge,
|
|
onClick,
|
|
}: SidebarItemProps) {
|
|
const isPill = badge?.type === 'green' && typeof badge.value === 'string'
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
onClick={onClick}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-4 py-2.5 transition-all duration-200',
|
|
active
|
|
? 'bg-gradient-to-r from-cyan-600/30 to-blue-600/20 text-white shadow-[0_0_20px_-5px_rgba(6,182,212,0.25)]'
|
|
: 'text-slate-400 hover:bg-slate-700/50 hover:text-slate-200'
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
'flex shrink-0',
|
|
active ? 'text-cyan-300' : 'text-slate-500'
|
|
)}
|
|
>
|
|
{icon}
|
|
</span>
|
|
<span className="min-w-0 flex-1 truncate">{label}</span>
|
|
{badge != null && (
|
|
<span
|
|
className={cn(
|
|
'flex shrink-0 items-center justify-center text-xs font-bold',
|
|
isPill ? 'rounded-full px-2 py-0.5' : 'h-5 min-w-[1.25rem] rounded-full px-1.5',
|
|
badgeStyles[badge.type]
|
|
)}
|
|
>
|
|
{badge.value}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)
|
|
}
|