feat(SW-441): Added table block component

components/TempDesignSystem/ScrollWrapper/index.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useMemo } from "react"
+
+import useScrollShadows from "@/hooks/useScrollShadows"
+
+import { ScrollWrapperProps } from "./scrollWrapper"
+
+import styles from "./scrollWrapper.module.css"
+
+export default function ScrollWrapper({
+  className,
+  children,
+}: ScrollWrapperProps) {
+  const { containerRef, showLeftShadow, showRightShadow } = useScrollShadows()
+
+  const classNames = useMemo(() => {
+    const cls = [styles.scrollWrapper, className]
+    if (showLeftShadow) {
+      cls.push(styles.leftShadow)
+    }
+    if (showRightShadow) {
+      cls.push(styles.rightShadow)
+    }
+    return cls.join(" ")
+  }, [showLeftShadow, showRightShadow, className])
+
+  return (
+    <div className={classNames}>
+      <div className={styles.content} ref={containerRef}>
+        {children}
+      </div>
+    </div>
+  )
+}