parent
8c380db940
commit
f51af47b51
2 changed files with 25 additions and 14 deletions
@ -1,21 +1,30 @@ |
||||
import { FC } from 'react'; |
||||
import { FC, useMemo } from 'react'; |
||||
|
||||
import { BodyTextProps } from './BodyText'; |
||||
import SmallText from './SmallText'; |
||||
|
||||
const InlineMonoText: FC<BodyTextProps> = ({ sx, ...bodyTextRestProps }) => ( |
||||
<SmallText |
||||
{...{ |
||||
...bodyTextRestProps, |
||||
monospaced: true, |
||||
sx: { |
||||
const InlineMonoText: FC<BodyTextProps> = ({ |
||||
edge, |
||||
sx, |
||||
...bodyTextRestProps |
||||
}) => { |
||||
const paddingLeft = useMemo(() => (edge === 'start' ? 0 : undefined), [edge]); |
||||
|
||||
const paddingRight = useMemo(() => (edge === 'end' ? 0 : undefined), [edge]); |
||||
|
||||
const combinedSx: BodyTextProps['sx'] = useMemo( |
||||
() => ({ |
||||
display: 'inline', |
||||
padding: '.1rem .3rem', |
||||
paddingLeft, |
||||
paddingRight, |
||||
|
||||
...sx, |
||||
}, |
||||
}} |
||||
/> |
||||
); |
||||
}), |
||||
[paddingLeft, paddingRight, sx], |
||||
); |
||||
|
||||
return <SmallText monospaced sx={combinedSx} {...bodyTextRestProps} />; |
||||
}; |
||||
|
||||
export default InlineMonoText; |
||||
|
Loading…
Reference in new issue