diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js index 016521f7f1e18519c8ba7e23ec361c880e85891e..dac3414348846efed6dfe5010f4d79fc5d323b8a 100644 --- a/editors/demo/src/Editors.js +++ b/editors/demo/src/Editors.js @@ -1,7 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; +import styled from 'styled-components'; import { createGlobalStyle } from 'styled-components'; import Editoria from './Editoria/Editoria'; +import HHMI from './HHMI/HHMI'; + const GlobalStyle = createGlobalStyle` body { margin: 0; @@ -15,11 +18,54 @@ const GlobalStyle = createGlobalStyle` } `; +const ChooseProject = styled.div` + display: flex; + flex-direction: row; + align-items: center; + height: 50px; + + span { + margin-right: 20px; + } +`; + +const Projects = styled.div` + margin-left: 10px; +`; + +const ProjectButton = styled.button` + cursor: pointer; + margin-right: 20px; +`; + const Editors = () => { + const [project, setProject] = useState('editoria'); + + const displayProject = () => { + switch (project) { + case 'hhmi': + return <HHMI />; + case 'ncbi': + break; + default: + return <Editoria />; + } + }; + return ( <> <GlobalStyle /> - <Editoria /> + <ChooseProject> + <Projects> + <span>Select Project:</span> + <ProjectButton onClick={() => setProject('editoria')}> + Editoria + </ProjectButton> + <ProjectButton onClick={() => setProject('hhmi')}>HHMI</ProjectButton> + {/* <ProjectButton onClick={() => setProject('ncbi')}>NCBI</ProjectButton> */} + </Projects> + </ChooseProject> + {displayProject()} </> ); };