wrappers StickyWrapper.tsx

0% Statements 0/4

0% Branches 0/5

0% Functions 0/1

0% Lines 0/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Box } from "@mui/material";
import { palette } from "@palette";
 
const StickyWrapper = ({
  children,
  isSticky,
  hasWhiteBackground = false,
}: {
  children: React.ReactNode;
  isSticky?: boolean;
  hasWhiteBackground?: boolean;
}) => {
  if (!isSticky) return <>{children}</>;
  return (
    <Box
      sx={{
        position: "sticky",
        top: -16, //To offset parent top padding
        zIndex: 3,
        background: hasWhiteBackground
          ? palette.neutral.white
          : palette.primary.background,
        width: "100%",
      }}
    >
      {children}
    </Box>
  );
};
 
export default StickyWrapper;