もっと見るボタン付近だけいい感じに透過グラデーションする

'use client';

import { useCallback, useEffect, useRef, useState } from 'react';

export const useScrollSize = () => {
  const [isOverflowing, setIsOverflowing] = useState(false);
  const [isShowAll, setIsShowAll] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const checkOverflow = () => {
      const isContentOverflowing =
        container.scrollHeight > container.clientHeight;
      setIsOverflowing(isContentOverflowing);
    };

    checkOverflow();
    window.addEventListener('resize', checkOverflow);

    return () => {
      window.removeEventListener('resize', checkOverflow);
    };
  }, []);

  const open = useCallback(() => setIsShowAll(true), []);

  return { isOverflowing, containerRef, open, isShowAll };
};

'use client'

import type { ReactNode } from 'react'

import { useScrollSize } from '@/hooks/use-scroll-size'

type ContainerSampleProps = {
  children: ReactNode
}

export const ContainerSample = ({ children }: ContainerSampleProps) => {
  const { containerRef, isOverflowing, isShowAll, open } = useScrollSize()

  return (
    <div className='container bg-white py-6'>
      <div
        className={`
          relative flex w-full overflow-y-hidden p-8
          ${isShowAll ? 'h-full' : 'max-h-60'}
        `}
        ref={containerRef}
      >
        {children}
        {isOverflowing && !isShowAll && (
          <div className='absolute bottom-0 z-10 h-12 w-11/12 bg-gradient-to-b from-white/40 to-white/90' />
        )}
      </div>
      {isOverflowing && !isShowAll && (
        <div className='py-4 text-center'>
          <button className='hover:underline' onClick={open}>
            もっと見る
          </button>
        </div>
      )}
    </div>
  )
}