feat: add beta banner to details page

src/components/quickstarts/BetaBanner.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import { Callout } from '@newrelic/gatsby-theme-newrelic';
+
+const BetaBanner = () => (
+  <Callout
+    variant={Callout.VARIANT.COURSE}
+    title="We're in beta!"
+    css={css`
+      margin-bottom: 1rem;
+      margin-top: 1rem;
+    `}
+  >
+    The New Relic I/O beta is currently available to all users, and will require
+    a full user license for future usage. Note that New Relic's free forever
+    tier comes with 1 free full user.
+  </Callout>
+);
+
+export default BetaBanner;

src/pages/instant-observability.js

@@ -9,14 +9,14 @@ import PackTile from '../components/PackTile';
 import IOBanner from '../components/IOBanner';
 import IOLogo from '../components/IOLogo';
 import Select from '../components/Select';
+import BetaBanner from '../components/quickstarts/BetaBanner';
 import {
   SearchInput,
   useTessen,
   ExternalLink,
   Button,
   Icon,
   Link,
-  Callout,
 } from '@newrelic/gatsby-theme-newrelic';
 import { navigate } from '@reach/router';
 
@@ -39,21 +39,6 @@ const VIEWS = {
   LIST: 'List view',
 };
 
-const betaBanner = () => (
-  <Callout
-    variant={Callout.VARIANT.COURSE}
-    title="We're in beta!"
-    css={css`
-      margin-bottom: 1rem;
-      margin-top: 1rem;
-    `}
-  >
-    The New Relic I/O beta is currently available to all users, and will require
-    a full user license for future usage. Note that New Relic's free forever
-    tier comes with 1 free full user.
-  </Callout>
-);
-
 /**
  * Determines if one string is a substring of the other, case insensitive
  * @param {String} substring the substring to test against
@@ -246,7 +231,7 @@ const QuickstartsPage = ({ data, location }) => {
           `}
         >
           {isMobile && <IOBanner isMobile />}
-          <div>{isMobile && betaBanner()}</div>
+          <div>{isMobile && <BetaBanner />}</div>
           <div
             css={css`
               padding: var(--site-content-padding);
@@ -387,7 +372,7 @@ const QuickstartsPage = ({ data, location }) => {
           `}
         >
           {!isMobile && <IOBanner />}
-          <div>{!isMobile && betaBanner()}</div>
+          <div>{!isMobile && <BetaBanner />}</div>
           <div
             css={css`
               background-color: var(--secondary-background-color);

src/templates/QuickstartDetails.js

@@ -29,6 +29,7 @@ import {
   LOGIN_LINK,
 } from '../data/constants';
 import QuickstartOverview from '../components/quickstarts/QuickstartOverview';
+import BetaBanner from '../components/quickstarts/BetaBanner';
 
 const QuickstartDetails = ({ data, location }) => {
   const quickstart = data.quickstarts;
@@ -88,6 +89,7 @@ const QuickstartDetails = ({ data, location }) => {
         meta={quickStartMeta}
       />
       <Breadcrumbs segments={breadcrumbs} />
+      <BetaBanner />
       <Tabs>
         <PageLayout
           type={PageLayout.TYPE.RELATED_CONTENT_TABS}