Layouts

Building

Layouts

Layouts work the same as components do, TSXS files to write HTML-like syntax in, to build page templates to shared elements across pages such as headers, footers, navigation, etc. Layouts aren't really special, as they're once again just like your components which can use interfaces and props.

Let's build an example that'll assume there are already components for head, header, and the footer; we'll also use children as the page's slot.

import Head from "@components/Head.tsx"
import Header from "@components/Header.tsx"
import Footer  from "@components/Footer.tsx"

export default ({title, children}) => (
    <html lang="en">
        <Head title={title}/>
        <body>
            <Header/>
            {children}
            <Footer/>
        </body>
    </html>
)

You can also use a layout inside a layout, nesting it. This can be useful if you want to re-use a layout to keep things consistent.

Redpoint

Layouts