Website/db/app/pages/index.tsx

import {Box, Theme, Typography} from '@mui/material'
import {makeStyles} from "@mui/styles";
import React from "react";
import { BlitzPage } from 'blitz';
import { Layout } from 'app/core/layouts/Layout';
import { NavigationBreadcrumb } from 'app/core/components/NavigationBreadcrumb';
import { SearchArea } from 'app/core/components/SearchArea';

const useStyles = makeStyles((theme: Theme) => ({
    container: {
        background: theme.palette.background.default,
        display: 'flex',
        flexDirection: 'column',
        flexGrow: 1,
        height: '100vh',
        maxheight: '100vh',
    },
    searchContainer: {
        display: 'flex',
        flexDirection: 'row',
        flexGrow: 1,
        padding: '2vh 2vw 1vh 2vw'
    }
}));

const Search: BlitzPage = () => {
    const classes = useStyles();

    return (
        <>
            <Box className={classes.container}>
                <NavigationBreadcrumb/>
                <Box className={classes.searchContainer}>
                    <SearchArea/>
                </Box>
            </Box>
        </>
    )
}

Search.getLayout = (page) => <Layout>{page}</Layout>
Search.suppressFirstRenderFlicker = true

export default Search;