Big update

src/Components/RulesetList.tsx

@@ -0,0 +1,39 @@
+import React, {useContext, useState} from "react";
+import {Icon, List, Menu} from "semantic-ui-react";
+import UserContext from "../Contexts/UserContext";
+
+interface RulesetListProps {
+    rulesetNames: string[];
+    onItemChange: (newItemId: string | "addNewRuleset") => any;
+    selectedItemIndex: number;
+    creatingRuleset: boolean;
+}
+
+const RulesetList: React.FunctionComponent<RulesetListProps> = (props) => {
+    const {rulesetNames, onItemChange, selectedItemIndex, creatingRuleset} = props;
+    const {strings: Locale} = useContext(UserContext);
+
+    const selectedItem = creatingRuleset ? "" : rulesetNames[selectedItemIndex];
+
+    return (
+        <Menu pointing={true} vertical={true}>
+            {rulesetNames.map(name => (
+                <Menu.Item
+                    key={name}
+                    name={name}
+                    active={selectedItem === name}
+                    onClick={() => onItemChange(name)}
+                />
+            ))}
+            <Menu.Item
+                active={creatingRuleset}
+                onClick={() => onItemChange("addNewRuleset")}
+            >
+                {Locale.rulesetsPage.newRuleset}
+                <Icon name={"add"} />
+            </Menu.Item>
+        </Menu>
+    );
+};
+
+export default RulesetList;