BackgroundPattern.tsx 1023 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import React from 'react'
  2. import styled from '@emotion/styled'
  3. import { ReactComponent as BackgroundPatternSVG } from '@/assets/bg-pattern.svg'
  4. import { zIndex, transitions, media } from '@/shared/theme'
  5. const PATTERN_OFFSET = {
  6. SMALL: '-150px',
  7. MEDIUM: '75px',
  8. }
  9. const StyledBackgroundPatternContainer = styled.div`
  10. position: absolute;
  11. top: 0;
  12. width: 100%;
  13. height: 90vh;
  14. overflow: hidden;
  15. z-index: ${zIndex.background};
  16. &.${transitions.names.fade}-exit-active {
  17. z-index: ${zIndex.farBackground};
  18. }
  19. `
  20. const StyledBackgroundPattern = styled(BackgroundPatternSVG)`
  21. display: none;
  22. position: absolute;
  23. transform: scale(1.3);
  24. ${media.small} {
  25. display: block;
  26. top: 73px;
  27. right: ${PATTERN_OFFSET.SMALL};
  28. }
  29. ${media.medium} {
  30. right: ${PATTERN_OFFSET.MEDIUM};
  31. }
  32. `
  33. const BackgroundPattern: React.FC = () => {
  34. return (
  35. <StyledBackgroundPatternContainer>
  36. <StyledBackgroundPattern />
  37. </StyledBackgroundPatternContainer>
  38. )
  39. }
  40. export default BackgroundPattern