added files
diff --git a/Components/Panels.js b/Components/Panels.js
new file mode 100644
index 0000000..3c1d2e6
--- /dev/null
+++ b/Components/Panels.js
@@ -0,0 +1,105 @@
+import react, { Component } from "react";
+import Styles from '../styles/Components/panels.module.css';
+import handleViewport from 'react-in-viewport';
+
+
+class PanelClass extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ getStyle() {
+ const { inViewport, enterCount } = this.props;
+ if (inViewport && enterCount === 1) { return { WebkitTransition: 'all 0.75s ease-in-out', opacity: '1', transform: "translateY(0px)" };
+ } else if (!inViewport && enterCount < 1) { return { WebkitTransition: 'none', opacity: '0', transform: "translateY(20px)" };
+ } else { return {}; }
+ }
+
+ render() {
+ return <div className={Styles.panel} style={this.getStyle()} id={this.props.id}>
+ {
+ react.Children.toArray(this.props.children).map((child, index) => {
+ return child;
+ })
+ }
+ </div>
+ }
+}
+
+
+class AutoLayout extends Component {
+ constructor(props) {
+ super(props);
+ this.children = react.Children.toArray(this.props.children)
+ this.validity = []
+ this.calculateValidity()
+ }
+
+ calculateValidity() {
+ this.children.map((item, index) => {
+ if ( index > 0 && item.props.halfSize && this.validity[index - 1] == 'half1' ) {
+ this.validity[index] = 'half2';
+ } else if ( index > 0 && !item.props.halfSize && this.validity[index - 1] == 'half1' ) {
+ this.validity[index] = 'full';
+ this.validity[index - 1] = 'full';
+ } else if ( item.props.halfSize && !(index == this.props.children.length - 1) ) {
+ this.validity[index] = 'half1';
+ } else if ( index == this.props.children.length - 1 && this.validity[index - 1] == 'half1' ) {
+ this.validity[index] = 'full';
+ this.validity[index - 1] = 'full';
+ } else if ( index == this.props.children.length - 1 && this.validity[index - 1] == 'half2' ) {
+ this.validity[index] = 'full';
+ } else {
+ this.validity[index] = 'full';
+ }
+ })
+ }
+
+ render() {
+ return (
+ <div className={Styles.container}>
+ {
+ this.children.map((item, index) => {
+ if ( this.validity[index] == 'full' ) {
+ return this.children[index]
+ } else if ( this.validity[index] == 'half1' ) {
+ return <div key={index} className={Styles.doublePanel}>
+ {this.children[index]}
+ {this.children[index + 1]}
+ </div>
+ }
+ })
+ }
+ </div>
+ )
+ }
+}
+
+
+class Title extends Component {
+ render() {
+ return <h1 className={Styles.title}>{this.props.children}</h1>
+ }
+}
+
+class Subtitle extends Component {
+ render() {
+ return <h2 className={Styles.subtitle}>{this.props.children}</h2>
+ }
+}
+
+class Text extends Component {
+ render() {
+ return <p className={Styles.text}>{this.props.children}</p>
+ }
+}
+
+class Divider extends Component {
+ render() {
+ return <div className={Styles.divider}></div>
+ }
+}
+
+const Panel = handleViewport(PanelClass, { rootMargin: '-1.0px' });
+
+export { AutoLayout, Panel, Title, Subtitle, Text, Divider };
\ No newline at end of file