x-scrollable

1"use client"
2 
3import { useEffect, useRef, useState, type ReactNode } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface XScrollableProps {
8  children: ReactNode
9  className?: string
10  showScrollbar?: boolean
11  scrollbarTrackClassName?: string
12  scrollbarThumbClassName?: string
13  onScroll?: (
14    scrollLeft: number,
15    scrollWidth: number,
16    clientWidth: number
17  ) => void
18}
19 
20export function XScrollable({
21  children,
22  className,
23  showScrollbar = false,
24  scrollbarTrackClassName,
25  scrollbarThumbClassName,
26  onScroll,
27}: XScrollableProps) {
28  const scrollContainerRef = useRef<HTMLDivElement>(null)
29  const [showLeftShadow, setShowLeftShadow] = useState(false)
30  const [showRightShadow, setShowRightShadow] = useState(false)
31 
32  useEffect(() => {
33    const scrollContainer = scrollContainerRef.current
34    if (!scrollContainer) return
35 
36    const handleScroll = () => {
37      const { scrollLeft, scrollWidth, clientWidth } = scrollContainer
38      setShowLeftShadow(scrollLeft > 0)
39      setShowRightShadow(scrollLeft < scrollWidth - clientWidth)
40      onScroll?.(scrollLeft, scrollWidth, clientWidth)
41    }
42 
43    handleScroll() // Initial check
44    scrollContainer.addEventListener("scroll", handleScroll)
45 
46    return () => {
47      scrollContainer.removeEventListener("scroll", handleScroll)
48    }
49  }, [onScroll])
50 
51  return (
52    <div className="relative">
53      <div
54        ref={scrollContainerRef}
55        className={cn(
56          "overflow-x-auto overflow-y-hidden",
57          showScrollbar
58            ? "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-400"
59            : "scrollbar-hide",
60          className
61        )}
62      >
63        {children}
64      </div>
65      {showLeftShadow && (
66        <div className="from-background pointer-events-none absolute top-0 bottom-0 left-0 w-8 bg-gradient-to-r to-transparent" />
67      )}
68      {showRightShadow && (
69        <div className="from-background pointer-events-none absolute top-0 right-0 bottom-0 w-8 bg-gradient-to-l to-transparent" />
70      )}
71      {showScrollbar && (
72        <div
73          className={cn(
74            "mt-1 h-1 rounded-full bg-gray-200",
75            scrollbarTrackClassName
76          )}
77        >
78          <div
79            className={cn(
80              "h-full rounded-full bg-gray-400",
81              scrollbarThumbClassName
82            )}
83            style={{
84              width: scrollContainerRef.current
85// … truncated