37 lines
846 B
TypeScript
37 lines
846 B
TypeScript
"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<HTMLDivElement>()
|
|
|
|
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>
|
|
)
|
|
}
|