update UI files

This commit is contained in:
[poww10s]
2020-09-20 13:49:48 -04:00
parent eb09317071
commit d2c491e49d
6 changed files with 1795 additions and 471 deletions
+44 -9
View File
@@ -1,7 +1,11 @@
import React, { useEffect, useState } from "react";
import { Collapsible, Tab, Tabs, Grid, Box } from "grommet";
import React from "react";
import { Tab, Tabs, Box } from "grommet";
import TimbreComponent from "./TimbreComponent";
import {
TimbreComponent,
VocoderComponent,
EffectsComponent,
} from "./EditorTabComponent";
function EditorComponent(props) {
return (
@@ -11,15 +15,46 @@ function EditorComponent(props) {
fill
direction="column"
overflow="hidden">
<Tabs>
<Tabs fill="horizontal">
<Tab title="Timbre 1">
<Box pad="medium" align="center" justify="center">
<TimbreComponent />
<Box
key="timbre1"
pad="medium"
align="center"
justify="center"
animation={{ type: "zoomIn", duration: 200 }}>
<TimbreComponent key={1} />
</Box>
</Tab>
<Tab title="Timbre 2"></Tab>
<Tab title="Vocoder"></Tab>
<Tab title="Effects"></Tab>
<Tab title="Timbre 2">
<Box
key="timbre2"
pad="medium"
align="center"
justify="center"
animation={{ type: "zoomIn", duration: 200 }}>
<TimbreComponent key={2} />
</Box>
</Tab>
<Tab title="Vocoder">
<Box
pad="medium"
align="center"
justify="center"
animation={{ type: "zoomIn", duration: 200 }}>
<VocoderComponent key={3} />
</Box>
</Tab>
<Tab title="Effects">
<Box
pad="medium"
align="center"
justify="center"
animation={{ type: "zoomIn", duration: 200 }}>
<EffectsComponent key={4} />
</Box>
</Tab>
<Tab title="Arpeggio"></Tab>
</Tabs>
</Box>