responsive styled component

import { css, CSSObject, FlattenSimpleInterpolation } from "styled-components";

interface Size {
  [key: string]: number;
}

interface MediaQueries {
  [key: string]: (style: TemplateStringsArray | CSSObject) => FlattenSimpleInterpolation;
}

const sizes: Size = {
  desktop: 1024,
  tablet: 768,
  phone: 320,
  phoneS: 319,
};

export const mediaQueries: MediaQueries = Object.keys(sizes).reduce((acc, label) => {
  acc[label as keyof Size] = (style: TemplateStringsArray | CSSObject) => css`
    @media (max-width: ${sizes[label as keyof Size]}px) {
      ${css(style)};
    }
  `;
  return acc;
}, {} as MediaQueries);