108 lines
4.3 KiB
TypeScript
108 lines
4.3 KiB
TypeScript
import { Tab } from '@headlessui/react';
|
|
import cx from 'classnames';
|
|
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-gray-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">
|
|
<h1 className="text-lg font-semibold tracking-tight text-blue-500 dark:text-sky-500">
|
|
Integrated developer experience
|
|
</h1>
|
|
<p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
|
|
Everything is just a click away
|
|
</p>
|
|
</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="/core-features/integrate-with-editors">
|
|
<a
|
|
title="Install VSCode's native extension for Nx"
|
|
className="font-medium text-blue-500 dark:text-sky-500"
|
|
>
|
|
VSCode
|
|
</a>
|
|
</Link>{' '}
|
|
,{' '}
|
|
<Link href="/core-features/integrate-with-editors#neovim">
|
|
<a className="font-medium text-blue-500 dark:text-sky-500">
|
|
Neovim
|
|
</a>
|
|
</Link>{' '}
|
|
and{' '}
|
|
<Link href="/core-features/integrate-with-editors#webstorm">
|
|
<a className="font-medium text-blue-500 dark:text-sky-500">
|
|
Webstorm
|
|
</a>
|
|
</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">
|
|
<a
|
|
title="Nx Cloud: Distributed Task execution & Caching"
|
|
className="font-medium text-blue-500 dark:text-sky-500"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Nx Cloud
|
|
</a>
|
|
</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 md:justify-start">
|
|
{tabs.map((tab) => (
|
|
<Tab as={Fragment} key={'tab-' + tab.title}>
|
|
{({ selected }) => (
|
|
<button
|
|
className={cx(
|
|
'rounded-md px-3 py-2 text-sm font-medium',
|
|
selected
|
|
? 'bg-blue-500 text-white dark:bg-sky-500'
|
|
: 'text-slate-700 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-300'
|
|
)}
|
|
>
|
|
{tab.title}
|
|
</button>
|
|
)}
|
|
</Tab>
|
|
))}
|
|
</div>
|
|
</Tab.List>
|
|
<Tab.Panels>
|
|
<AnimatePresence>
|
|
{tabs.map((tab) => (
|
|
<Tab.Panel key={'panel-' + tab.title}>{tab.panel}</Tab.Panel>
|
|
))}
|
|
</AnimatePresence>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|