| 1 | import React, {useContext, useState, Suspense} from 'react'; |
| 2 | |
| 3 | import Chrome from './Chrome'; |
| 4 | import Page from './Page'; |
| 5 | import Page2 from './Page2'; |
| 6 | import Theme from './Theme'; |
| 7 | |
| 8 | function LoadingIndicator() { |
| 9 | let theme = useContext(Theme); |
| 10 | return <div className={theme + '-loading'}>Loading...</div>; |
| 11 | } |
| 12 | |
| 13 | function Content() { |
| 14 | let [CurrentPage, switchPage] = useState(() => Page); |
| 15 | return ( |
| 16 | <div> |
| 17 | <h1>Hello World</h1> |
| 18 | <a className="link" onClick={() => switchPage(() => Page)}> |
| 19 | Page 1 |
| 20 | </a> |
| 21 | {' | '} |
| 22 | <a className="link" onClick={() => switchPage(() => Page2)}> |
| 23 | Page 2 |
| 24 | </a> |
| 25 | <Suspense fallback={<LoadingIndicator />}> |
| 26 | <CurrentPage /> |
| 27 | </Suspense> |
| 28 | </div> |
| 29 | ); |
| 30 | } |
| 31 | |
| 32 | export default function App({assets}) { |
| 33 | return ( |
| 34 | <Chrome title="Hello World" assets={assets}> |
| 35 | <Content /> |
| 36 | </Chrome> |
| 37 | ); |
| 38 | } |