manifold/web/components/sized-container.tsx

import { ReactNode, useEffect, useRef, useState } from 'react'

export const SizedContainer = (props: {
  fullHeight: number
  mobileHeight: number
  mobileThreshold?: number
  children: (width: number, height: number) => ReactNode
}) => {
  const { children, fullHeight, mobileHeight } = props
  const threshold = props.mobileThreshold ?? 800
  const containerRef = useRef<HTMLDivElement>(null)
  const [width, setWidth] = useState<number>()
  const [height, setHeight] = useState<number>()
  useEffect(() => {
    if (containerRef.current) {
      const handleResize = () => {
        setHeight(window.innerWidth <= threshold ? mobileHeight : fullHeight)
        setWidth(containerRef.current?.clientWidth)
      }
      handleResize()
      const resizeObserver = new ResizeObserver(handleResize)
      resizeObserver.observe(containerRef.current)
      window.addEventListener('resize', handleResize)
      return () => {
        window.removeEventListener('resize', handleResize)
        resizeObserver.disconnect()
      }
    }
  }, [threshold, fullHeight, mobileHeight])
  return (
    <div ref={containerRef}>
      {width != null && height != null ? (
        children(width, height)
      ) : (
        <>
          <div className="sm:hidden" style={{ height: mobileHeight }} />
          <div className="hidden sm:flex" style={{ height: fullHeight }} />
        </>
      )}
    </div>
  )
}