interface ScrenSizes {
    sm: number;
    md: number;
    lg: number;
    xlg: number;
    xxlg: number;
}
type PixelSizes = Record<keyof ScrenSizes, string>;

export const intSizes = {
    sm: 320,
    md: 768,
    lg: 1024,
    xlg: 1280,
    xxlg: 1440,
};

export const sizes = Object.keys(intSizes).reduce<Partial<PixelSizes>>(
    (result, sizeName) => ({
        ...result,
        [sizeName]: `${intSizes[sizeName as keyof ScrenSizes]}px`,
    }),
    {}
) as PixelSizes;

export const screen = Object.keys(intSizes).reduce(
    (result, sizeName) => ({
        ...result,
        [sizeName]: `@media (min-width: ${
            sizes[sizeName as keyof ScrenSizes]
        })`,
    }),
    {}
) as PixelSizes;