laconic.com/src/components/layout/page.tsx

import * as React from 'react'

import { CUSTOM_EASE, DURATION, ScrollSmoother } from '~/lib/gsap'

import { Footer } from '../common/footer'
import { Header } from '../common/header'

type Props = {
  children?: React.ReactNode
  extras?: React.ReactNode
  smoothScroll?: boolean
  footerData?: any
}

const ContentMemo = React.memo(({ children, extras, footerData }: Props) => {
  return (
    <>
      <Header />
      {extras}
      <main>{children}</main>
      <Footer data={footerData} />
    </>
  )
})

export const PageLayout = (props: Props) => {
  if (props.smoothScroll) {
    const contentRef = React.useRef<HTMLDivElement>(null)
    const wrapperRef = React.useRef<HTMLDivElement>(null)
    React.useEffect(() => {
      ScrollSmoother.create({
        content: contentRef.current,
        effects: true,
        ignoreMobileResize: true,
        normalizeScroll: true,
        smooth: DURATION * 2,
        ease: CUSTOM_EASE,
        wrapper: wrapperRef.current
      })
    }, [])
    return (
      <div ref={wrapperRef}>
        <div ref={contentRef}>
          <ContentMemo {...props} />
        </div>
      </div>
    )
  } else {
    return <ContentMemo {...props} />
  }
}