cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Card Component

Browse Source 
.commit to change branch
This commit is contained in:
Aoife
2021-04-06 13:44:00 -04:00
parent 5ccb28dc64
commit 0ad9f90fdc
14 changed files with 291 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/editor/parameters/Mixer.js
+51 -45
View File
@@ -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>
);
}