You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/Toolbar.js

43 lines
1.0 KiB
JavaScript

import React from 'react'
import Dropdown from './Dropdown'
import ColorPicker from './Colorpicker'
import Settings from './Settings'
import Button from './Button'
import CopyButton from './CopyButton'
import { THEMES, LANGUAGES } from '../lib/constants'
const Toolbar = (props) => (
<div id="toolbar">
<Dropdown list={THEMES} onChange={props.onThemeChange}/>
<Dropdown list={LANGUAGES} onChange={props.onLanguageChange}/>
<ColorPicker
onChange={props.onBGChange}
bg={props.bg}
/>
<Settings />
<div className="buttons">
<CopyButton />
<Button onClick={props.save} title="Save Image" bg="#C3E98D" />
</div>
<style jsx>{`
#toolbar {
width: 100%;
height: 40px; // TODO fix
margin-bottom: 16px;
display: flex;
position: relative;
z-index: 3;
font-size: 14px;
color: #4F6875;
}
.buttons {
display: flex;
margin-left: auto;
}
`}</style>
</div>
)
export default Toolbar