From 4ddd5ae641a0ac09fe98f1559fc145c418c15d7a Mon Sep 17 00:00:00 2001 From: Kenan Yusuf Date: Fri, 16 Feb 2024 16:51:55 +0000 Subject: [PATCH] Improve demo layout (#2813) --- demo/ts/app.tsx | 77 ++++++++++++++++++++++++++++------ demo/ts/index.html | 100 ++++++++++++++++++++++++++------------------- 2 files changed, 121 insertions(+), 56 deletions(-) diff --git a/demo/ts/app.tsx b/demo/ts/app.tsx index 0aa042863..639632049 100644 --- a/demo/ts/app.tsx +++ b/demo/ts/app.tsx @@ -116,6 +116,47 @@ interface AppState { route: string; } +const containerStyle = { + fontFamily: "sans-serif", + display: "flex", + gap: "20px", + height: "100vh", + overflow: "hidden", +}; + +const sidebarStyle = { + flexShrink: "0", + width: "240px", + borderRight: "1px solid #ddd", + overflow: "auto", + padding: "0 20px 20px", +}; + +const mainStyle = { + overflow: "auto", +}; + +const listStyle = { + display: "flex", + flexDirection: "column", + gap: "8px", + listStyle: "none", + padding: "0", + margin: "0", +} as const; + +const linkStyle = { + color: "black", + fontSize: "14px", + textDecoration: "none", +}; + +const activeLinkStyle = { + ...linkStyle, + fontWeight: "bold", + textDecoration: "underline", +}; + class App extends React.Component { constructor(props: any) { super(props); @@ -142,19 +183,29 @@ class App extends React.Component { const Child = this.getDemo(); const routes = keys(MAP).sort(); return ( -
-

Demos (Typescript)

-
    - {routes.map((route, index) => { - const item = MAP[route] || {}; - return ( -
  • - {item.name} -
    • - ); - })} -
- +
+ +
+ +
); } diff --git a/demo/ts/index.html b/demo/ts/index.html index 972fba42d..ca70c47bb 100644 --- a/demo/ts/index.html +++ b/demo/ts/index.html @@ -1,45 +1,59 @@ - + - - - - - Demo (Typescript) - - - - - - - -
-

Loading...

-
- - + + + + + Demo (Typescript) + + + + + + + +
+

Loading...

+
+ +