Hi there!

So for example, you have a website layout, that includes header, main and footer, and a different layout might have sidebar, main

Depending on the page, the above might need to be used.

Currently I have a website that has normal stuff, header, main footer and if the user wants to auth, I don't want to show the header and fototer, so my idea was this:

and then put this somewhere in a component folder /layouts and use it wherever needed

async function LayoutMain({ children }) {

  return (
    <>
      <Header />
        <main>
          {children}
        </main>
      <Footer />
    </>
  )
}

export default Index;

async function LayoutEmpty({ children }) {

  return (
    <>
        <main>
          {children}
        </main>
    </>
  )
}

export default Index;

Is there a better way to manage this?