Scroll Fade Effect

1import React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5export function ScrollFadeEffect({
6  className,
7  orientation = "vertical",
8  ...props
9}: React.ComponentProps<"div"> & {
10  orientation?: "horizontal" | "vertical";
11}) {
12  return (
13    <div
14      data-orientation={orientation}
15      className={cn(
16        "data-[orientation=horizontal]:overflow-x-auto data-[orientation=vertical]:overflow-y-auto",
17        "data-[orientation=horizontal]:scroll-fade-effect-x data-[orientation=vertical]:scroll-fade-effect-y",
18        className
19      )}
20      {...props}
21    />
22  );
23}