1 files changed, 65 insertions, 0 deletions
diff --git a/ui/app/components/area.js b/ui/app/components/area.js
new file mode 100644
index 00000000..e903e5f5
--- /dev/null
+++ b/ui/app/components/area.js
@@ -0,0 +1,65 @@
+//
+// A bootstrap panel, but with some extra options
+//
+
+import React from 'react'
+// import {Panel} from 'react-bootstrap'
+
+class Area extends React.Component {
+
+  static get defaultProps() {return{
+     position: null,  // top or bottom
+     size: 'small',   // small or big
+     type: null,      // light or dark
+     className: null
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let style = {}
+    let innerstyle = {}
+    if (this.props.position == 'top') {
+      style.borderBottomRightRadius = '0px'
+      style.borderBottomLeftRadius = '0px'
+      style.marginBottom = '0px'
+      style.borderBottom = '0px'
+      if (this.props.size == 'big') {
+        innerstyle.padding = '25px'
+      }
+    } else if (this.props.position == 'bottom') {
+      style.borderTopRightRadius = '0px'
+      style.borderTopLeftRadius = '0px'
+      style.borderTop = '0px'
+      if (this.props.size == 'big') {
+        innerstyle.padding = '15px 25px'
+      }
+    }
+
+    let type = this.props.type ? "area-" + this.props.type : ""
+    let className = ['panel', 'panel-default', type, this.props.className].join(' ')
+    return(
+      <div className={className} style={style}>
+        <div className="panel-body" style={innerstyle}>
+          {this.props.children}
+        </div>
+      </div>
+    )
+  }
+
+}
+
+// Area.propTypes = {
+//   children: React.PropTypes.oneOfType([
+//     React.PropTypes.element,
+//     React.PropTypes.arrayOf(React.PropTypes.element)
+//   ])
+// }
+
+//Area.propTypes = {
+//  children: React.PropTypes.element.isRequired
+//}
+
+export default Area