section switching added

src/features/timbre/parameters/Levels.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+import { Slider, SelectList } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
+
+export default function Levels(props) {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div className={styles.horizontalContainer}>
+            <Slider />
+        </div>
+    );
+}

src/features/timbre/parameters/Parameters.module.css

@@ -26,7 +26,22 @@
     width: 420px;
     height: 214px;
 }
-.horizontalContainer > .container {
+
+.patchesContainer {
+    font-size: small;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 16pt 8pt 16pt 8pt;
+    margin: 10pt;
+    border: solid 1pt black;
+    width: 680px;
+    height: 214px;
+}
+
+.horizontalContainer > .container,
+.patchesContainer > .container {
     padding: 0 16pt;
     width: 100%;
     margin: 10pt 0;

src/features/timbre/parameters/Patches.js

@@ -6,7 +6,7 @@ import styles from './Parameters.module.css';
 
 const Patch = (props) => {
     return (
-        <div>
+        <div className={styles.container}>
             Source
             <SelectList
                 value={props.patch.source}
@@ -71,7 +71,7 @@ export default function Patches(props) {
     const dispatch = useDispatch();
 
     return (
-        <div className={styles.horizontalContainer}>
+        <div id="patches" className={styles.patchesContainer}>
             <Patch
                 patch={parameters.patch1}
                 onChange={(value) =>

src/features/timbre/parameters/parameterSlice.js

@@ -273,7 +273,30 @@ const parametersSlice = createSlice({
                     modIntensity: 0,
                 },
                 patch2: {
-                    source: 'Amp EG',
+                    source: 'Filter EG',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch3: {
+                    source: 'LFO 1',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch4: {
+                    source: 'LFO 2',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+            },
+            'patches2': {
+                id: 'patches2',
+                patch1: {
+                    source: 'Filter EG',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch2: {
+                    source: 'Filter EG',
                     destination: 'Pitch',
                     modIntensity: 0,
                 },