added components and pages

anubhavsrivastava · May 12, 2019 · e66505e · e66505e
1 parent b433eff
commit e66505e
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 0 deletions.
diff --git a/src/components/EmailForm.js b/src/components/EmailForm.js
@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+
+export class EmailForm extends Component {
+  constructor() {
+    super();
+    this.state = { message: '' };
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  onSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState({ message: 'Thank you!' });
+    setTimeout(() => {
+      this.setState({ message: '' });
+    }, 3000);
+  }
+
+  render() {
+    const { message } = this.state;
+    return (
+      <form id="signup-form" onSubmit={this.onSubmit} method="post" action="#">
+        <input
+          type="email"
+          name="email"
+          id="email"
+          placeholder="Email Address"
+        />
+        <input type="submit" value="Sign Up" />
+        <span className={`${message ? 'visible success' : ''} message`}>
+          {message}
+        </span>
+      </form>
+    );
+  }
+}
+
+export default EmailForm;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import config from '../../config';
+
+export default function Footer() {
+  return (
+    <footer id="footer">
+      <ul className="icons">
+        {config.socialLinks.map(social => {
+          const { icon, name, url } = social;
+          return (
+            <li>
+              <a href={url} class={`icon ${icon}`}>
+                <span class="label">{name}</span>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+      <ul className="copyright">
+        <li>&copy; Eventually.</li>
+        <li>
+          Credits: <a href="http://unsplash.com/">Unsplash</a> +
+          <a href="http://html5up.net">HTML5 UP</a>
+        </li>
+      </ul>
+    </footer>
+  );
+}
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import config from '../../config';
+
+export default function Footer() {
+  return (
+    <header id="header">
+      <h1>{config.heading}</h1>
+      <p>{config.subHeading}</p>
+    </header>
+  );
+}
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import { StaticQuery, graphql } from 'gatsby';
+
+import '../assets/sass/main.scss';
+
+class Layout extends Component {
+  constructor() {
+    super();
+    this.state = {
+      isPreloaded: true,
+    };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({ isPreloaded: false });
+    }, 100);
+  }
+
+  render() {
+    const { children } = this.props;
+    const { isPreloaded } = this.state;
+    return (
+      <StaticQuery
+        query={graphql`
+          query SiteTitleQuery {
+            site {
+              siteMetadata {
+                title
+              }
+            }
+          }
+        `}
+        render={data => (
+          <>
+            <Helmet
+              title={data.site.siteMetadata.title}
+              meta={[
+                { name: 'description', content: 'Eventually' },
+                { name: 'keywords', content: 'site, web' },
+              ]}
+            >
+              <html lang="en" />
+            </Helmet>
+            <div className={isPreloaded ? 'main-body is-preload' : 'main-body'}>
+              {children}
+            </div>
+          </>
+        )}
+      />
+    );
+  }
+}
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Layout;
diff --git a/src/components/SlideShow.js b/src/components/SlideShow.js
@@ -0,0 +1,60 @@
+import React, { PureComponent } from 'react';
+
+export default class SlideShow extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      pos: 0,
+      lastPos: 0,
+    };
+    this.rotateSlide = this.rotateSlide.bind(this);
+  }
+
+  rotateSlide() {
+    const { settings } = this.props;
+    setInterval(() => {
+      let { pos, lastPos } = this.state;
+      lastPos = pos;
+      pos++;
+
+      if (pos >= settings.images.length) {
+        pos = 0;
+      }
+
+      // Hide last image after a short delay.
+      setTimeout(() => {
+        lastPos = pos;
+        this.setState({ lastPos });
+      }, settings.delay / 2);
+
+      this.setState({ lastPos, pos });
+    }, settings.delay);
+  }
+  componentDidMount() {
+    this.rotateSlide();
+  }
+  render() {
+    const { pos, lastPos } = this.state;
+    const { settings } = this.props;
+
+    return (
+      <div id="bg">
+        {settings.images.map((image, i) => {
+          return (
+            <div
+              key={image['url']}
+              style={{
+                backgroundPosition: image['position'],
+                backgroundImage: `url("${image['url']}")`,
+              }}
+              className={
+                i === pos ? 'visible top' : i === lastPos ? 'visible' : ''
+              }
+            />
+          );
+        })}
+        ;
+      </div>
+    );
+  }
+}
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import Layout from '../components/layout';
+
+const NotFoundPage = () => (
+  <Layout darkText>
+    <h1>NOT FOUND</h1>
+    <p>Not a valid URL</p>
+  </Layout>
+);
+
+export default NotFoundPage;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Layout from '../components/Layout';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import EmailForm from '../components/EmailForm';
+import SlideShow from '../components/SlideShow';
+
+var settings = {
+  images: [
+    { url: require('../assets/images/bg01.jpg'), position: 'center' },
+    { url: require('../assets/images/bg02.jpg'), position: 'center' },
+    { url: require('../assets/images/bg03.jpg'), position: 'center' },
+  ],
+  // Delay.
+  delay: 6000,
+};
+
+const IndexPage = () => (
+  <Layout>
+    <Header />
+    <EmailForm />
+    <Footer />
+    <SlideShow settings={settings} />
+  </Layout>
+);
+
+export default IndexPage;