import { useIsomorphicLayoutEffect } from "@/hooks/use-isomorphic-layout-effect"
import { useState, useRef } from "react"

function App() {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
  const elementRef = useRef<HTMLDivElement>(null)

  useIsomorphicLayoutEffect(() => {
    if (elementRef.current) {
      const { offsetWidth, offsetHeight } = elementRef.current
      setDimensions({ width: offsetWidth, height: offsetHeight })
    }
  }, [])

  return (
    <div>
      <div
        ref={elementRef}
        style={{ padding: "20px", border: "1px solid #ccc" }}
      >
        This element is being measured
      </div>
      <p>
        Dimensions: {dimensions.width} x {dimensions.height}
      </p>
    </div>
  )
}