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.
70 lines
2.3 KiB
React
70 lines
2.3 KiB
React
5 years ago
|
// Copyright 2020 Thomas Hintz
|
||
|
|
//
|
||
|
|
// This file is part of the Alpha Centauri Farming project.
|
||
|
|
//
|
||
|
|
// The Alpha Centauri Farming project is free software: you can
|
||
|
|
// redistribute it and/or modify it under the terms of the GNU General
|
||
|
|
// Public License as published by the Free Software Foundation, either
|
||
|
|
// version 3 of the License, or (at your option) any later version.
|
||
|
|
//
|
||
|
|
// The Alpha Centauri Farming project is distributed in the hope that
|
||
|
|
// it will be useful, but WITHOUT ANY WARRANTY; without even the
|
||
|
|
// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
|
||
|
|
// PURPOSE. See the GNU General Public License for more details.
|
||
|
|
//
|
||
|
|
// You should have received a copy of the GNU General Public License
|
||
|
|
// along with the Alpha Centauri Farming project. If not, see
|
||
|
|
// <https://www.gnu.org/licenses/>.
|
||
|
|
|
||
|
|
import React, { Fragment } from 'react'
|
||
|
|
|
||
|
|
export { GroupBox, Row, Col, Button }
|
||
|
|
|
||
|
|
class GroupBox extends React.Component {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div className='panel card'>
|
||
|
|
{this.props.title ?
|
||
|
|
(<div className='card-divider'>
|
||
|
|
{this.props.title}
|
||
|
|
</div>) : (<Fragment />)}
|
||
|
|
<div className={'card-section ' + this.props.className ? this.props.className : ''}>
|
||
|
|
{this.props.children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Row extends React.Component {
|
||
|
|
render() {
|
||
|
|
return (<div className={'grid-x full-width ' +
|
||
|
|
(this.props.collapse ? 'collapse' : '') + ' ' +
|
||
|
|
(this.props.className ? this.props.className : '')} >
|
||
|
|
{this.props.children}</div>);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Col extends React.Component {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div className={'cell small-' + this.props.width}>
|
||
|
|
{this.props.children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class Button extends React.Component {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<button className={'button ' + (this.props.size ? this.props.size : '') +
|
||
|
|
' ' + (this.props.className ? this.props.className : '')}
|
||
|
|
type={this.props.type || 'button'}
|
||
|
|
onClick={this.props.onClick} >
|
||
|
|
{this.props.children}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|