old-ybbond

My old site that was written with ReactJS
Log | Files | Refs | README | LICENSE | CC-LICENSE

Text.js (2146B)

      1 // @flow
      2 import React from 'react';
      3 import styled, {
      4   css,
      5   StyleSheetManager,
      6   type StyledComponent,
      7 } from 'styled-components';
      8 import theme from 'styled-theming';
      9 import {colors} from '../Theme/colors';
     10 
     11 const color = theme.variants('mode', 'variant', {
     12   default: {
     13     light: colors.dark,
     14     dark: colors.light,
     15   },
     16   green: {
     17     light: colors.darkGreen,
     18     dark: colors.green,
     19   },
     20   red: {
     21     light: colors.brown,
     22     dark: colors.orange,
     23   },
     24   blue: {
     25     light: colors.linkDark,
     26     dark: colors.linkLight,
     27   },
     28 });
     29 
     30 const mobileSizeResolver = (as?: string) => {
     31   switch (as) {
     32     case 'h1':
     33       return 1.1;
     34     case 'h2':
     35       return 1.05;
     36     case 'h3':
     37       return 1;
     38     case 'h4':
     39     case 'h5':
     40     case 'h6':
     41     default:
     42       return 0.9;
     43   }
     44 };
     45 
     46 const headingTagResolver = (as?: string) => {
     47   switch (as) {
     48     case 'h1':
     49       return '# ';
     50     case 'h2':
     51       return '## ';
     52     case 'h3':
     53       return '### ';
     54     case 'h4':
     55       return '#### ';
     56     case 'h5':
     57       return '##### ';
     58     case 'h6':
     59       return '###### ';
     60     default:
     61       return '';
     62   }
     63 };
     64 
     65 type TextProps = {
     66   as?: string,
     67   children: React$Node,
     68   variant?: 'default' | 'red' | 'green' | 'blue',
     69 };
     70 
     71 const TextBase: StyledComponent<TextProps, {}, {}> = styled.p`
     72   color: ${color};
     73   letter-spacing: 0.03rem;
     74   line-height: 1.4;
     75   word-wrap: break-word;
     76   overflow-wrap: break-word;
     77 
     78   @media (max-width: 599px) {
     79     font-size: ${({as}) => `${mobileSizeResolver(as)}rem`};
     80     line-height: 1.45;
     81   }
     82 
     83   ${props =>
     84     props.as && props.as[0] === 'h'
     85       ? css`
     86           &:before {
     87             content: ${props => `"${headingTagResolver(props.as)}"`};
     88             font-size: 0.8em;
     89           }
     90         `
     91       : css``}
     92 `;
     93 
     94 const Text = ({children, ...props}: TextProps) => {
     95   let {as, variant: baseVariant} = props;
     96   let variant = baseVariant ?? 'default';
     97   if (as && as[0] === 'h') {
     98     variant = 'green';
     99   }
    100   return (
    101     <StyleSheetManager disableVendorPrefixes>
    102       <TextBase {...props} as={as} variant={baseVariant ?? variant}>
    103         {children}
    104       </TextBase>
    105     </StyleSheetManager>
    106   );
    107 };
    108 
    109 export default Text;