persistent layouts

home.tsx

import Layout from '../Layouts'
import { Fragment } from 'react'

const Home: React.FC = () => {
  return (
    <Fragment>
      <h1>Home</h1>
      <p>Hello, welcome to your first Inertia app!</p>
    </Fragment>
  )
}

//      Property 'layout' does not exist on type 'FC<{}>'.ts(2339)
//        |
//        |     
//        |   (parameter) page: any - Parameter 'page' implicitly has an 'any' type.ts(7006)
//        |     |
Home.layout = (page) => <Layout title="Home">{page}</Layout>

export default Home

layout.tsx

import { Link } from '@inertiajs/react'

const Layout: React.FC<{ title?: string; children?: React.ReactNode }> = ({
  children,
}) => {
  return (
    <main>
      <header>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/contact">Contact</Link>
      </header>
      <article>{children}</article>
    </main>
  )
}

export default Layout