Add Card Component

.commit to change branch

src/features/editor/parameters/Amp.js

@@ -8,7 +8,7 @@ export default function Amp(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Amp Level
       <Slider
@@ -73,7 +73,7 @@ export const VocoderAmp = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Amp Level
       <Slider

src/features/editor/parameters/EG.js

@@ -8,7 +8,7 @@ export default function EG(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Attack
       <Slider

src/features/editor/parameters/Filter.js

@@ -8,7 +8,7 @@ export default function Filter(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Filter Type
       <SelectList
@@ -92,7 +92,7 @@ export const VocoderFilter = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Cutoff
       <Slider

src/features/editor/parameters/LFO.js

@@ -8,7 +8,7 @@ export default function LFO(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       LFO Waveform
       <SelectList

src/features/editor/parameters/Mixer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider } from '../../helpers/Helpers';
@@ -8,50 +9,55 @@ export default function Mixer(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      Volume 1
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.vol1}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { vol1: value },
-            })
-          )
-        }
-      />
-      Volume 2
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.vol2}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { vol2: value },
-            })
-          )
-        }
-      />
-      Volume 3
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.vol3}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { vol3: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card header={props.name}>
+      <div className='-mt-2'>
+        <h3 className='text-lg font-semibold'>Volume 1</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.vol1}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { vol1: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='-mt-2'>
+        <h3 className='text-lg font-semibold'>Volume 2</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.vol2}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { vol2: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div>
+        <h3 className='text-lg font-semibold'>Volume 3</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.vol3}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { vol3: value },
+              })
+            )
+          }
+        />
+      </div>
+    </Card>
   );
 }

src/features/editor/parameters/Patches.js

@@ -70,7 +70,7 @@ export default function Patches(props) {
   const dispatch = useDispatch();
 
   return (
-    <div id='patches'>
+    <div className={props.className} id='patches'>
       <span>{`${props.name}`}</span>
       <Patch
         patch={parameters.patch1}

src/features/editor/parameters/Pitch.js

@@ -1,130 +1,135 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList } from '../../helpers/Helpers';
+import { Select } from '../../utils/components';
+import { Slider } from '../../helpers/Helpers';
 
 export default function Pitch(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      <div>
-        Voice Assign
-        <SelectList
-          value={parameters.voiceAssign}
-          list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { voiceAssign: value },
-              })
-            )
-          }
-        />
-        Trigger Mode
-        <SelectList
-          value={parameters.triggerMode}
-          list={[{ value: 'Single' }, { value: 'Multiple' }]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { triggerMode: value },
-              })
-            )
-          }
-        />
-        Transpose
-        <Slider
-          parameter={parameters.transpose}
-          min={-24}
-          max={24}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { transpose: value },
-              })
-            )
-          }
-        />
+    <Card className={props.className} header={props.name}>
+      <div className='flex flex-row justify-evenly'>
+        <div className='flex flex-col w-1/2'>
+          <h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
+          <Select
+            className='select w-2/4'
+            value={parameters.voiceAssign}
+            list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { voiceAssign: value },
+                })
+              )
+            }
+          />
+          <h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
+          <Select
+            className='select w-2/4'
+            value={parameters.triggerMode}
+            list={[{ value: 'Single' }, { value: 'Multiple' }]}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { triggerMode: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal mt-1'>Transpose</h3>
+          <Slider
+            parameter={parameters.transpose}
+            min={-24}
+            max={24}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { transpose: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal'>Tune</h3>
+          <Slider
+            parameter={parameters.tune}
+            min={-50}
+            max={50}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { tune: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='w-10'></div>
+        <div className='flex flex-col justify-evenly w-1/2'>
+          <h3 className='font-normal mt-1'>Unison Detune</h3>
+          <Slider
+            parameter={parameters.unisonDetune}
+            min={0}
+            max={99}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { unisonDetune: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal mt-1'>Portamento</h3>
+          <Slider
+            parameter={parameters.portamento}
+            min={0}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { portamento: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal mt-1'>Bend Range</h3>
+          <Slider
+            parameter={parameters.bendRange}
+            min={-12}
+            max={12}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { bendRange: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal mt-1'>Vibrato Intensity</h3>
+          <Slider
+            parameter={parameters.vibratoIntensity}
+            min={-63}
+            max={63}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { vibratoIntensity: value },
+                })
+              )
+            }
+          />
+        </div>
       </div>
-      <div />
-      <div>
-        Tune
-        <Slider
-          parameter={parameters.tune}
-          min={-50}
-          max={50}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { tune: value },
-              })
-            )
-          }
-        />
-        Unisone Detune
-        <Slider
-          parameter={parameters.unisonDetune}
-          min={0}
-          max={99}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { unisonDetune: value },
-              })
-            )
-          }
-        />
-        Portamento
-        <Slider
-          parameter={parameters.portamento}
-          min={0}
-          max={127}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { portamento: value },
-              })
-            )
-          }
-        />
-        Bend Range
-        <Slider
-          parameter={parameters.bendRange}
-          min={-12}
-          max={12}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { bendRange: value },
-              })
-            )
-          }
-        />
-        Vibrato Intensity
-        <Slider
-          parameter={parameters.vibratoIntensity}
-          min={-63}
-          max={63}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { vibratoIntensity: value },
-              })
-            )
-          }
-        />
-      </div>
-    </div>
+    </Card>
   );
 }

src/features/editor/parameters/VCO.js

@@ -1,70 +1,81 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+import { Select } from '../../utils/components';
+import { Slider, Checkbox } from '../../helpers/Helpers';
 
 export default function VCO(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
-
   const dispatch = useDispatch();
+
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      Waveform
-      <SelectList
-        value={parameters.waveform}
-        list={props.waveforms}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { waveform: value },
-            })
-          )
-        }
-      />
-      {`${props.dwgsOrModTypeName}`}
-      <SelectList
-        value={parameters.dwgsOrModType}
-        list={props.dwgsOrModType}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { dwgsOrModType: value },
-            })
-          )
-        }
-      />
-      Waveform Mod
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.waveMod}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { waveMod: value },
-            })
-          )
-        }
-      />
-      LFO Mod
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.lfoMod}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { lfoMod: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className='col-span-2' header={props.name}>
+      <div className='flex items-center justify-between'>
+        <h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
+        <Select
+          className='select w-3/5'
+          value={parameters.waveform}
+          list={props.waveforms}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { waveform: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex items-center justify-between'>
+        <h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
+        <Select
+          className='select w-3/5'
+          value={parameters.dwgsOrModType}
+          list={props.dwgsOrModType}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { dwgsOrModType: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex items-center justify-center'>
+        <h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.waveMod}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { waveMod: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex items-center justify-center'>
+        <h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.lfoMod}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { lfoMod: value },
+              })
+            )
+          }
+        />
+      </div>
+    </Card>
   );
 }
 
@@ -73,7 +84,7 @@ export const AudioIn = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Gate
       <Slider