nrwl · bcabanes · Oct 2, 2024 · Oct 3, 2024
@@ -1,7 +1,7 @@
 import type { Metadata, Viewport } from 'next';
 import AppRouterAnalytics from './app-router-analytics';
 import GlobalScripts from './global-scripts';
-
+import { LiveStreamNotifier } from '@nx/nx-dev/ui-common';
 import '../styles/main.css';
 
 // Metadata for the entire site
@@ -80,6 +80,7 @@ export default function RootLayout({
       </head>
       <body className="h-full bg-white text-slate-700 antialiased selection:bg-blue-500 selection:text-white dark:bg-slate-900 dark:text-slate-400 dark:selection:bg-sky-500">
         {children}
+        <LiveStreamNotifier />
         <GlobalScripts gaMeasurementId={gaMeasurementId} />
       </body>
     </html>

@@ -7,6 +7,7 @@ import Script from 'next/script';
 import { useEffect } from 'react';
 import '../styles/main.css';
 import Link from 'next/link';
+import { LiveStreamNotifier } from '@nx/nx-dev/ui-common';
 
 export default function CustomApp({
   Component,
@@ -79,6 +80,7 @@ export default function CustomApp({
         Skip to content
       </Link>
       <Component {...pageProps} />
+      <LiveStreamNotifier />
 
       {/* Global Site Tag (gtag.js) - Google Analytics */}
       <Script

@@ -22,6 +22,7 @@ export * from './lib/discord-icon';
 export * from './lib/trusted-by';
 export * from './lib/testimonials';
 export * from './lib/square-dotted-pattern';
+export * from './lib/live-stream-notifier';
 
 export { resourceMenuItems } from './lib/headers/menu-items';
 export { solutionsMenuItems } from './lib/headers/menu-items';

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState, useEffect, ReactElement } from 'react';
+import { motion } from 'framer-motion';
+import { MonorepoWorldIcon } from '@nx/nx-dev/ui-icons';
+import { ButtonLink } from './button';
+import {
+  PlayIcon,
+  XMarkIcon,
+  ChatBubbleLeftRightIcon,
+} from '@heroicons/react/24/outline';
+
+export function LiveStreamNotifier(): ReactElement {
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+
+  useEffect(() => {
+    const isClosedSession = sessionStorage.getItem(
+      'live-stream-notifier-closed'
+    );
+    if (isClosedSession === 'true') {
+      setIsVisible(false);
+    }
+  }, []);
+
+  const closeNotifier = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsVisible(false);
+    sessionStorage.setItem('live-stream-notifier-closed', 'true');
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <motion.div
+      layout
+      initial={{ y: '120%' }}
+      animate={{ y: 0 }}
+      exit={{ y: '120%' }}
+      transition={{
+        type: 'spring',
+        stiffness: 300,
+        damping: 30,
+        mass: 1,
+      }}
+      className="fixed bottom-0 left-0 right-0 z-30 w-full overflow-hidden bg-slate-950 text-white shadow-lg md:bottom-4 md:left-auto md:right-4 md:w-[512px] md:rounded-lg"
+      style={{ originY: 1 }}
+    >
+      <div className="relative p-4">
+        <button
+          onClick={closeNotifier}
+          className="absolute right-2 top-2 rounded-full p-1 hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-white"
+        >
+          <XMarkIcon className="size-5" aria-hidden="true" />
+          <span className="sr-only">Close</span>
+        </button>
+        <div>
+          <motion.h3
+            layout="position"
+            className="flex items-center gap-2 pr-8 text-lg font-semibold"
+          >
+            <MonorepoWorldIcon
+              aria-hidden="true"
+              className="size-8 flex-shrink-0"
+            />
+            <span>Monorepo World is live!</span>
+          </motion.h3>
+          <motion.div key="live-event" className="mt-4 space-y-4">
+            <p className="mb-2 text-sm">
+              Join us live for exciting talks on developer tooling and
+              monorepos! Catch the action on YouTube and join the conversation
+              on Discord!
+            </p>
+            <div className="flex flex-wrap items-center gap-1 sm:gap-4">
+              <a
+                title="Watch track 1"
+                href="https://youtube.com/live/DRwhhOEKgCM"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-[#DDFB24] px-2 py-2 text-sm font-semibold text-black transition hover:bg-[#B2CF04] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-black/70 md:px-4"
+              >
+                <PlayIcon aria-hidden="true" className="size-4" />
+                <span>Track 1</span>
+              </a>
+              <a
+                href="https://youtube.com/live/5on1MGdEFJw"
+                target="_blank"
+                title="Watch track 2"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 rounded-lg bg-[#DDFB24] px-2 py-2 text-sm font-semibold text-black transition hover:bg-[#B2CF04] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-black/70 md:px-4"
+              >
+                <PlayIcon aria-hidden="true" className="size-4" />
+                <span>Track 2</span>
+              </a>
+              <ButtonLink
+                variant="secondary"
+                size="small"
+                href="https://discord.gg/7yFabzBP"
+                target="_blank"
+                title="Join the discussion on Discord"
+                rel="noopener noreferrer"
+              >
+                <ChatBubbleLeftRightIcon
+                  aria-hidden="true"
+                  className="size-4"
+                />
+                <span>#monorepo-world</span>
+              </ButtonLink>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}