create responsive fonts

PHOTO EMBED

Thu Jun 01 2023 18:27:25 GMT+0000 (Coordinated Universal Time)

Saved by @yarenrkmez 

import { css } from "styled-components";

export const createResponsiveFont = (fontSizes: { [key: string]: string }) => {
  return css`
    ${Object.keys(fontSizes).map((breakpoint) => {
      return css`
        @media (max-width: ${breakpoint}) {
          font-size: ${fontSizes[breakpoint]};
        }
      `;
    })}
  `;
};
content_copyCOPY

const fontSizes: { [key: string]: string } = { [styles.breakpoints.desktop]:"20px", [styles.breakpoints.tablet]:"16px", [styles.breakpoints.phoneM]:"12px", [styles.breakpoints.phone]:"12px" }; ${createResponsiveFont(fontSizes)}