63 lines
1.4 KiB
JavaScript
63 lines
1.4 KiB
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>
|
|
)
|
|
}
|
|
|
|
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>
|
|
) |