From 095cc32b2c0b83b9bc8b48ee3a301f3487a44ece Mon Sep 17 00:00:00 2001 From: "[poww10s]" <[theironminer@gmail.com]> Date: Mon, 14 Sep 2020 01:55:31 -0400 Subject: [PATCH] update timbre-ui --- src/components/TimbreComponent.js | 344 ++++++++++++++++++++++++++++++ 1 file changed, 344 insertions(+) create mode 100644 src/components/TimbreComponent.js diff --git a/src/components/TimbreComponent.js b/src/components/TimbreComponent.js new file mode 100644 index 0000000..6297386 --- /dev/null +++ b/src/components/TimbreComponent.js @@ -0,0 +1,344 @@ +import React, { useReducer } from "react"; +import { Text, Stack, Heading, RangeInput, Select, Box, Grid } from "grommet"; + +const reducer = (state, action) => action; + +const LabeledSlider = (props) => ( + + + {props.label} + + props.onChange(e.target.value)} + /> + +); + +function VCO1(props) { + const [waveform, wfDispatch] = useReducer(reducer, 0); + const [mod, modDispatch] = useReducer(reducer, 0); + return ( + + + + + + + Waveform + { + wfDispatch(e.target.value); + }} + /> + + + + LFO Mod + + { + modDispatch(e.target.value); + }} + /> + + + + + + VCO 1 + + + ); +} + +function VCO2(props) { + const [waveform, wfDispatch] = useReducer(reducer, 0); + const [mod, modDispatch] = useReducer(reducer, 0); + return ( + + + + + + + + + + + + VCO 2 + + + ); +} + +function Mixer(props) { + const [vol1, setVol1] = useReducer(reducer, 127); + const [vol2, setVol2] = useReducer(reducer, 0); + const [vol3, setVol3] = useReducer(reducer, 0); + + return ( + + + + + + + + + + Mixer + + + ); +} + +function Pitch(props) { + return ( + + + + + + + + Timbre/Pitch + + + ); +} + +const TimbreComponent = (props) => ( + + + + + + + + + + + + + + +); + +export default TimbreComponent;