widgetWrapper.tsx 844 B

123456789101112131415161718192021222324252627282930313233343536
  1. import styled from '@emotion/styled';
  2. import {motion} from 'framer-motion';
  3. import {Widget} from './types';
  4. const WidgetWrapper = styled(motion.div)<{displayType: Widget['displayType']}>`
  5. position: relative;
  6. touch-action: manipulation;
  7. ${p => {
  8. switch (p.displayType) {
  9. case 'big_number':
  10. return `
  11. /* 2 cols */
  12. grid-area: span 1 / span 2;
  13. @media (min-width: ${p.theme.breakpoints.small}) {
  14. /* 4 cols */
  15. grid-area: span 1 / span 1;
  16. }
  17. @media (min-width: ${p.theme.breakpoints.xlarge}) {
  18. /* 6 and 8 cols */
  19. grid-area: span 1 / span 2;
  20. }
  21. `;
  22. default:
  23. return `
  24. /* 2, 4, 6 and 8 cols */
  25. grid-area: span 2 / span 2;
  26. `;
  27. }
  28. }};
  29. `;
  30. export default WidgetWrapper;