Add Card Component

.commit to change branch

src/App.js

@@ -4,9 +4,9 @@ import Editor from './features/editor';
 
 function App() {
   return (
-    <div className='grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
+    <div className='bg-gray-100 grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
-      <Menu className='col-span-1' />
+      <Menu />
-      <Editor className='col-span-5' />
+      <Editor />
     </div>
   );
 }

src/features/editor/Timbre.js

@@ -13,8 +13,9 @@ import { selectById } from './timbreSlice.js';
 export default function Timbre(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div>
+    <div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 m-6'>
       <VCO
+        className='col-span-2'
         name='VCO 1'
         id={ids.vco1}
         waveforms={[
@@ -96,6 +97,7 @@ export default function Timbre(props) {
         ]}
       />
       <VCO
+        className='col-span-2'
         name='VCO 2'
         id={ids.vco2}
         waveforms={[
@@ -111,14 +113,14 @@ export default function Timbre(props) {
           { value: 'Ring Sync' },
         ]}
       />
-      <Mixer name='Mixer' id={ids.mixer} />
+      <Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
-      <Pitch name='Pitch' id={ids.pitch} />
+      <Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
-      <Filter name='Filter' id={ids.filter} />
+      <Filter className='col-span-2' name='Filter' id={ids.filter} />
-      <Amp name='Amp' id={ids.amp} />
+      <Amp className='col-span-2' name='Amp' id={ids.amp} />
-      <EG name='EG 1' id={ids.eg1} />
+      <EG className='col-span-2' name='EG 1' id={ids.eg1} />
-      <EG name='EG 2' id={ids.eg2} />
+      <EG className='col-span-2' name='EG 2' id={ids.eg2} />
-      <div />
       <LFO
+        className='col-span-2'
         name='LFO 1'
         id={ids.lfo1}
         waveforms={[
@@ -129,6 +131,7 @@ export default function Timbre(props) {
         ]}
       />
       <LFO
+        className='col-span-2'
         name='LFO 2'
         id={ids.lfo2}
         waveforms={[
@@ -138,7 +141,7 @@ export default function Timbre(props) {
           { value: 'Sample & Hold' },
         ]}
       />
-      <Patches name='Patches' id={ids.patches} />
+      <Patches className='col-span-2' name='Patches' id={ids.patches} />
     </div>
   );
 }

src/features/editor/card.js

@@ -0,0 +1,16 @@
+export default function Card(props = { className: 'col-span-2' }) {
+  return (
+    <div
+      className={
+        props.className +
+        ' flex flex-col justify-start border border-gray-200 rounded-md shadow-md bg-white'
+      }>
+      <header className='flex items-start justify-between py-3 px-4 border-b border-solid border-gray-200'>
+        <h3 className='text-xl font-semibold text-gray-900'>{props.header}</h3>
+      </header>
+      <section className='flex-grow flex flex-col justify-evenly px-6'>
+        {props.children}
+      </section>
+    </div>
+  );
+}

src/features/editor/index.js

@@ -4,10 +4,10 @@ import Effects from './Effects';
 import Arpeggio from './Arpeggio';
 import { useSelector } from 'react-redux';
 
-const Editor = () => {
+export default function Editor() {
   const activeTab = useSelector((state) => state.parameters.activeTab);
   return (
-    <div>
+    <div className='col-span-5'>
       {activeTab === 'Timbre1' ? <Timbre id='timbre1' /> : null}
       {activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
       {activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
@@ -15,6 +15,4 @@ const Editor = () => {
       {activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
     </div>
   );
-};
+}
-
-export default Editor;

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>
+    <Card header={props.name}>
-      <span>{`${props.name}`}</span>
+      <div className='-mt-2'>
-      Volume 1
+        <h3 className='text-lg font-semibold'>Volume 1</h3>
-      <Slider
+        <Slider
-        min={0}
+          min={0}
-        max={127}
+          max={127}
-        parameter={parameters.vol1}
+          parameter={parameters.vol1}
-        onChange={(value) =>
+          onChange={(value) =>
-          dispatch(
+            dispatch(
-            parameterUpdated({
+              parameterUpdated({
-              id: props.id,
+                id: props.id,
-              changes: { vol1: value },
+                changes: { vol1: value },
-            })
+              })
-          )
+            )
-        }
+          }
-      />
+        />
-      Volume 2
+      </div>
-      <Slider
+      <div className='-mt-2'>
-        min={0}
+        <h3 className='text-lg font-semibold'>Volume 2</h3>
-        max={127}
+        <Slider
-        parameter={parameters.vol2}
+          min={0}
-        onChange={(value) =>
+          max={127}
-          dispatch(
+          parameter={parameters.vol2}
-            parameterUpdated({
+          onChange={(value) =>
-              id: props.id,
+            dispatch(
-              changes: { vol2: value },
+              parameterUpdated({
-            })
+                id: props.id,
-          )
+                changes: { vol2: value },
-        }
+              })
-      />
+            )
-      Volume 3
+          }
-      <Slider
+        />
-        min={0}
+      </div>
-        max={127}
+      <div>
-        parameter={parameters.vol3}
+        <h3 className='text-lg font-semibold'>Volume 3</h3>
-        onChange={(value) =>
+        <Slider
-          dispatch(
+          min={0}
-            parameterUpdated({
+          max={127}
-              id: props.id,
+          parameter={parameters.vol3}
-              changes: { vol3: value },
+          onChange={(value) =>
-            })
+            dispatch(
-          )
+              parameterUpdated({
-        }
+                id: props.id,
-      />
+                changes: { vol3: value },
-    </div>
+              })
+            )
+          }
+        />
+      </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>
+    <Card className={props.className} header={props.name}>
-      <span>{`${props.name}`}</span>
+      <div className='flex flex-row justify-evenly'>
-      <div>
+        <div className='flex flex-col w-1/2'>
-        Voice Assign
+          <h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
-        <SelectList
+          <Select
-          value={parameters.voiceAssign}
+            className='select w-2/4'
-          list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
+            value={parameters.voiceAssign}
-          onChange={(value) =>
+            list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
-            dispatch(
+            onChange={(value) =>
-              parameterUpdated({
+              dispatch(
-                id: props.id,
+                parameterUpdated({
-                changes: { voiceAssign: value },
+                  id: props.id,
-              })
+                  changes: { voiceAssign: value },
-            )
+                })
-          }
+              )
-        />
+            }
-        Trigger Mode
+          />
-        <SelectList
+          <h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
-          value={parameters.triggerMode}
+          <Select
-          list={[{ value: 'Single' }, { value: 'Multiple' }]}
+            className='select w-2/4'
-          onChange={(value) =>
+            value={parameters.triggerMode}
-            dispatch(
+            list={[{ value: 'Single' }, { value: 'Multiple' }]}
-              parameterUpdated({
+            onChange={(value) =>
-                id: props.id,
+              dispatch(
-                changes: { triggerMode: value },
+                parameterUpdated({
-              })
+                  id: props.id,
-            )
+                  changes: { triggerMode: value },
-          }
+                })
-        />
+              )
-        Transpose
+            }
-        <Slider
+          />
-          parameter={parameters.transpose}
+          <h3 className='font-normal mt-1'>Transpose</h3>
-          min={-24}
+          <Slider
-          max={24}
+            parameter={parameters.transpose}
-          onChange={(value) =>
+            min={-24}
-            dispatch(
+            max={24}
-              parameterUpdated({
+            onChange={(value) =>
-                id: props.id,
+              dispatch(
-                changes: { transpose: value },
+                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 />
+    </Card>
-      <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>
   );
 }

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>
+    <Card className='col-span-2' header={props.name}>
-      <span>{`${props.name}`}</span>
+      <div className='flex items-center justify-between'>
-      Waveform
+        <h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
-      <SelectList
+        <Select
-        value={parameters.waveform}
+          className='select w-3/5'
-        list={props.waveforms}
+          value={parameters.waveform}
-        onChange={(value) =>
+          list={props.waveforms}
-          dispatch(
+          onChange={(value) =>
-            parameterUpdated({
+            dispatch(
-              id: props.id,
+              parameterUpdated({
-              changes: { waveform: value },
+                id: props.id,
-            })
+                changes: { waveform: value },
-          )
+              })
-        }
+            )
-      />
+          }
-      {`${props.dwgsOrModTypeName}`}
+        />
-      <SelectList
+      </div>
-        value={parameters.dwgsOrModType}
+      <div className='flex items-center justify-between'>
-        list={props.dwgsOrModType}
+        <h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
-        onChange={(value) =>
+        <Select
-          dispatch(
+          className='select w-3/5'
-            parameterUpdated({
+          value={parameters.dwgsOrModType}
-              id: props.id,
+          list={props.dwgsOrModType}
-              changes: { dwgsOrModType: value },
+          onChange={(value) =>
-            })
+            dispatch(
-          )
+              parameterUpdated({
-        }
+                id: props.id,
-      />
+                changes: { dwgsOrModType: value },
-      Waveform Mod
+              })
-      <Slider
+            )
-        min={0}
+          }
-        max={127}
+        />
-        parameter={parameters.waveMod}
+      </div>
-        onChange={(value) =>
+      <div className='flex items-center justify-center'>
-          dispatch(
+        <h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
-            parameterUpdated({
+        <Slider
-              id: props.id,
+          min={0}
-              changes: { waveMod: value },
+          max={127}
-            })
+          parameter={parameters.waveMod}
-          )
+          onChange={(value) =>
-        }
+            dispatch(
-      />
+              parameterUpdated({
-      LFO Mod
+                id: props.id,
-      <Slider
+                changes: { waveMod: value },
-        min={0}
+              })
-        max={127}
+            )
-        parameter={parameters.lfoMod}
+          }
-        onChange={(value) =>
+        />
-          dispatch(
+      </div>
-            parameterUpdated({
+      <div className='flex items-center justify-center'>
-              id: props.id,
+        <h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
-              changes: { lfoMod: value },
+        <Slider
-            })
+          min={0}
-          )
+          max={127}
-        }
+          parameter={parameters.lfoMod}
-      />
+          onChange={(value) =>
-    </div>
+            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

src/features/menu/index.js

@@ -30,7 +30,7 @@ export default function Menu() {
   }, [file, dispatch]);
 
   return (
-    <div className='flex flex-col justify-around border-solid border-r border-black px-4'>
+    <div className='col-span-1 flex flex-col justify-around border-solid border-r border-black bg-white px-4'>
       <div className='menu-patch-container'>
         <div className='patch-name'>
           <input
@@ -83,7 +83,7 @@ export default function Menu() {
         </div>
         <div className='patch-settings'>
           <Select
-            className='w-full bg-gray-100 rounded-md border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
+            className='w-full select'
             value={state.patch.mode}
             list={[
               { value: 'Single' },

src/index.css

@@ -25,4 +25,7 @@ code {
   .btn:disabled {
     @apply opacity-60 hover:bg-gray-100 cursor-default;
   }
+  .select {
+    @apply block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
+  }
 }