/ src / components / lists / ListHeaderWrapper.tsx
ListHeaderWrapper.tsx
 1  import { Box, BoxProps } from '@mui/material';
 2  import { ReactNode } from 'react';
 3  
 4  interface ListHeaderWrapperProps extends BoxProps {
 5    px?: 4 | 6;
 6    children: ReactNode;
 7  }
 8  
 9  export const ListHeaderWrapper = ({ px = 4, children, ...rest }: ListHeaderWrapperProps) => {
10    return (
11      <Box
12        {...rest}
13        sx={{
14          display: 'flex',
15          alignItems: 'flex-end',
16          px,
17          pt: 4,
18          pb: 1,
19          position: 'sticky',
20          top: 0,
21          zIndex: 100,
22          bgcolor: 'background.paper',
23          borderBottom: '1px solid',
24          borderColor: 'divider',
25          ...rest.sx,
26        }}
27      >
28        {children}
29      </Box>
30    );
31  };