/
index.tsx
111 lines (104 loc) · 3.12 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from "react";
import { createRoot } from "react-dom/client";
import { createRouter } from "@nanostores/router";
import { useStore } from "@nanostores/react";
import { OrbitProvider, defaultTheme } from "@kiwicom/orbit-components";
import LockScrolling from "./pages/lock-scrolling";
import MediaQueries from "./pages/media-queries";
import ModalFooter from "./pages/modal-footer";
import BoxMediaProps from "./pages/box-mediaquery-props";
import StackMediaProps from "./pages/stack-mediaquery-props";
import TextStyles from "./pages/text-styles";
import TextLinkStyles from "./pages/text-link-styles";
import NavigationBar from "./pages/navigation-bar";
import HeadingMediaProps from "./pages/heading-media-query-props";
const router = createRouter({
lockScrolling: "/lock-scrolling",
mediaQueries: "/media-queries",
modalFooter: "/modal-footer",
boxMediaProps: "/box-media-props",
stackMediaProps: "/stack-media-props",
textStyles: "/text-styles",
textLinkStyles: "/text-link-styles",
navigationBar: "/navigation-bar",
headingMediaProps: "/heading-media-props",
});
function PageNotFound() {
return <div>404</div>;
}
function App() {
const page = useStore(router);
if (!page) {
return <PageNotFound />;
}
switch (page.route) {
case "lockScrolling":
return (
<OrbitProvider
useId={React.useId}
theme={{
...defaultTheme,
lockScrollingBarGap: true,
// eslint-disable-next-line no-restricted-globals
lockScrolling: location.search === "?disabled" ? false : undefined,
}}
>
<LockScrolling />
</OrbitProvider>
);
case "mediaQueries":
return (
<OrbitProvider useId={React.useId} theme={defaultTheme}>
<MediaQueries />
</OrbitProvider>
);
case "modalFooter":
return (
<OrbitProvider useId={React.useId} theme={defaultTheme}>
<ModalFooter />
</OrbitProvider>
);
case "boxMediaProps":
return (
<OrbitProvider theme={defaultTheme}>
<BoxMediaProps />
</OrbitProvider>
);
case "stackMediaProps":
return (
<OrbitProvider theme={defaultTheme}>
<StackMediaProps />
</OrbitProvider>
);
case "textStyles":
return (
<OrbitProvider theme={defaultTheme}>
<TextStyles />
</OrbitProvider>
);
case "textLinkStyles":
return (
<OrbitProvider theme={defaultTheme}>
<TextLinkStyles />
</OrbitProvider>
);
case "navigationBar":
return (
<OrbitProvider theme={defaultTheme}>
<NavigationBar />
</OrbitProvider>
);
case "headingMediaProps":
return (
<OrbitProvider theme={defaultTheme}>
<HeadingMediaProps />
</OrbitProvider>
);
default:
return <PageNotFound />;
}
}
const container = document.getElementById("app");
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const root = createRoot(container!); // createRoot(container!) if you use TypeScript
root.render(<App />);