mirror of https://github.com/sgoudham/carbon.git
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.
129 lines
2.1 KiB
JavaScript
129 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
import Dropdown from './dropdown'
|
|
import ColorPicker from './colorpicker'
|
|
import Settings from './settings'
|
|
|
|
const themes = [
|
|
{
|
|
name: 'dracula'
|
|
},
|
|
{
|
|
name: 'solarized'
|
|
}
|
|
]
|
|
|
|
const langauges = [
|
|
'Auto Detect',
|
|
'Plain Text',
|
|
'AppleScript',
|
|
'BoxNote',
|
|
'C',
|
|
'C#',
|
|
'CSS',
|
|
'CSV',
|
|
'Closure',
|
|
'CoffeeScript',
|
|
'Cold Fusion',
|
|
'Crystal',
|
|
'Cypher',
|
|
'D',
|
|
'Dart',
|
|
'Diff',
|
|
'Docker',
|
|
'Erlang',
|
|
'F#',
|
|
'Fortran',
|
|
'Gherkin',
|
|
'Go',
|
|
'Groovy',
|
|
'HTML',
|
|
'Haskell',
|
|
'Haxe',
|
|
'Java',
|
|
'JavaScript',
|
|
'JSON',
|
|
'Julia',
|
|
'Kotlin',
|
|
'LaTex',
|
|
'Lisp',
|
|
'Lua',
|
|
'MATLAB',
|
|
'MUMPS',
|
|
'Markdown (raw)',
|
|
'OCaml',
|
|
'Objective-C',
|
|
'PHP',
|
|
'Pascal',
|
|
'Perl',
|
|
'Pig',
|
|
'Post',
|
|
'Puppet',
|
|
'Python',
|
|
'R',
|
|
'Ruby',
|
|
'Rust',
|
|
'SQL',
|
|
'Sass',
|
|
'Scheme',
|
|
'Smalltalk',
|
|
'Swift',
|
|
'TSV',
|
|
'VB.NET',
|
|
'VBScript',
|
|
'Velocity',
|
|
'Verilog',
|
|
'XML',
|
|
'YAML'
|
|
].map(name => ({ name }))
|
|
|
|
export default class extends React.Component {
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div id="toolbar">
|
|
<Dropdown list={themes} />
|
|
<Dropdown list={langauges} />
|
|
<ColorPicker />
|
|
<Settings />
|
|
<div className="toolbar-btn copy"><span>Copy Imgur Link</span></div>
|
|
<div className="toolbar-btn dl"><span>Save Image</span></div>
|
|
<style jsx>{`
|
|
#toolbar {
|
|
width: 100%;
|
|
height: 40px; // TODO fix
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
height: 37px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 16px;
|
|
color: #000;
|
|
border: 0.5px solid #333;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.copy {
|
|
background: #84ACFC;
|
|
border-radius: 3px 0px 0px 3px;
|
|
}
|
|
|
|
.dl {
|
|
background: #C3E98D;
|
|
border-radius: 0px 3px 3px 0px;
|
|
border-left: 0px;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|
|
}
|