doDont.tsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import styled from '@emotion/styled';
  2. import {IconCheckmark, IconClose} from 'sentry/icons';
  3. import space from 'sentry/styles/space';
  4. type BoxContent = {
  5. text: string;
  6. img?: {
  7. alt: string;
  8. src: string;
  9. };
  10. };
  11. type BoxProps = BoxContent & {
  12. variant: 'do' | 'dont';
  13. };
  14. type DoDontProps = {
  15. doBox: BoxContent;
  16. dontBox: BoxContent;
  17. };
  18. const Box = ({text, img, variant}: BoxProps) => (
  19. <BoxWrap>
  20. <ImgWrap>
  21. <Img src={img?.src} alt={img?.alt} />
  22. </ImgWrap>
  23. <Captions>
  24. <LabelWrap>
  25. {variant === 'do' ? (
  26. <IconCheckmark color="successText" size="xs" />
  27. ) : (
  28. <IconClose color="dangerText" size="xs" />
  29. )}
  30. <Label className={variant === 'do' ? 'green' : 'red'}>
  31. {variant === 'do' ? 'DO' : "DON'T"}
  32. </Label>
  33. </LabelWrap>
  34. <Text>{text}</Text>
  35. </Captions>
  36. </BoxWrap>
  37. );
  38. const DoDont = ({doBox, dontBox}: DoDontProps) => (
  39. <Wrapper>
  40. <Box {...doBox} variant="do" />
  41. <Box {...dontBox} variant="dont" />
  42. </Wrapper>
  43. );
  44. export default DoDont;
  45. const Wrapper = styled('div')`
  46. display: flex;
  47. gap: ${space(2)};
  48. width: 100%;
  49. margin: ${space(2)} auto;
  50. @media only screen and (max-width: ${p => p.theme.breakpoints.small}) {
  51. flex-wrap: wrap;
  52. margin: ${space(4)} auto;
  53. }
  54. `;
  55. const BoxWrap = styled('div')`
  56. display: flex;
  57. flex-direction: column;
  58. width: 100%;
  59. height: 100%;
  60. `;
  61. const ImgWrap = styled('div')`
  62. position: relative;
  63. width: 100%;
  64. padding-top: 50%;
  65. border: solid 1px ${p => p.theme.innerBorder};
  66. border-radius: ${p => p.theme.borderRadius};
  67. overflow: hidden;
  68. `;
  69. const Img = styled('img')`
  70. position: absolute;
  71. top: 0;
  72. left: 0;
  73. width: 100%;
  74. height: 100%;
  75. object-fit: cover;
  76. `;
  77. const Captions = styled('div')`
  78. display: flex;
  79. align-items: flex-start;
  80. width: 100%;
  81. padding: ${space(1)};
  82. @media only screen and (max-width: ${p => p.theme.breakpoints.small}) {
  83. flex-wrap: wrap;
  84. }
  85. `;
  86. const LabelWrap = styled('div')`
  87. display: flex;
  88. align-items: center;
  89. flex-shrink: 0;
  90. width: 6em;
  91. margin-top: ${space(0.5)};
  92. @media only screen and (max-width: ${p => p.theme.breakpoints.small}) {
  93. margin-bottom: ${space(0.5)};
  94. }
  95. `;
  96. const Label = styled('p')`
  97. font-weight: 600;
  98. line-height: 1;
  99. margin-left: ${space(0.5)};
  100. margin-bottom: 0;
  101. &.green {
  102. color: ${p => p.theme.successText};
  103. }
  104. &.red {
  105. color: ${p => p.theme.errorText};
  106. }
  107. `;
  108. const Text = styled('p')`
  109. margin-bottom: 0;
  110. color: ${p => p.theme.subText};
  111. `;