65 lines
2.0 KiB
JavaScript
65 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import { Tab, Tabs, Box } from "grommet";
|
|
|
|
import {
|
|
TimbreComponent,
|
|
VocoderComponent,
|
|
EffectsComponent,
|
|
} from "./EditorTabComponent";
|
|
|
|
function EditorComponent(props) {
|
|
return (
|
|
<Box
|
|
align="center"
|
|
justify="start"
|
|
fill
|
|
direction="column"
|
|
overflow="hidden">
|
|
<Tabs fill="horizontal">
|
|
<Tab title="Timbre 1">
|
|
<Box
|
|
key="timbre1"
|
|
pad="medium"
|
|
align="center"
|
|
justify="center"
|
|
animation={{ type: "zoomIn", duration: 200 }}>
|
|
<TimbreComponent key={1} />
|
|
</Box>
|
|
</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>
|
|
);
|
|
}
|
|
|
|
export default EditorComponent;
|