Simplify example selector

lukehorvat · Mar 3, 2024 · d9c2d9a · d9c2d9a
1 parent 5887e27
commit d9c2d9a
Showing 1 changed file with 20 additions and 42 deletions.
diff --git a/demo/index.tsx b/demo/index.tsx
@@ -6,64 +6,42 @@ import { PokemonExample } from './examples/Pokemon';
 import { DebugExample } from './examples/Debug';
 import './index.css';
 
-type ExampleType = 'osx' | 'social' | 'pokemon' | 'debug';
+const examples = {
+  osx: OsxExample,
+  social: SocialExample,
+  pokemon: PokemonExample,
+  debug: DebugExample,
+};
+type ExampleType = keyof typeof examples;
 
 export function App() {
   const [example, setExample] = React.useState<ExampleType>(
     process.env.NODE_ENV === 'production' ? 'osx' : 'debug'
   );
+  const ExampleComponent = examples[example];
 
   return (
     <div className={`app ${example}-example`}>
       <div className="example-selector">
         <div className="header">Examples:</div>
         <ul>
-          <li>
-            <a
-              href="#"
-              className={example === 'osx' ? 'selected' : undefined}
-              onClick={() => setExample('osx')}
-            >
-              OS X
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              className={example === 'social' ? 'selected' : undefined}
-              onClick={() => setExample('social')}
-            >
-              Social
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              className={example === 'pokemon' ? 'selected' : undefined}
-              onClick={() => setExample('pokemon')}
-            >
-              Pokémon
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              className={example === 'debug' ? 'selected' : undefined}
-              onClick={() => setExample('debug')}
-            >
-              Debug
-            </a>
-          </li>
+          {(Object.keys(examples) as ExampleType[]).map((type) => (
+            <li key={type}>
+              <a
+                href="#"
+                className={example === type ? 'selected' : undefined}
+                onClick={() => setExample(type)}
+              >
+                {type}
+              </a>
+            </li>
+          ))}
         </ul>
         <a href="https://github.com/lukehorvat/react-osx-dock" className="fork">
           View on GitHub
         </a>
       </div>
-
-      {example === 'osx' && <OsxExample />}
-      {example === 'social' && <SocialExample />}
-      {example === 'pokemon' && <PokemonExample />}
-      {example === 'debug' && <DebugExample />}
+      <ExampleComponent />
     </div>
   );
 }