rename h2separator to h1 and expose component

src/components/heading-separators.js

@@ -18,7 +18,7 @@ const TerminalDiamond = ({ right }) => (
   </Box>
 )
 
-const H2Separator = ({ title }) => {
+export const H1Separator = ({ title, component }) => {
 
   return (
     <Box display="flex">
@@ -28,7 +28,7 @@ const H2Separator = ({ title }) => {
       <Box py={1.5} px={1} border={1} borderTop={0}>
         <Typography
           variant="h1"
-          component="h2"
+          component={component}
           sx={{ textTransform: "uppercase" }}
         >
           {title}
@@ -40,5 +40,3 @@ const H2Separator = ({ title }) => {
     </Box>
   )
 }
-
-export default H2Separator

src/pages/index.js

@@ -6,7 +6,7 @@ import Layout from "../components/layout"
 import Seo from "../components/seo"
 import { Box, Button, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material"
 import EastIcon from '@mui/icons-material/East'
-import H2Separator from "../components/h2-separator"
+import { H1Separator } from "../components/heading-separators"
 
 const serviceMenu = [
   { label: "Support", path: "/" },
@@ -49,7 +49,7 @@ const BlogIndex = ({ data, location }) => {
           Autonomic is a co-operative that is owned and run by its workers
         </Typography>
       </Box>
-      <H2Separator title="What we offer" />
+      <H1Separator title="What we offer" component="h2" />
       <List>
         {serviceMenu.map(({ label, path }) => (
           <ListItem key={label}>