Fix css for menu, fix prod api url

web/src/App.tsx

@@ -1,36 +1,48 @@
-import { Component, createSignal } from 'solid-js';
+import { Component, JSXElement, createSignal } from 'solid-js';
 
 import styles from './css/App.module.css';
 import { Country } from './country/Country';
 import { Cities } from './cities/Cities';
 import { Database } from './database/Database';
+import { Station } from './station/Station';
+import { apiHost } from './consts';
 
 console.log("env:", import.meta.env.MODE);
-console.log("api host:", import.meta.env.VITE_API_HOST);
+console.log("api host:", apiHost);
 
-type Section = "cities" | "country" | "database";
+// type Section = "station" | "cities" | "country" | "database";
 
 const App: Component = () => {
-    const [getSection, setSection] = createSignal<Section>("cities");
+    const pages: [string, () => JSXElement][] = [
+        ["station", () => <Station />],
+        ["cities", () => <Cities />],
+        ["latvia", () => <Country />],
+        ["database", () => <Database />],
+    ];
+    const [getPageTitle, setPageTitle] = createSignal("cities");
 
-    const section = () => {
-        switch(getSection()) {
-            case "database": return <Database />;
-            case "country": return <Country />;
-            case "cities": return <Cities />
-            default: 
-                return <Cities />;
-        }
+    const getPageContent = () => {
+        const page = pages.find(p => p[0] === getPageTitle());
+        return page ? page[1]() : <div>Page not found!</div>;
+    }
+
+    const getActiveCSS = (pageTitle: string) => {
+        return getPageTitle() === pageTitle ? styles.active : "";
     }
 
     return (
         <div class={styles.App}>
-            <div class={styles.sections}>
-                <span onClick={() => setSection("cities")}>cities</span> | 
-                <span onClick={() => setSection("country")}>latvia</span> | 
-                <span onClick={() => setSection("database")}>database</span>
-            </div>
-            { section() }
+            <ul class={styles.menu}>
+                { pages.map(([pageTitle]) =>
+                    <li
+                        class={getActiveCSS(pageTitle)}
+                        onClick={() => setPageTitle(pageTitle)}
+                    >
+                        {pageTitle}
+                    </li>
+                )}
+            </ul>
+            { getPageContent() }
         </div>
     );
 };