import { SectionHeading } from '@nx/nx-dev/ui-common/src/lib/section-tags';
import {
  TanstackIcon,
  LernaIcon,
  EpicWebIcon,
  RedwoodJsIcon,
  StorybookIcon,
  RxJSIcon,
  SentryIcon,
  MuiIcon,
} from '@nx/nx-dev/ui-common';

export function OssProjects(): JSX.Element {
  return (
    <section>
      <div className="mx-auto max-w-7xl text-center">
        <SectionHeading as="h2" variant="subtitle">
          Popular OSS projects using Nx
        </SectionHeading>

        <div className="mt-20">
          <dl className="grid grid-cols-2 justify-between sm:grid-cols-4">
            <a
              rel="noreferrer"
              href="https://github.com/tanstack'"
              target="_blank"
              className="flex items-center justify-center border border-slate-200/20 p-12 transition hover:bg-slate-100/25 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
            >
              <TanstackIcon aria-hidden="true" className="h-14 w-14" />
            </a>
            <a
              rel="noreferrer"
              href="https://github.com/epicweb-dev/epicshop"
              target="_blank"
              className="flex cursor-pointer items-center justify-center border-y border-slate-200/20 p-12 transition hover:bg-slate-100/25 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
            >
              <EpicWebIcon aria-hidden="true" className="h-12 w-12" />
            </a>
            <a
              rel="noreferrer"
              href="https://redwoodjs.com/"
              target="_blank"
              className="flex items-center justify-center border border-slate-200/20 p-12 transition hover:bg-slate-100/25 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
            >
              <RedwoodJsIcon aria-hidden="true" className="h-12 w-12" />
            </a>
            <a
              rel="noreferrer"
              href="https://github.com/storybookjs/storybook"
              target="_blank"
              className="flex items-center justify-center border-y border-r border-slate-200/20 p-12 transition hover:bg-slate-100/25 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
            >
              <StorybookIcon aria-hidden="true" className="h-12 w-12" />
            </a>
            <a
              rel="noreferrer"
              href="https://lerna.js.org"
              target="_blank"
              className="flex items-center justify-center border-x border-b border-slate-200/20 p-12 transition hover:bg-slate-100/25 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
            >
              <LernaIcon aria-hidden="true" className="h-20 w-20" />
            </a>
            <a
              rel="noreferrer"
              href="https://github.com/ReactiveX/rxjs"
              target="_blank"
              className="flex items-center justify-center border-b border-slate-200/20 p-12 transition hover:bg-slate-100/25 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
            >
              {' '}
              <RxJSIcon aria-hidden="true" className="h-12 w-12" />
            </a>
            <a
              rel="noreferrer"
              href="https://github.com/getsentry/sentry-javascript"
              target="_blank"
              className="flex items-center justify-center border-x border-b border-slate-200/20 p-12 transition hover:bg-slate-100/25 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
            >
              <SentryIcon aria-hidden="true" className="h-16 w-16" />
            </a>
            <a
              rel="noreferrer"
              href="https://github.com/mui/material-ui"
              target="_blank"
              className="flex items-center justify-center border-b border-r border-slate-200/20 p-12 transition hover:bg-slate-100/25 hover:text-slate-950 dark:border-slate-800/20 dark:hover:border-slate-600/20 dark:hover:bg-slate-600/10 dark:hover:text-white"
            >
              <MuiIcon aria-hidden="true" className="h-12 w-12" />
            </a>
          </dl>
        </div>
      </div>
    </section>
  );
}