docs(nxdev): add announcement banner for nx conf lite (#9928)

nx-dev/nx-dev/pages/_app.tsx

@@ -1,4 +1,5 @@
 import { sendPageViewEvent } from '@nrwl/nx-dev/feature-analytics';
+import { AnnouncementBanner } from '@nrwl/nx-dev/ui-common';
 import { DefaultSeo } from 'next-seo';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
@@ -57,6 +58,7 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
         Skip to content
       </a>
       <div className="documentation-app bg-white text-gray-700 antialiased">
+        <AnnouncementBanner />
         <Component {...pageProps} />
       </div>
       {/* Global Site Tag (gtag.js) - Google Analytics */}

nx-dev/ui-common/src/index.ts

@@ -1,3 +1,4 @@
+export * from './lib/announcement-banner';
 export * from './lib/breadcrumbs';
 export * from './lib/header';
 export * from './lib/footer';

nx-dev/ui-common/src/lib/announcement-banner.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+
+export function AnnouncementBanner() {
+  return (
+    <div className="bg-slate-800">
+      <div className="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
+        <div className="pr-16 text-center sm:px-16">
+          <p className="text-sm font-medium text-white">
+            <span className="md:hidden">
+              <Link href="/conf">
+                <a className="text-white underline">
+                  Nx Conf Lite is coming! 4/29
+                </a>
+              </Link>
+            </span>
+            <span className="hidden md:inline">
+              To your agenda! Nx Conf Lite is on 4/29, a free to attend
+              conference that you don't want to miss!
+            </span>
+            <span className="inline-block sm:ml-2">
+              <Link href="/conf">
+                <a className="font-bold text-white underline">
+                  {' '}
+                  Schedule and more info <span aria-hidden="true">&rarr;</span>
+                </a>
+              </Link>
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AnnouncementBanner;