diff --git a/components/Meta.js b/components/Meta.js index 8dec2b4..497ee7d 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -48,6 +48,11 @@ export default () => ( margin-right: 0px; } + .selected svg { + border-radius: 3px; + border: solid 2px #fff; + } + .CodeMirrorContainer .CodeMirror { height: auto; min-width: 680px; diff --git a/components/ThemeSelect.js b/components/ThemeSelect.js new file mode 100644 index 0000000..5a4b054 --- /dev/null +++ b/components/ThemeSelect.js @@ -0,0 +1,65 @@ +import React from 'react' +import { Hyper, BW, None } from './svg/Themes' + +const THEME_IMGS = [None, Hyper, BW] + +export default class extends React.Component { + constructor(props) { + super() + this.state = { selected: props.selected || THEME_IMGS[0] } + this.select = this.select.bind(this) + } + + select(theme) { + if (this.state.selected !== theme) { + this.props.onChange(theme) + this.setState({ selected: theme }) + } + } + + renderThemes() { + return THEME_IMGS.map((Img, i) => ( +
+ + +
+ )) + } + + render() { + return ( +
+ Theme +
+ { this.renderThemes() } +
+ +
+ ) + } +} diff --git a/components/svg/Themes.js b/components/svg/Themes.js new file mode 100644 index 0000000..27bd8b3 --- /dev/null +++ b/components/svg/Themes.js @@ -0,0 +1,64 @@ +import React from 'react' + +export const Hyper = () => ( + + + + + + + + + + + + + + + + + + +) + +export const BW = () => ( + + + + + + + + + + + + + + + + + + +) + +export const None = () => ( + + + + + + + + + + + + + + + + + + +)