All files / app/components FadingScrollTrack.tsx

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
33
34
7x
 
7x
 
7x
 
61x
 
 
 
 
 
 
 
12x
 
 
 
 
 
 
12x
 
 
 
 
 
 
 
 
 
 
18x
 
import { Box, styled } from "@mui/material";
 
const FADE = "40px";
 
const FadingScrollTrack = styled(Box, {
  shouldForwardProp: (prop) =>
    prop !== "$canScrollLeft" && prop !== "$canScrollRight" && prop !== "$gap" && prop !== "$snapType",
})<{
  $canScrollLeft?: boolean;
  $canScrollRight?: boolean;
  $gap?: number;
  $snapType?: "x mandatory" | "x proximity";
}>(({ $canScrollLeft, $canScrollRight, $gap = 16, $snapType = "x mandatory" }) => {
  const mask =
    $canScrollLeft && $canScrollRight
      ? `linear-gradient(to right, transparent, black ${FADE}, black calc(100% - ${FADE}), transparent)`
      : $canScrollLeft
        ? `linear-gradient(to right, transparent, black ${FADE})`
        : $canScrollRight
          ? `linear-gradient(to left, transparent, black ${FADE})`
          : undefined;
  return {
    display: "flex",
    gap: `${$gap}px`,
    overflowX: "auto",
    scrollSnapType: $snapType,
    scrollbarWidth: "none",
    "&::-webkit-scrollbar": { display: "none" },
    ...(mask ? { maskImage: mask, WebkitMaskImage: mask } : {}),
  };
});
 
export default FadingScrollTrack;