148 lines
3.9 KiB
React
148 lines
3.9 KiB
React
import React from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { selectById, parameterUpdated } from './parameterSlice.jsx';
|
|
import Card from '../card';
|
|
import { Knob } from '../../utils/components';
|
|
|
|
export default function Pans(props) {
|
|
const parameters = useSelector((state) => selectById(state, props.id));
|
|
const dispatch = useDispatch();
|
|
|
|
return (
|
|
<Card className={props.className} header={props.name}>
|
|
<div className='flex flex-row'>
|
|
<div className='flex flex-col items-center w-1/4'>
|
|
<h3>Pan 1</h3>
|
|
<Knob
|
|
dual={true}
|
|
max={63}
|
|
value={parameters.pan1}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { pan1: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col items-center w-1/4'>
|
|
<h3>Pan 2</h3>
|
|
<Knob
|
|
dual={true}
|
|
max={63}
|
|
value={parameters.pan2}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { pan2: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col items-center w-1/4'>
|
|
<h3>Pan 3</h3>
|
|
<Knob
|
|
dual={true}
|
|
max={63}
|
|
value={parameters.pan3}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { pan3: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col items-center w-1/4'>
|
|
<h3>Pan 4</h3>
|
|
<Knob
|
|
dual={true}
|
|
max={63}
|
|
value={parameters.pan4}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { pan4: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-row'>
|
|
<div className='flex flex-col items-center w-1/4'>
|
|
<h3>Pan 5</h3>
|
|
<Knob
|
|
dual={true}
|
|
max={63}
|
|
value={parameters.pan5}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { pan5: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col items-center w-1/4'>
|
|
<h3>Pan 6</h3>
|
|
<Knob
|
|
dual={true}
|
|
max={63}
|
|
value={parameters.pan6}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { pan6: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col items-center w-1/4'>
|
|
<h3>Pan 7</h3>
|
|
<Knob
|
|
dual={true}
|
|
max={63}
|
|
value={parameters.pan7}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { pan7: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col items-center w-1/4'>
|
|
<h3>Pan 8</h3>
|
|
<Knob
|
|
dual={true}
|
|
max={63}
|
|
value={parameters.pan8}
|
|
onChange={(value) =>
|
|
dispatch(
|
|
parameterUpdated({
|
|
id: props.id,
|
|
changes: { pan8: value },
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|