How do I type T3 App with nestable layouts for each route?

I am new to Create T3 App and I want to be able to have 1 T3 app that handles both a public users and (admin users through /admin route only). The public user site should have its own seperate navbar/layout compared to the /admin site. I would rather use the app directory for nested layouts in Next13 however, it is still in beta or experimental and I don't want it to break next auth and anything else, since others seem to be having problems with. it.
I have had a look at this article: https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/ and it seems to be able to do everything I need. I have tried to use the Next Docs for this to type it: https://nextjs.org/docs/basic-features/layouts however due to my shitty TS skills, I cannot type it. Please help. Attached is what I have tried so far:

Persistent Layout Patterns in Next.js

Strategies for persisting UI elements across page transitions when working with Next.js.

Basic Features: Layouts | Next.js

Learn how to share components and state between Next.js pages with Layouts.