112 lines
4.1 KiB
TypeScript
112 lines
4.1 KiB
TypeScript
import { Tab } from '@headlessui/react';
|
|
import { Button, SectionHeading } from '@nx/nx-dev/ui-common';
|
|
import { AnimatePresence } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import { Fragment } from 'react';
|
|
import { tabs } from './extensible-and-integrated/tabs';
|
|
|
|
export function ExtensibleAndIntegrated(): JSX.Element {
|
|
return (
|
|
<article
|
|
id="extensible-and-integrated"
|
|
className="overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
|
|
>
|
|
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
|
<header className="max-w-2xl">
|
|
<SectionHeading
|
|
as="h1"
|
|
variant="title"
|
|
id="extensible-and-integrated"
|
|
>
|
|
Integrated developer experience
|
|
</SectionHeading>
|
|
<SectionHeading
|
|
as="p"
|
|
variant="display"
|
|
id="nx-is-fast"
|
|
className="mt-4"
|
|
>
|
|
Everything is just a click away
|
|
</SectionHeading>
|
|
</header>
|
|
<div className="mt-8 flex flex-col gap-16 font-normal md:flex-row">
|
|
<p className="max-w-xl text-lg text-slate-700 dark:text-slate-400">
|
|
No need to browse the docs to find the right commands to run.{' '}
|
|
<span className="font-medium">Stay in the flow!</span> Augment your
|
|
editor with Nx Console, a dedicated extension available for{' '}
|
|
<Link
|
|
href="/getting-started/editor-setup"
|
|
title="Install VSCode's native extension for Nx"
|
|
className="font-medium text-blue-500 dark:text-sky-500"
|
|
>
|
|
VSCode
|
|
</Link>{' '}
|
|
,{' '}
|
|
<Link
|
|
href="/getting-started/editor-setup"
|
|
className="font-medium text-blue-500 dark:text-sky-500"
|
|
title="Install JetBrains' native plugin for Nx"
|
|
>
|
|
JetBrains
|
|
</Link>{' '}
|
|
and{' '}
|
|
<Link
|
|
href="/getting-started/editor-setup#neovim"
|
|
className="font-medium text-blue-500 dark:text-sky-500"
|
|
>
|
|
Neovim
|
|
</Link>
|
|
. Generating a new library, running e2e tests, building your app -
|
|
everything just a click away.
|
|
</p>
|
|
<p className="max-w-xl text-lg text-slate-700 dark:text-slate-400">
|
|
Debug and understand your workspace with the built-in{' '}
|
|
<code>nx graph</code> capabilities! Also,{' '}
|
|
<span className="font-medium">
|
|
give yourself a treat by enabling the Nx Cloud GitHub integration
|
|
</span>
|
|
. Most CI interfaces are a struggle to work with and they are not
|
|
made for monorepos. The{' '}
|
|
<Link
|
|
href="https://nx.app/?utm_source=nx.dev"
|
|
title="Nx Cloud: Distributed Task execution & Caching"
|
|
className="font-medium text-blue-500 dark:text-sky-500"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Nx Cloud
|
|
</Link>{' '}
|
|
integration takes care of that, presenting what matters most in an
|
|
awesome visual way.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="relative mx-auto max-w-7xl px-4 pt-6 pb-12 sm:px-6 lg:px-8 lg:pb-4 lg:pt-6">
|
|
<Tab.Group>
|
|
<Tab.List>
|
|
<div className="flex justify-between space-x-4 md:justify-start">
|
|
{tabs.map((tab) => (
|
|
<Tab as={Fragment} key={'tab-' + tab.title}>
|
|
{({ selected }) => (
|
|
<Button
|
|
variant={selected ? 'primary' : 'secondary'}
|
|
size="small"
|
|
>
|
|
{tab.title}
|
|
</Button>
|
|
)}
|
|
</Tab>
|
|
))}
|
|
</div>
|
|
</Tab.List>
|
|
<Tab.Panels>
|
|
{tabs.map((tab) => (
|
|
<Tab.Panel key={'panel-' + tab.title}>{tab.panel}</Tab.Panel>
|
|
))}
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|