This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/design/Divider.tsx
2021-10-24 05:19:39 +02:00

39 lines
860 B
TypeScript

interface DividerProps {
content: string
}
export const Divider: React.FC<DividerProps> = (props) => {
const { content } = props
return (
<>
<div className='text-divider'>{content}</div>
<style jsx>
{`
.text-divider {
--text-divider-gap: 1rem;
--color-divider: #414141;
display: flex;
align-items: center;
letter-spacing: 0.1em;
&::before,
&::after {
content: '';
height: 1px;
background-color: var(--color-divider);
flex-grow: 1;
}
&::before {
margin-right: var(--text-divider-gap);
}
&::after {
margin-left: var(--text-divider-gap);
}
}
`}
</style>
</>
)
}