Tab Selector for different Data Visualisations

app/globals.css

@@ -83,3 +83,10 @@ main {
   height: calc(100vh - 30px);
   max-height: 100%;
 }
+
+
+/* DEBUG */
+.row {
+  display: flex;
+  flex-direction: row;
+}

components/gui/data-handlers/game-info-handler.tsx

@@ -0,0 +1,17 @@
+import { fetchGameGroups } from "@/components/server/fetchers";
+import { Game, GameGroup } from "@/types/stellaris";
+import { Dispatch, SetStateAction } from "react";
+
+export const GameInfoHandler = async (
+  props: {
+  game: Game,
+  groups: GameGroup[]
+}) => {
+  if (props) {
+    const currentGame = props.game;
+    const currentGroups = props.groups;
+  
+  }
+
+  return <></>
+}

components/gui/game-info-tabs.tsx

@@ -0,0 +1,65 @@
+'use client';
+import { Game, GameGroup } from "@/types/stellaris";
+import { Dropdown } from "@nextui-org/react";
+import { Dispatch, Key, SetStateAction, Suspense, useState } from 'react';
+import { fetchGameGroups } from "@/components/server/fetchers";
+import { GameInfoHandler } from "./data-handlers/game-info-handler";
+
+type SelectionType = "all" | Set<Key>;
+
+export const GameInfoTabs = (
+  props: {
+    game: Game,
+    groups: GameGroup[]
+  }) => {
+
+  const [currentTab, setCurrentTab] = useState(1); 
+
+  let currentTabView;
+  switch(currentTab) {
+    case(1):
+    case(2): {
+      currentTabView = <p>{currentTab}</p>
+      break;
+    }
+    case(3): {
+      currentTabView = <GameInfoLegacyView game={props.game} groups={props.groups}/>
+      break;
+    }
+    default:
+      currentTabView = <p>Oops, something went wrong</p>
+  }
+
+  return (
+    <>
+      <Suspense>
+        <GameInfoHandler game={props.game} groups={props.groups} />
+      </Suspense>
+      <div className="row">
+        <button key={1} onClick={() => setCurrentTab(_currentTab => 1)}>
+          Tab 1
+        </button>
+        <button key={2} onClick={() => setCurrentTab(_currentTab => 2)}>
+          Tab 2
+        </button>
+        <button key={3} onClick={() => setCurrentTab(_currentTab => 3)}>
+          Legacy Visuals
+        </button>
+      </div>
+      {currentTabView}
+    </>
+  )
+}
+
+const GameInfoLegacyView = (
+  props: {
+    game: Game,
+    groups: GameGroup[]
+  }
+) => {
+  return (
+    <div>
+      <p>Legacy View for {props.groups.length > 1 ? "Groups" : "Group"} {props.groups.map(elem => elem.name).join(", ")}</p>
+    </div>
+  )
+}

components/gui/game-view.tsx

@@ -4,6 +4,7 @@ import { GameSelect } from "./game-select";
 import { useState } from 'react';
 import { GameGroupSelect } from "./game-group-select";
 import { SSRProvider } from "react-bootstrap";
+import { GameInfoTabs } from "./game-info-tabs";
 
 export const GameView = (props: { games: Game[] }) => {
   const [currentGame, setCurrentGame] = useState(props.games[0]);
@@ -14,8 +15,11 @@ export const GameView = (props: { games: Game[] }) => {
   return (
     <>
       <SSRProvider>
+        <div className="row">
           <GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
           <GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
+        </div>
+        <GameInfoTabs game={currentGame} groups={currentGameGroups} />
       </SSRProvider>
     </>
   )

public/routes.json

@@ -5,7 +5,7 @@
       "href": "/"
     },
     {
-      "name": "Legacy Info",
+      "name": "Game 15 Info",
       "href": "/graphs"
     },
     {

public/routes_api.json

@@ -1,11 +1,11 @@
 {
   "links": [
     {
-      "name": "Home Alt",
+      "name": "Home New",
       "href": "/"
     },
     {
-      "name": "Legacy Info",
+      "name": "Game 15 Info",
       "href": "/graphs"
     },
     {