diff options
author | elijah <elijah@riseup.net> | 2016-08-26 21:09:53 -0700 |
---|---|---|
committer | Kali Kaneko (leap communications) <kali@leap.se> | 2016-09-01 01:41:24 -0400 |
commit | 62f069ef0af1444089a4d477f05ac7279897fa32 (patch) | |
tree | bde623ee4ec8de240ed5504d3cdbc01c5d6755fc /src/leap/bitmask_js/app/components/main_panel/section_layout.js | |
parent | 50a258d45e851a865801da9d888037b5869a3489 (diff) |
[feat] added initial bitmask_js (WIP)
Diffstat (limited to 'src/leap/bitmask_js/app/components/main_panel/section_layout.js')
-rw-r--r-- | src/leap/bitmask_js/app/components/main_panel/section_layout.js | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/leap/bitmask_js/app/components/main_panel/section_layout.js b/src/leap/bitmask_js/app/components/main_panel/section_layout.js new file mode 100644 index 0000000..e7c6f2a --- /dev/null +++ b/src/leap/bitmask_js/app/components/main_panel/section_layout.js @@ -0,0 +1,59 @@ +// +// This is the layout for a service section in the main window. +// It does not do anything except for arrange items using css and html. +// + +import React from 'react' + +export default class SectionLayout extends React.Component { + + static get defaultProps() {return{ + icon: null, + buttons: null, + status: null, + className: "", + style: {} + }} + + constructor(props) { + super(props) + } + + render() { + let className = ["service-section", this.props.className].join(' ') + let status = null + let icon = null + let buttons = null + + if (this.props.status) { + status = ( + <div className="status"> + <img src={'img/' + this.props.status + '.svg' } /> + </div> + ) + } + if (this.props.icon) { + icon = ( + <div className="icon"> + <img src={'img/' + this.props.icon + '.svg'} /> + </div> + ) + } + if (this.props.buttons) + buttons = ( + <div className="buttons"> + {this.props.buttons} + </div> + ) + return( + <div className={className} style={this.props.style}> + {icon} + <div className="body"> + {this.props.children} + </div> + {buttons} + {status} + </div> + ) + } +} |