Scroll Fade Effect

1import type { ComponentProps } from "react"
2 
3import { cn } from "@/lib/utils"
4 
5export type ScrollFadeEffectProps = ComponentProps<"div"> & {
6  /**
7   * Scroll direction to apply the fade effect.
8   * @defaultValue "vertical"
9   * */
10  orientation?: "horizontal" | "vertical"
11}
12 
13export function ScrollFadeEffect({
14  className,
15  orientation = "vertical",
16  ...props
17}: ScrollFadeEffectProps) {
18  return (
19    <div
20      data-orientation={orientation}
21      className={cn(
22        "data-[orientation=horizontal]:overflow-x-auto data-vertical:overflow-y-auto",
23        "data-[orientation=horizontal]:scroll-fade-effect-x data-vertical:scroll-fade-effect-y",
24        className
25      )}
26      {...props}
27    />
28  )
29}