nx/nx-dev/ui-references/src/lib/references-section.tsx
2022-07-21 18:19:59 +00:00

78 lines
2.2 KiB
TypeScript

import {
BookmarkAltIcon,
ChipIcon,
CogIcon,
TerminalIcon,
} from '@heroicons/react/solid';
import { MenuItem } from '@nrwl/nx-dev/models-menu';
import { ReferencesNavList } from './references-nav-list';
import { ReferencesPackageCard } from './references-package-card';
export function ReferencesSection({
section,
}: {
section: MenuItem;
}): JSX.Element {
const guides =
section.itemList?.filter(
(x) => !x.path?.includes('executors') && !x.path?.includes('generators')
) || [];
const executors =
section.itemList?.filter((x) => x.path?.includes('executors')) || [];
const generators =
section.itemList?.filter((x) => x.path?.includes('generators')) || [];
return (
<section
id={section.id}
className="relative py-2 md:grid md:grid-cols-3 md:gap-x-16"
>
<header className="md:col-span-1">
<ReferencesPackageCard
id={section.id}
name={section.name as string}
path={section.path as string}
/>
</header>
<div className="mt-10 grid grid-cols-2 gap-8 sm:grid-cols-3 sm:space-y-0 md:col-span-2 md:mt-0">
{!!guides.length && (
<ReferencesNavList
header={{
icon:
section.id === 'nx' ? (
<TerminalIcon className="mr-2 h-5 w-5" aria-hidden="true" />
) : (
<BookmarkAltIcon
className="mr-2 h-5 w-5"
aria-hidden="true"
/>
),
title: section.id === 'nx' ? 'Commands' : 'Guides',
}}
links={guides}
/>
)}
{!!executors.length && (
<ReferencesNavList
header={{
icon: <ChipIcon className="mr-2 h-5 w-5" aria-hidden="true" />,
title: 'Executors',
}}
links={executors}
/>
)}
{!!generators.length && (
<ReferencesNavList
header={{
icon: <CogIcon className="mr-2 h-5 w-5" aria-hidden="true" />,
title: 'Generators',
}}
links={generators}
/>
)}
</div>
</section>
);
}