feat(SW-441): Added table block component

hooks/useScrollShadows.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from "react"
+
+const useScrollShadows = () => {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const [showLeftShadow, setShowLeftShadow] = useState<boolean>(false)
+  const [showRightShadow, setShowRightShadow] = useState<boolean>(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const container = containerRef.current
+      if (!container) return
+
+      setShowLeftShadow(container.scrollLeft > 0)
+      setShowRightShadow(
+        container.scrollLeft < container.scrollWidth - container.clientWidth
+      )
+    }
+
+    const container = containerRef.current
+    if (container) {
+      container.addEventListener("scroll", handleScroll)
+    }
+
+    handleScroll()
+
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll)
+      }
+    }
+  }, [])
+
+  return { containerRef, showLeftShadow, showRightShadow }
+}
+
+export default useScrollShadows