moira-web

1
// @flow
2
import * as React from "react";
3
import Header from "./Components/Header/Header";
4
import Footer from "./Components/Footer/Footer";
5
import { Bundle } from "./Components/Bundle/Bundle";
6
import { Desktop } from "./Components/Responsive/Responsive";
7
import loadDesktopApp from "./Desktop.AppRoot";
8
import loadMobileApp from "./Mobile.AppRoot";
9
import cn from "./App.less";
10

11
export default function App(): React.Node {
12
    return (
13
        <div className={cn("layout")}>
14
            <Desktop>{x => x && <Header className={cn("header")} />}</Desktop>
15
            <Desktop>
16
                {x =>
17
                    x ? (
18
                        <Bundle load={loadDesktopApp}>{DesktopApp => <DesktopApp />}</Bundle>
19
                    ) : (
20
                        <Bundle load={loadMobileApp}>{MobileApp => <MobileApp />}</Bundle>
21
                    )
22
                }
23
            </Desktop>
24
            <Desktop>{x => x && <Footer className={cn("footer")} />}</Desktop>
25
        </div>
26
    );
27
}
28