mirror of
https://github.com/SomboChea/ui
synced 2024-06-28 05:55:33 +07:00
34 lines
774 B
TypeScript
34 lines
774 B
TypeScript
import { css } from 'emotion';
|
|
|
|
export const breakpoints = {
|
|
small: 576,
|
|
medium: 768,
|
|
large: 1024,
|
|
container: 1240,
|
|
xlarge: 1275,
|
|
};
|
|
|
|
type Sizes = keyof typeof breakpoints;
|
|
|
|
type MediaQuery = {
|
|
[key in Sizes]: (cls: any) => string;
|
|
};
|
|
|
|
const mq: MediaQuery = Object.keys(breakpoints).reduce(
|
|
(accumulator, label) => {
|
|
const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
|
|
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
|
|
accumulator[label] = cls =>
|
|
css`
|
|
@media (${prefix + breakpoints[label] + suffix}) {
|
|
${cls};
|
|
}
|
|
`;
|
|
return accumulator;
|
|
},
|
|
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
|
{} as MediaQuery
|
|
);
|
|
|
|
export default mq;
|