36 lines
1011 B
TypeScript
36 lines
1011 B
TypeScript
import { Link } from '@inertiajs/react';
|
|
import React from 'react';
|
|
import { Can } from '@/Components/Can';
|
|
|
|
interface NavigationItemProps {
|
|
href: string;
|
|
active: boolean;
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
ability?: string | string[];
|
|
}
|
|
|
|
export function NavigationItem({ href, active, icon, label, ability }: NavigationItemProps) {
|
|
const content = (
|
|
<Link
|
|
href={href}
|
|
className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
|
|
active
|
|
? 'bg-[var(--color-primary-50)] text-[var(--color-primary-600)]'
|
|
: 'text-gray-600 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<div className="w-5 h-5 flex items-center justify-center">
|
|
{icon}
|
|
</div>
|
|
<span className="font-medium hidden md:block">{label}</span>
|
|
</Link>
|
|
);
|
|
|
|
if (ability) {
|
|
return <Can ability={ability}>{content}</Can>;
|
|
}
|
|
|
|
return content;
|
|
}
|