add react-tab

package-lock.json

@@ -4317,6 +4317,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -12869,6 +12874,15 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "react-tabs": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.1.1.tgz",
+      "integrity": "sha512-HpySC29NN1BkzBAnOC+ajfzPbTaVZcSWzMSjk56uAhPC/rBGtli8lTysR4CfPAyEE/hfweIzagOIoJ7nu80yng==",
+      "requires": {
+        "clsx": "^1.1.0",
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "react-redux": "^7.2.2",
     "react-scripts": "4.0.0",
     "react-select": "^3.1.0",
+    "react-tabs": "^3.1.1",
     "styled-components": "^5.2.1"
   },
   "scripts": {

src/features/timbre/Timbre.module.css

@@ -15,17 +15,6 @@
     left: 25%;
 }
 
-.buttonContainer > button {
-    background: white;
-    color: slategrey;
-    font-size: 1em;
-    margin: 0.75em 1em;
-    padding: 0.25em 1em;
-    border: 2px solid slategrey;
-    border-radius: 3px;
-    outline: none;
-}
-
 .buttonContainer > button:hover {
     background: white;
     color: slateblue;
@@ -36,3 +25,54 @@
     color: white;
     border: 2px solid slateblue;
 }
+
+.tabList {
+    position: fixed;
+    display: inline-flex;
+    flex-direction: row;
+    list-style-type: none;
+    top: 0;
+    left: 30%;
+}
+
+.tab {
+    background: white;
+    color: slategrey;
+    font-size: 1em;
+    margin: 0.75em 1em;
+    padding: 0.25em 1em;
+    border: 2px solid slategrey;
+    border-radius: 3px;
+    outline: none;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none;
+}
+
+.tab:hover {
+    background: white;
+    color: slateblue;
+    border: 2px solid slateblue;
+}
+.selected,
+.selected:hover {
+    background: slateblue;
+    color: white;
+    border: 2px solid slateblue;
+    transition: 0.2s ease-in-out;
+}
+@keyframes slideeffect {
+    0% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+.tabPanel {
+    animation: slideeffect 0.6s ease-in-out;
+    opacity: 1;
+}

src/features/timbre/timbreSwitcher.js

@@ -1,41 +1,32 @@
 import React from 'react';
 import Timbre from './Timbre';
 import Vocoder from './Vocoder';
-import { useDispatch, useSelector } from 'react-redux';
-import { timbreCurrentUpdate } from './timbreSlice';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import styles from './Timbre.module.css';
 
 export default function TimbreSwitcher(props) {
-    const currentTimbre = useSelector((state) => state.timbres.currentTimbre);
-    const dispatch = useDispatch();
-
-    function handleClick(e, value) {
-        e.preventDefault();
-        dispatch(timbreCurrentUpdate(value));
-    }
-
     return (
         <div>
-            <div className={styles.buttonContainer}>
-                <button autoFocus onClick={(e) => handleClick(e, 'timbre1')}>
-                    set to timbre 1
-                </button>
-                <button onClick={(e) => handleClick(e, 'timbre2')}>
-                    set to timbre 2
-                </button>
-                <button onClick={(e) => handleClick(e, 'vocoder')}>
-                    set to vocoder
-                </button>
-            </div>
-            <div>
-                {currentTimbre === 'timbre1' ? (
+            <Tabs
+                defaultIndex="0"
+                selectedTabClassName={styles.selected}
+                selectedTabPanelClassName={styles.tabPanel}>
+                <TabList className={styles.tabList}>
+                    <Tab className={styles.tab}>Timbre 1</Tab>
+                    <Tab className={styles.tab}>Timbre 2</Tab>
+                    <Tab className={styles.tab}>Vocoder</Tab>
+                </TabList>
+
+                <TabPanel>
                     <Timbre id="timbre1" />
-                ) : currentTimbre === 'timbre2' ? (
+                </TabPanel>
+                <TabPanel>
                     <Timbre id="timbre2" />
-                ) : (
+                </TabPanel>
+                <TabPanel>
                     <Vocoder id="vocoder" />
-                )}
-            </div>
+                </TabPanel>
+            </Tabs>
         </div>
     );
 }