kopia lustrzana https://github.com/Tldraw/Tldraw
122 wiersze
1.9 KiB
TypeScript
122 wiersze
1.9 KiB
TypeScript
import styled from 'styles'
|
|
import ReactMarkdown from 'react-markdown'
|
|
import docs from './docs-content'
|
|
|
|
export default function CodeDocs({
|
|
isHidden,
|
|
}: {
|
|
isHidden: boolean
|
|
}): JSX.Element {
|
|
return (
|
|
<StyledDocs isHidden={isHidden}>
|
|
<ReactMarkdown>{docs.content}</ReactMarkdown>
|
|
</StyledDocs>
|
|
)
|
|
}
|
|
|
|
const StyledDocs = styled('div', {
|
|
position: 'absolute',
|
|
backgroundColor: '$panel',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
padding: 16,
|
|
overflowY: 'scroll',
|
|
userSelect: 'none',
|
|
paddingBottom: 64,
|
|
fontFamily: '$body',
|
|
fontWeight: 500,
|
|
|
|
variants: {
|
|
isHidden: {
|
|
true: {
|
|
visibility: 'hidden',
|
|
},
|
|
false: {
|
|
visibility: 'visible',
|
|
},
|
|
},
|
|
},
|
|
|
|
'& p': {
|
|
fontSize: '$3',
|
|
lineHeight: '1.3',
|
|
},
|
|
|
|
'& ol, ul': {
|
|
fontSize: '$3',
|
|
lineHeight: '1.3',
|
|
marginTop: 16,
|
|
marginBottom: 16,
|
|
},
|
|
|
|
'& li': {
|
|
fontSize: '$3',
|
|
lineHeight: '1.5',
|
|
},
|
|
|
|
'& code': {
|
|
font: '$mono',
|
|
},
|
|
|
|
'& hr': {
|
|
margin: '32px 0',
|
|
borderColor: '$muted',
|
|
},
|
|
|
|
'& h2': {
|
|
margin: '40px 0px 24px 0',
|
|
},
|
|
|
|
'& h3': {
|
|
fontSize: 20,
|
|
margin: '48px 0px 32px 0px',
|
|
},
|
|
|
|
'& h3 > code': {
|
|
fontWeight: 600,
|
|
font: '$mono',
|
|
},
|
|
|
|
'& h4': {
|
|
margin: '32px 0px 0px 0px',
|
|
},
|
|
|
|
'& h4 > code': {
|
|
font: '$mono',
|
|
fontSize: 16,
|
|
userSelect: 'all',
|
|
},
|
|
|
|
'& h4 > code > i': {
|
|
fontSize: 14,
|
|
color: '$muted',
|
|
},
|
|
|
|
'& pre': {
|
|
border: '1px solid $brushStroke',
|
|
font: '$mono',
|
|
fontWeight: 420,
|
|
lineHeight: 1.5,
|
|
padding: 16,
|
|
borderRadius: 4,
|
|
userSelect: 'all',
|
|
margin: '24px 0',
|
|
},
|
|
|
|
'& p > code, blockquote > code': {
|
|
padding: '2px 4px',
|
|
borderRadius: 2,
|
|
color: '$text',
|
|
backgroundColor: '$codeHl',
|
|
},
|
|
|
|
'& blockquote': {
|
|
backgroundColor: 'rgba(144, 144, 144, .05)',
|
|
padding: 12,
|
|
margin: '20px 0',
|
|
borderRadius: 8,
|
|
},
|
|
})
|