create h2-separator component

2023-01-08 01:15:25 +05:00
parent f1c9831f58
commit e1adea64af
2 changed files with 24 additions and 5 deletions
--- a/src/components/heading-separators.js
+++ b/src/components/heading-separators.js
@ -39,4 +39,25 @@ export const H1Separator = ({ title, component }) => {
      </Box>
    </Box>
  )
-}
+}
+
+export const H2Separator = ({ title1, title2, component }) => (
+  <Box display="flex" py={1}>
+    <Typography
+      variant="h2"
+      component={component}
+      sx={{ textTransform: "uppercase", pr: 2.5 }}
+    >
+      {title1}{" "}
+      <Box component="span" fontWeight={700}>
+        {title2}
+      </Box>
+    </Typography>
+    <Box flexGrow={1} display="flex" alignItems="center">
+      <Box borderTop={1} width="100%" height="1px">
+        <TerminalDiamond />
+        <TerminalDiamond right />
+      </Box>
+    </Box>
+  </Box>
+)