2021-08-10 17:19:30 +00:00
|
|
|
import * as React from 'react'
|
2022-02-03 10:57:03 +00:00
|
|
|
import { Routes, Route, Link } from 'react-router-dom'
|
2021-09-08 13:40:04 +00:00
|
|
|
import Basic from './basic'
|
2022-04-29 08:35:20 +00:00
|
|
|
import DarkMode from './dark-mode'
|
2021-11-05 14:13:14 +00:00
|
|
|
import ReadOnly from './readonly'
|
2021-11-11 11:37:57 +00:00
|
|
|
import PropsControl from './props-control'
|
|
|
|
import ApiControl from './api-control'
|
|
|
|
import LoadingFiles from './loading-files'
|
2021-09-09 12:32:08 +00:00
|
|
|
import Embedded from './embedded'
|
2021-10-09 13:57:44 +00:00
|
|
|
import NoSizeEmbedded from './no-size-embedded'
|
2021-09-09 12:32:08 +00:00
|
|
|
import ChangingId from './changing-id'
|
2021-11-11 11:37:57 +00:00
|
|
|
import Persisted from './persisted'
|
|
|
|
import Develop from './develop'
|
|
|
|
import Api from './api'
|
2022-06-01 17:48:48 +00:00
|
|
|
import Scroll from './scroll'
|
2021-11-11 11:37:57 +00:00
|
|
|
import FileSystem from './file-system'
|
|
|
|
import UIOptions from './ui-options'
|
|
|
|
import { Multiplayer } from './multiplayer'
|
2022-01-10 15:13:52 +00:00
|
|
|
import { Multiplayer as MultiplayerWithImages } from './multiplayer-with-images'
|
2021-09-09 13:58:55 +00:00
|
|
|
import './styles.css'
|
2022-05-11 13:25:08 +00:00
|
|
|
import Export from '~export'
|
2021-08-10 17:19:30 +00:00
|
|
|
|
2022-06-01 17:48:48 +00:00
|
|
|
const pages: ({ path: string; component: any; title: string } | '---')[] = [
|
|
|
|
{ path: '/develop', component: Develop, title: 'Develop' },
|
|
|
|
'---',
|
|
|
|
{ path: '/basic', component: Basic, title: 'Basic' },
|
|
|
|
{ path: '/dark-mode', component: DarkMode, title: 'Dark mode' },
|
|
|
|
{ path: '/ui-options', component: UIOptions, title: 'Customizing user interfcace' },
|
|
|
|
{ path: '/persisted', component: Persisted, title: 'Persisting state with an ID' },
|
|
|
|
{ path: '/loading-files', component: LoadingFiles, title: 'Using the file system' },
|
|
|
|
{ path: '/file-system', component: FileSystem, title: 'Loading files' },
|
|
|
|
{ path: '/api', component: Api, title: 'Using the TldrawApp API' },
|
|
|
|
{ path: '/readonly', component: ReadOnly, title: 'Readonly mode' },
|
|
|
|
{ path: '/controlled', component: PropsControl, title: 'Controlled via props' },
|
|
|
|
{ path: '/imperative', component: ApiControl, title: 'Controlled via the TldrawApp API' },
|
|
|
|
{ path: '/changing-id', component: ChangingId, title: 'Changing ID' },
|
|
|
|
{ path: '/embedded', component: Embedded, title: 'Embedded' },
|
|
|
|
{
|
|
|
|
path: '/no-size-embedded',
|
|
|
|
component: NoSizeEmbedded,
|
|
|
|
title: 'Embedded (without explicit size)',
|
|
|
|
},
|
|
|
|
{ path: '/export', component: Export, title: 'Export' },
|
|
|
|
{ path: '/scroll', component: Scroll, title: 'In a scrolling container' },
|
|
|
|
{ path: '/multiplayer', component: Multiplayer, title: 'Multiplayer' },
|
|
|
|
{
|
|
|
|
path: '/multiplayer-with-images',
|
|
|
|
component: MultiplayerWithImages,
|
|
|
|
title: 'Multiplayer (with images)',
|
|
|
|
},
|
|
|
|
]
|
|
|
|
|
2022-05-14 13:15:55 +00:00
|
|
|
export default function App() {
|
2021-09-09 12:32:08 +00:00
|
|
|
return (
|
|
|
|
<main>
|
2022-02-03 10:57:03 +00:00
|
|
|
<Routes>
|
2022-06-01 17:48:48 +00:00
|
|
|
{pages.map((page) =>
|
2022-06-09 14:33:35 +00:00
|
|
|
page === '---' ? null : (
|
|
|
|
<Route key={page.path} path={page.path} element={<page.component />} />
|
|
|
|
)
|
2022-06-01 17:48:48 +00:00
|
|
|
)}
|
2022-02-03 10:57:03 +00:00
|
|
|
|
|
|
|
<Route
|
|
|
|
path="/"
|
|
|
|
element={
|
|
|
|
<div>
|
|
|
|
<img className="hero" src="./card-repo.png" />
|
|
|
|
<ul className="links">
|
2022-06-01 17:48:48 +00:00
|
|
|
{pages.map((page, i) =>
|
|
|
|
page === '---' ? (
|
|
|
|
<hr key={i} />
|
|
|
|
) : (
|
|
|
|
<li key={i}>
|
|
|
|
<Link to={page.path}>{page.title}</Link>
|
|
|
|
</li>
|
|
|
|
)
|
|
|
|
)}
|
2022-02-03 10:57:03 +00:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</Routes>
|
2021-09-09 12:32:08 +00:00
|
|
|
</main>
|
|
|
|
)
|
2021-08-10 17:19:30 +00:00
|
|
|
}
|