39 lines
860 B
TypeScript
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>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|