chore: abstracted commonly used type to types file

src/components/Header.js

@@ -1,13 +1,13 @@
-import './Header.scss';
-
-import { Link, graphql, useStaticQuery } from 'gatsby';
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link, graphql, useStaticQuery } from 'gatsby';
+import cx from 'classnames';
 
+import { link } from '../types';
 import Container from './Container';
 import ExternalLink from './ExternalLink';
 import HamburgerMenu from './HamburgerMenu';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
+import './Header.scss';
 
 const Header = ({ pages }) => {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -79,7 +79,7 @@ const Header = ({ pages }) => {
           <ul>
             {pages.map((page, i) => (
               <li key={i}>
-                <Link to={page.path}>{page.displayName}</Link>
+                <Link to={page.url}>{page.displayName}</Link>
               </li>
             ))}
           </ul>
@@ -105,22 +105,16 @@ const Header = ({ pages }) => {
 };
 
 Header.propTypes = {
-  pages: PropTypes.arrayOf(
-    PropTypes.shape({
-      displayName: PropTypes.string.isRequired,
-      path: PropTypes.string.isRequired,
-      active: PropTypes.bool,
-    })
-  ),
+  pages: PropTypes.arrayOf(link),
 };
 
 Header.defaultProps = {
   pages: [
-    { displayName: 'Collect Data', path: '' },
-    { displayName: 'Explore Data', path: 'explore-data' },
-    { displayName: 'Build Apps', path: '' },
-    { displayName: 'Automate New Relic', path: '' },
-    { displayName: 'Reference Docs', path: '' },
+    { displayName: 'Collect Data', url: '' },
+    { displayName: 'Explore Data', url: 'explore-data' },
+    { displayName: 'Build Apps', url: '' },
+    { displayName: 'Automate New Relic', url: '' },
+    { displayName: 'Reference Docs', url: '' },
   ],
 };
 

src/types.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+
+// NOTE: while creating a recursive data structure is feasible,
+// it is not very performant.
+export const link = PropTypes.shape({
+  displayName: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  active: PropTypes.bool,
+  children: PropTypes.array,
+});