web/src/components/page.tsx

import {ComponentProps, ReactNode} from 'react'
import {merge} from '@/lib/utils'

export type PageProps = {
  mode?: 'full' | 'blank'
}

export default function Page(props: ComponentProps<'main'> & PageProps) {
  return (
    <main {...props} className={merge(
      `flex-auto rounded-tl-xl overflow-hidden relative`,
    )}>

      {/* background */}
      <div className={`absolute inset-0 overflow-hidden`}>
        <div className={`absolute w-screen h-screen bg-gray-50`}></div>
        <div className={`absolute w-[2000px] h-[2000px] -left-[1000px] -top-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
        <div className={`absolute w-[2000px] h-[2000px] -right-[1000px] -top-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
        <div className={`absolute w-[2000px] h-[2000px] left-[calc(50%-1000px)] -bottom-[1000px] bg-radial from-blue-50 from-10% to-transparent to-50%`}></div>
      </div>

      {/* content */}
      <div className={merge(
        `relative w-full h-full`,
        `flex flex-col gap-4 p-4 overflow-auto`,
        props.className,
      )}>
        {props.children}
      </div>
    </main>
  )
}