42 lines
932 B
JavaScript
42 lines
932 B
JavaScript
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>
|
|
)
|
|
|
|
export const H1Separator = ({ title, component }) => {
|
|
|
|
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={component}
|
|
sx={{ textTransform: "uppercase" }}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
</Box>
|
|
<Box flexGrow={1} borderTop={1}>
|
|
<TerminalDiamond right />
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |