create h2 separator component

src/components/h2-separator.js

@@ -0,0 +1,44 @@
+import { Box, Typography } from "@mui/material"
+import React from "react"
+
+const TerminalDiamond = ({ right }) => (
+  <Box position="relative">
+    <Box
+      sx={{
+        width: 5,
+        height: 5,
+        bgcolor: "primary.main",
+        transform: "rotate(45deg)",
+        position: "absolute",
+        top: -3,
+        left: right ? "inherit" : -3,
+        right: right ? -3 : "inherit",
+      }}
+    />
+  </Box>
+)
+
+const H2Separator = ({ title }) => {
+
+  return (
+    <Box display="flex">
+      <Box width={80} borderTop={1}>
+        <TerminalDiamond />
+      </Box>
+      <Box py={1.5} px={1} border={1} borderTop={0}>
+        <Typography
+          variant="h1"
+          component="h2"
+          sx={{ textTransform: "uppercase" }}
+        >
+          {title}
+        </Typography>
+      </Box>
+      <Box flexGrow={1} borderTop={1}>
+        <TerminalDiamond right />
+      </Box>
+    </Box>
+  )
+}
+
+export default H2Separator