Create layout in nested route | TanStack | Page 1

import { useState } from 'react'

import { TRouterPath } from '@/types'

import { Outlet } from '@mui/icons-material'
import { Link, Tabs } from '@mui/material'
import { Tab as TabMUI, TabProps } from '@mui/material'
import { createFileRoute } from '@tanstack/react-router'

interface ITabProps extends TabProps<'div', { to?: TRouterPath }> {
  to?: TRouterPath
}

export const Tab = ({ to, ...rest }: ITabProps) => {
  return <TabMUI component={Link} to={to} {...rest} />
}

export const Layout = () => {
  const [tab, setTab] = useState<TRouterPath>('/text-editor/')

  return (
    <div className="grid h-full grid-rows-8 gap-4">
      <div className="row-span-1 flex flex-col">
        <div className="h-full rounded-xl shadow-l">
          <Tabs onChange={(e, newValue) => setTab(newValue)} value={tab}>
            <Tab
              component={Link}
              label="Material"
              to="/course/$courseId/_layout/material/"
            />
            <Tab
              LinkComponent={Link}
              label="Exercise"
              to="/course/$courseId/_layout/exercise/"
            />
            <Tab
              LinkComponent={Link}
              label="Settings"
              to="/course/$courseId/_layout/settings/"
            />
          </Tabs>
        </div>
      </div>

      <div className="row-span-7 rounded-xl p-4 shadow-xl">
        <Outlet />
      </div>
    </div>
  )
}

export const Route = createFileRoute('/course/$courseId/_layout')({
  component: Layout,
})
This is my _layout code
#Create layout in nested route
