How to correctly use page components without GraphQL - reactjs

Question

I have a new Gatsby site, which has 3 pages (with more to come). I am finding that I am having to repeat lots of styling and I know there must be a correct way to avoid doing this but I'm unsure what. I'm using Emotion with Tailwind.
There is a hero element on all pages, which include a heading and description:
<Hero>
<Title>
Page title here
</Title>
<Lead>
Descirption text here
</Lead>
</Hero>
This is the styling for it:
const Hero = styled.header`
${tw`bg-blue-dark p-6`};
`
const Title = styled.h1`
${tw`text-white tracking-wide font-medium`};
`
const Lead = styled.p`
${tw`text-gray leading-relaxed mb-1`};
a {
${tw`text-white font-medium no-underline text-purple hover:text-white`};
}
`
Some pages also have action buttons:
<Actions>
<LinkPrimary to="/some-page/">Click for more</LinkPrimary>
<LinkSecondary to="/some-other-page/">Or click here</LinkSecondary>
</Actions>
Full page template looks like (this is what I'm duplicating for every new page):
import React from "react"
import Layout from "../components/layout"
import styled from "#emotion/styled"
import { Link } from "gatsby"
import tw from "tailwind.macro"
const Hero = styled.header`
${tw`bg-blue-dark p-6`};
`
const Title = styled.h1`
${tw`text-white tracking-wide font-medium`};
`
const Lead = styled.p`
${tw`text-gray leading-relaxed mb-1`};
a {
${tw`text-white font-medium no-underline text-purple hover:text-white`};
}
`
const Actions = styled.section`
${tw`text-center m-2 mt-8 mb-24`};
`
const LinkPrimary = styled(Link)`
${tw`block bg-pink hover:bg-green-light text-blue-dark font-bold no-underline py-4 px-4 m-4 rounded`}
`
const LinkSecondary = styled(Link)`
${tw`block bg-regal-blue hover:bg-blue-light text-pink hover:text-white font-semibold no-underline py-4 px-4 m-4 rounded`}
`
export default () => (
<Layout>
<Hero>
<Title>
Hey I'm The About Page
</Title>
<Lead>
Learn all about us
</Lead>
</Hero>
<Actions>
<LinkPrimary to="/some-page/">Click for more</LinkPrimary>
<LinkSecondary to="/some-other-page/">Or click here</LinkSecondary>
</Actions>
</Layout>
)
The problem I have is for every new page I have to repeat the styling. I am manually creating these pages within src/pages and editing the title and description for each page. Pages that have the buttons I am also editing the button text and URL.
I'm guessing there must be a way to create a "hero" component which includes the title and lead with their styling, then import it into each page and edit the content on a per-page basis.
Not all pages will have the action buttons so they probably need to be in their own component and just imported where needed.
If someone could give me a basic demo or link to some docs where this is explained that would be much appreciated. All my research only gives examples of how to do this querying with GraphQL.

Answer 1

Alright, I think I have something that works so will post an answer.
Create a Hero component src/components/hero.js
import React from "react"
import styled from "#emotion/styled"
import tw from "tailwind.macro"
const Header = styled.header`
${tw`p-6`};
`
const Title = styled.h1`
${tw`text-white tracking-wide text-lg font-medium`};
`
const Lead = styled.p`
${tw`text-purple-light leading-relaxed text-lg`};
`
const Hero = props => (
<Header>
<Title>{props.heading}</Title>
<Lead>{props.text}</Lead>
</Header>
)
export default Hero
Then use it in your pages, index page, about page, wherever it's needed:
import React from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"
export default () => (
<Layout>
<Hero
heading="Hello world!"
text="This is the lead text for this page."
/>
...
</Layout>
)
The great thing about this is now my styling for my hero element is all contained in my Hero component. I will probably do the same for the call to action buttons.
If you want to have links or html tags in your text, you can do the following:
<Hero
heading={[<em>Links</em>, " that", <br />, " go places"]}
text={[
"You can write some text here followed by ",
<Link to="/learn/">
a link to another page
</Link>,
" that you can click.",
]}
/>