source: js/human_3d_alignment/src/viewskeleton/titlepanel.jsx @ 977

Last change on this file since 977 was 881, checked in by Maciej Komosinski, 6 years ago

Initial, prototype version of a javascript app to test how humans align two 3D structures

File size: 1.1 KB
Line 
1"use strict";
2import React from 'react';
3import update from 'immutability-helper';
4
5const styles = {
6    root: {
7        fontFamily: '"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',
8        fontWeight: 300,
9    },
10    header: {
11        width: '100%',
12        backgroundColor: 'black',
13        color: 'white',
14        padding: '16px 0px 16px 0px',
15        fontSize: '1.5em',
16    }
17};
18
19/**
20 * Class for rendering main top panel of Framsticks.JS site.
21 */
22class TitlePanel extends React.Component {
23    /**
24     * Basic constructor for TitlePanel
25     * @param {any} props props for titlepanel
26     */
27    constructor(props) {
28        super(props);
29        this.rootStyle = props.style ? update(styles.root, {$merge: props.style}) : styles.root;
30    }
31
32    /**
33     * Render method
34     * @returns {JSX.Element} new title panel
35     */
36    render() {
37        return (
38        <div style={this.rootStyle}>
39            <div style={styles.header}>{this.props.title}</div>
40            {this.props.children}
41        </div>
42        );
43    }
44}
45
46export default TitlePanel;
Note: See TracBrowser for help on using the repository browser.