36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { ChevronRightIcon } from '@heroicons/react/24/outline';
|
|
import { MenuItem } from '@nrwl/nx-dev/models-menu';
|
|
|
|
export function ReferencesNavList({
|
|
header,
|
|
links,
|
|
}: {
|
|
header: {
|
|
title: string;
|
|
icon: JSX.Element;
|
|
};
|
|
links: MenuItem;
|
|
}): JSX.Element {
|
|
return (
|
|
<nav className="relative">
|
|
<h4 className="mb-5 flex items-center text-lg font-bold tracking-tight text-slate-700 lg:text-xl">
|
|
{header.icon}
|
|
{header.title}
|
|
</h4>
|
|
<ul className="space-y-0.5 text-sm">
|
|
{links.itemList?.map((item, subIndex) => (
|
|
<li key={[item.id, subIndex].join('-')}>
|
|
<a
|
|
href={item.path}
|
|
className="group block flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50/10 px-4 py-2 text-slate-500 transition-all hover:bg-slate-100 hover:text-slate-900"
|
|
>
|
|
{item.name}
|
|
<ChevronRightIcon className="h-4 w-4 transition-all group-hover:translate-x-2" />
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|