From c1961a828236d031e26d3afbcd0fbd237191fdb7 Mon Sep 17 00:00:00 2001
From: fyzanshaik <fyzan.shaik@gmail.com>
Date: Mon, 5 Aug 2024 23:28:52 +0530
Subject: Scroll bar added

---
 packages/ui/shadcn/accordion.tsx | 78 ++++++++++++++++++++++++++++++++++------
 1 file changed, 68 insertions(+), 10 deletions(-)

(limited to 'packages')

diff --git a/packages/ui/shadcn/accordion.tsx b/packages/ui/shadcn/accordion.tsx
index 1421c4b2..1da5893c 100644
--- a/packages/ui/shadcn/accordion.tsx
+++ b/packages/ui/shadcn/accordion.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import * as React from "react";
+import React, { useRef, useEffect, useState } from "react";
+
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
@@ -40,15 +41,72 @@ AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef<
 	React.ElementRef<typeof AccordionPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-	<AccordionPrimitive.Content
-		ref={ref}
-		className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-		{...props}
-	>
-		<div className={cn("pb-4 pt-0", className)}>{children}</div>
-	</AccordionPrimitive.Content>
-));
+>(({ className, children, ...props }, ref) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [fadeWidth, setFadeWidth] = useState(0);
+
+	useEffect(() => {
+		const handleWheel = (event: WheelEvent) => {
+			if (containerRef.current) {
+				event.preventDefault();
+				if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+					containerRef.current.scrollLeft += event.deltaX;
+				} else {
+					containerRef.current.scrollLeft += event.deltaY;
+				}
+			}
+		};
+
+		const handleScroll = () => {
+			if (containerRef.current) {
+				const { scrollWidth, clientWidth, scrollLeft } = containerRef.current;
+				const calculatedFadeWidth = Math.min(
+					8,
+					scrollWidth - clientWidth - scrollLeft,
+				);
+				setFadeWidth(calculatedFadeWidth);
+			}
+		};
+
+		const currentRef = containerRef.current;
+		currentRef?.addEventListener("wheel", handleWheel);
+		currentRef?.addEventListener("scroll", handleScroll);
+		handleScroll();
+
+		return () => {
+			currentRef?.removeEventListener("wheel", handleWheel);
+			currentRef?.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+
+	const fadeStyle: React.CSSProperties = {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		width: `${fadeWidth}px`,
+		height: "85%",
+		pointerEvents: "none",
+		background: "linear-gradient(to left, rgb(46, 58, 72), transparent)",
+	};
+
+	return (
+		<AccordionPrimitive.Content
+			ref={ref}
+			className="relative overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+			{...props}
+		>
+			<div
+				ref={containerRef}
+				className={cn("pb-4 pt-0", className)}
+				style={{ position: "relative" }}
+			>
+				{children}
+			</div>
+			{/* Fade-out effect with inline styles */}
+			<div style={fadeStyle}></div>
+		</AccordionPrimitive.Content>
+	);
+});
 
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-- 
cgit v1.2.3