wip Mods

ui/App/components/Tabs/Tab.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Tab = ({children}) => {
+    return (
+        <>
+            {children}
+        </>
+    )
+}
+
+export default Tab;

ui/App/components/Tabs/TabControl.jsx

@@ -0,0 +1,29 @@
+import React, {useState} from "react";
+import TabTitle from "./TabTitle";
+
+const TabControl = ({children}) => {
+    const [selectedTab, setSelectedTab] = useState(0)
+
+    return (
+        <div className="mb-6">
+            <div className="px-4 pt-3">
+                {children.map((item, index) => (
+                    <TabTitle
+                        key={index}
+                        title={item.props.title}
+                        index={index}
+                        isActive={index === selectedTab}
+                        setSelectedTab={setSelectedTab}
+                    />
+                ))}
+            </div>
+            <div className="z-10 relative accentuated bg-gray-dark p-4">
+                <div className="text-white rounded-sm bg-gray-medium shadow-inner px-6 pt-4 pb-6">
+                    {children[selectedTab]}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default TabControl

ui/App/components/Tabs/TabTitle.jsx

@@ -0,0 +1,14 @@
+import React, {useCallback} from "react";
+
+const TabTitle = ({ title, setSelectedTab, index, isActive }) => {
+
+    const onClick = useCallback(() => {
+        setSelectedTab(index)
+    }, [setSelectedTab, index])
+
+    return (
+            <span className={"accentuated-t accentuated-x cursor-pointer px-3 rounded-t py-1 font-bold relative " + (isActive ? "z-20 text-dirty-white bg-gray-dark" : "z-0 text-black bg-gray-light")} onClick={onClick}>{title}</span>
+    )
+}
+
+export default TabTitle;

ui/App/views/Mods/Mods.jsx

@@ -4,6 +4,8 @@ import modsResource from "../../../api/resources/mods";
 import Button from "../../components/Button";
 import Mod from "./components/Mod";
 import server from "../../../api/resources/server";
+import TabControl from "../../components/Tabs/TabControl";
+import Tab from "../../components/Tabs/Tab";
 
 const Mods = () => {
 
@@ -23,7 +25,7 @@ const Mods = () => {
     const deleteAllMods = () => {
         modsResource.deleteAll()
             .then(res => {
-                if(res.success) {
+                if (res.success) {
                     fetchInstalledMods();
                 }
             })
@@ -40,7 +42,15 @@ const Mods = () => {
     }, []);
 
     return (
-        <>
+        <div>
+            <TabControl>
+                <Tab title="Install Mod">
+                    <div>Install Mod</div>
+                </Tab>
+                <Tab title="Upload Mod">a Mod</Tab>
+                <Tab title="Load Mod from Save">b Mod</Tab>
+            </TabControl>
+
             <Panel
                 title="Mods"
                 className="mb-6"
@@ -58,8 +68,8 @@ const Mods = () => {
                         </thead>
                         <tbody>
                         {factorioVersion !== null && installedMods.map(mod => <Mod mod={mod} key={mod.name}
-                                                                          refreshInstalledMods={fetchInstalledMods}
-                                                                          factorioVersion={factorioVersion}/>)}
+                                                                                   refreshInstalledMods={fetchInstalledMods}
+                                                                                   factorioVersion={factorioVersion}/>)}
                         </tbody>
                     </table>
 
@@ -68,7 +78,15 @@ const Mods = () => {
                     <Button size="sm" type="danger" onClick={deleteAllMods}>Delete all Mods</Button>
                 }
             />
-        </>
+
+            <Panel
+                title="Mod packs"
+                className="mb-6"
+                content={
+                   "Test"
+                }
+            />
+        </div>
     )
 }