refactor: moved dashboards into their own component

src/components/quickstarts/QuickstartDashboards.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import pluralize from 'pluralize';
+import Intro from '../Intro';
+import ImageSlider from '../ImageSlider';
+import { quickstart } from '../../types';
+
+const QuickstartDashboards = ({ quickstart }) => (
+  <>
+    <Intro
+      css={css`
+        margin-bottom: 16px;
+      `}
+    >
+      {quickstart.name} quickstart contains{' '}
+      {pluralize('dashboard', quickstart.dashboards?.length ?? 0, true)}. These
+      interactive visualizations let you easily explore your data, understand
+      context, and resolve problems faster.
+    </Intro>
+
+    {quickstart.dashboards.map((dashboard, index) => (
+      <div key={index}>
+        <h3>{dashboard.name}</h3>
+        {dashboard.description && <p>{dashboard.description}</p>}
+        <ImageSlider height={400} images={dashboard.screenshots} />
+      </div>
+    ))}
+  </>
+);
+
+QuickstartDashboards.propTypes = {
+  quickstart: quickstart.isRequired,
+};
+
+export default QuickstartDashboards;

src/templates/ObservabilityPackDetails.js

@@ -7,6 +7,7 @@ import PageLayout from '../components/PageLayout';
 import Tabs from '../components/Tabs';
 import EmptyTab from '../components/quickstarts/EmptyTab';
 import QuickstartAlerts from '../components/quickstarts/QuickstartAlerts';
+import QuickstartDashboards from '../components/quickstarts/QuickstartDashboards';
 import {
   Layout,
   PageTools,
@@ -17,11 +18,8 @@ import {
   Link,
 } from '@newrelic/gatsby-theme-newrelic';
 import ImageGallery from '../components/ImageGallery';
-import Intro from '../components/Intro';
 import InstallButton from '../components/InstallButton';
-import ImageSlider from '../components/ImageSlider';
 import Markdown from '../components/Markdown';
-import pluralize from 'pluralize';
 import { quickstart } from '../types';
 import {
   QUICKSTARTS_REPO,
@@ -44,40 +42,6 @@ const allowedElements = [
   'hr',
 ];
 
-/**
- * @param {quickstart} pack
- */
-const renderDashboards = (pack) => {
-  const content = pack.dashboards.map((dashboard, index) => (
-    <>
-      <h3 key={index}>{dashboard.name}</h3>
-      <ImageSlider height={400} images={dashboard.screenshots} />
-      {dashboard.description && (
-        <>
-          <h4>Description</h4>
-          <p>{dashboard.description}</p>
-        </>
-      )}
-    </>
-  ));
-
-  return (
-    <>
-      <Intro
-        css={css`
-          margin-bottom: 16px;
-        `}
-      >
-        {pack.name} observability pack contains{' '}
-        {pluralize('dashboard', pack.dashboards?.length ?? 0, true)}. These
-        interactive visualizations let you easily explore your data, understand
-        context, and resolve problems faster.
-      </Intro>
-      {content}
-    </>
-  );
-};
-
 const ObservabilityPackDetails = ({ data, location }) => {
   const pack = data.observabilityPacks;
   const packUrl = pack.packUrl || QUICKSTARTS_REPO;
@@ -151,7 +115,7 @@ const ObservabilityPackDetails = ({ data, location }) => {
               </Tabs.Page>
               <Tabs.Page id="dashboards">
                 {pack.dashboards ? (
-                  renderDashboards(pack)
+                  <QuickstartDashboards quickstart={pack} />
                 ) : (
                   <EmptyTab
                     quickstartUrl={pack.packUrl}