Text.tsx93 lines · main
| 1 | import React from 'react' |
| 2 | |
| 3 | // @ts-ignore |
| 4 | // import TextStyles from './Text.module.css' |
| 5 | |
| 6 | export interface Props { |
| 7 | className?: string |
| 8 | children: any |
| 9 | style?: React.CSSProperties |
| 10 | type?: 'default' | 'secondary' | 'success' | 'warning' | 'danger' |
| 11 | disabled?: boolean |
| 12 | mark?: boolean |
| 13 | code?: boolean |
| 14 | keyboard?: boolean |
| 15 | underline?: boolean |
| 16 | strikethrough?: boolean |
| 17 | strong?: boolean |
| 18 | small?: boolean |
| 19 | } |
| 20 | |
| 21 | function Text({ children, style, mark, code, keyboard, strong }: Props) { |
| 22 | // let classes = [TextStyles['sbui-typography-text']] |
| 23 | // if (className) { |
| 24 | // classes.push(className) |
| 25 | // } |
| 26 | |
| 27 | // if (type) { |
| 28 | // classes.push(TextStyles[`sbui-typography-text-${type}`]) |
| 29 | // } |
| 30 | |
| 31 | // if (disabled) { |
| 32 | // classes.push(TextStyles[`sbui-typography-text-disabled`]) |
| 33 | // } |
| 34 | |
| 35 | // if (underline) { |
| 36 | // classes.push(TextStyles[`sbui-typography-text-underline`]) |
| 37 | // } |
| 38 | |
| 39 | // if (strikethrough) { |
| 40 | // classes.push(TextStyles[`sbui-typography-text-strikethrough`]) |
| 41 | // } |
| 42 | |
| 43 | // if (small) { |
| 44 | // classes.push(TextStyles['sbui-typography-text-small']) |
| 45 | // } |
| 46 | |
| 47 | if (code) |
| 48 | return ( |
| 49 | <code |
| 50 | style={style} |
| 51 | // className={classes.join(' ')} |
| 52 | > |
| 53 | {children} |
| 54 | </code> |
| 55 | ) |
| 56 | if (mark) |
| 57 | return ( |
| 58 | <mark |
| 59 | style={style} |
| 60 | // className={classes.join(' ')} |
| 61 | > |
| 62 | {children} |
| 63 | </mark> |
| 64 | ) |
| 65 | if (keyboard) |
| 66 | return ( |
| 67 | <kbd |
| 68 | style={style} |
| 69 | // className={classes.join(' ')} |
| 70 | > |
| 71 | {children} |
| 72 | </kbd> |
| 73 | ) |
| 74 | if (strong) |
| 75 | return ( |
| 76 | <strong |
| 77 | style={style} |
| 78 | // className={classes.join(' ')} |
| 79 | > |
| 80 | {children} |
| 81 | </strong> |
| 82 | ) |
| 83 | return ( |
| 84 | <span |
| 85 | style={style} |
| 86 | // className={classes.join(' ')} |
| 87 | > |
| 88 | {children} |
| 89 | </span> |
| 90 | ) |
| 91 | } |
| 92 | |
| 93 | export default Text |