Create page title component

Author: good3n

src/components/PageTitle/PageTitle.component.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyledTitle } from './PageTitle.styles'
+
+const PageTitle = ({ title, description }) => (
+  <StyledTitle>
+    <h1>
+      <span>{title}</span>
+    </h1>
+    <p>{description}</p>
+  </StyledTitle>
+)
+
+PageTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+}
+
+export default PageTitle

src/components/PageTitle/PageTitle.styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+export const StyledTitle = styled.header`
+  margin-bottom: 4rem;
+
+  @media (max-width: 991px) {
+    margin-bottom: 3rem;
+  }
+
+  h1 {
+    font-size: var(--font-size__h4);
+    /* text-transform: uppercase; */
+    margin: 0 0 1rem;
+    color: var(--color__purple);
+  }
+
+  p {
+    margin: 0;
+  }
+`

src/components/PageTitle/index.js

@@ -0,0 +1 @@
+export { default as PageTitle } from './PageTitle.component'

src/pages/learning.js

@@ -4,12 +4,17 @@ import Seo from '../components/Seo'
 import Learning from '../data/learning.json'
 import { Sidebar } from '../components/Sidebar'
 import { DataList } from '../components/DataList'
+import { PageTitle } from '../components/PageTitle'
 
 const LearningPage = () => {
   const { learning } = Learning
   return (
     <Layout>
       <Seo title="Learning" />
+      <PageTitle
+        description="From the basics to advanced concepts, a collection of links to various knowledge articles."
+        title="Learning"
+      />
       <div className="wrapper">
         <Sidebar data={learning} page="learning" />
         <DataList data={learning} />

src/pages/resources.js

@@ -4,12 +4,17 @@ import Seo from '../components/Seo'
 import Resources from '../data/resources.json'
 import { Sidebar } from '../components/Sidebar'
 import { DataList } from '../components/DataList'
+import { PageTitle } from '../components/PageTitle'
 
 const ResourcesPage = () => {
   const { resources } = Resources
   return (
     <Layout>
       <Seo title="Resources" />
+      <PageTitle
+        description="Links to tools, libraries, frameworks, and more to improve your development process."
+        title="Resources"
+      />
       <div className="wrapper">
         <Sidebar data={resources} page="resources" />
         <DataList data={resources} />