design-tool-kit-react-js/src/index.js

Library for faster design implementation

import React, { Component } from "react";
import {
  FaArrowLeft,
  FaServer,
  FaNodeJs,
  FaDatabase,
  FaReact,
  FaSketch,
  FaMobile,
  FaAngular,
  FaLinkedinIn,
  FaGithub,
  FaNpm,
  FaArrowRight
} from "react-icons/fa";

export class DummyComponent extends Component {
  render() {
    return <div>I am a dummy react npm module</div>;
  }
}

export class OtherComponent extends Component {
  render() {
    return <div>I am another react npm module</div>;
  }
}

export class Label extends Component {
  render() {
    return (
      <span
        style={{
          color: "#F6F6F6",
          backgroundColor: this.props.color || "white",
          padding: ".5em",
          fontWeight: "bold",
          marginRight: "2em",
          marginBottom: "1em",
          borderRadius: ".3em",
          fontSize: "1.2em"
        }}
        className="stroked"
      >
        {this.props.children}
      </span>
    );
  }
}

export class SketchLabel extends Component {
  render() {
    return (
      <Label color="#F1CA58">
        <FaSketch
          style={{
            fontWeight: "bold",
            marginRight: ".5em"
          }}
        />
        Sketch
      </Label>
    );
  }
}

export class FlutterLabel extends Component {
  render() {
    return <Label color="#3FA9F5">Flutter</Label>;
  }
}

export class MongoDBLabel extends Component {
  render() {
    return (
      <Label color="green">
        <FaDatabase
          style={{
            fontWeight: "bold",
            marginRight: ".5em"
          }}
        />
        MongoDB
      </Label>
    );
  }
}

export class ExpressLabel extends Component {
  render() {
    return (
      <Label color="#323232">
        <FaServer
          style={{
            fontWeight: "bold",
            marginRight: ".5em"
          }}
        />
        Express
      </Label>
    );
  }
}

export class NodeJSLabel extends Component {
  render() {
    return (
      <Label color="green">
        <FaNodeJs
          style={{
            fontWeight: "bold",
            marginRight: ".5em"
          }}
        />
        NodeJS
      </Label>
    );
  }
}

export class MobileLabel extends Component {
  render() {
    return (
      <Label color="#505050">
        <FaMobile
          style={{
            fontWeight: "bold",
            marginRight: ".5em"
          }}
        />
        Mobile Development
      </Label>
    );
  }
}

export class ReactLabel extends Component {
  render() {
    return (
      <Label color="deepskyblue">
        <FaReact
          style={{
            fontWeight: "bold",
            marginRight: ".5em"
          }}
        />
        React
      </Label>
    );
  }
}

export class AngularLabel extends Component {
  render() {
    return (
      <Label color="red">
        <FaAngular
          style={{
            fontWeight: "bold",
            marginRight: ".5em"
          }}
        />
        Angular
      </Label>
    );
  }
}

export class TextContent extends Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

export class ProjectPage extends Component {
  render() {
    return (
      <Layout>
        <div style={{ width: "60vw", marginBottom: "4em" }}>
          <a href="/">
            <h3 style={{ display: "inline" }}>
              <div
                style={{
                  width: "20%",
                  display: "inline",
                  color: "#F6F6F6"
                }}
              >
                <FaArrowLeft /> Main
              </div>
            </h3>
          </a>
          <h2 style={{ display: "inline" }} className="stroked">
            <div
              style={{
                color: "#F6F6F6",
                textAlign: "center",
                backgroundColor: "#FAAB62",
                width: "80%",
                padding: ".5em",
                display: "inline",
                float: "right",
                borderRadius: ".3em"
              }}
            >
              RCM Global Solutions Mobile App
            </div>
          </h2>
        </div>
        {/* 
        <Carousel style={{ width: "35%", height: "35em", float: "left" }}>
          {this.props.children[0]}
        </Carousel> */}

        <div style={{ width: "60%", float: "right" }}>
          <div style={{ display: "block", marginBottom: "1em" }}>
            <span
              style={{
                color: "#F6F6F6",
                backgroundColor: "#3FA9F5",
                padding: ".5em",
                fontWeight: "bold",
                marginRight: "2em",
                marginBottom: "1em",
                borderRadius: ".3em"
              }}
            >
              Flutter
            </span>
            <span
              style={{
                color: "#F6F6F6",
                backgroundColor: "#F1CA58",
                padding: ".5em",
                fontWeight: "bold",
                marginRight: "2em",
                marginBottom: "1em",
                borderRadius: ".3em"
              }}
            >
              <FaSketch
                style={{
                  fontWeight: "bold",
                  marginRight: ".5em"
                }}
              />
              Sketch
            </span>
            <span
              style={{
                color: "#F6F6F6",
                backgroundColor: "#505050",
                padding: ".5em",
                fontWeight: "bold",
                marginBottom: "1em",
                borderRadius: ".3em"
              }}
            >
              <FaMobile
                style={{
                  fontWeight: "bold",
                  marginRight: ".5em"
                }}
              />
              Mobile Development
            </span>
          </div>
          <Section>
            <p>
              Created app for Solar installers representaion company, Using
              Flutter for fast cross-platform development
            </p>
          </Section>
        </div>
      </Layout>
    );
  }
}

export class Layout extends Component {
  render() {
    return (
      <div>
        <div
          style={{
            margin: `0 auto`,
            maxWidth: "80%",
            padding: `0px 1.0875rem 1.45rem`,
            paddingTop: "3em"
          }}
        >
          <div style={{ width: "30%", borderRadius: 20 }}>
            {this.props.children[0]}
          </div>

          <main style={{ maxWidth: "70%", float: "right" }}>
            {this.props.children[1]}
          </main>
          {/* <Footer /> */}
        </div>
      </div>
    );
  }
}

export class Section extends Component {
  render() {
    return (
      <section
        style={{
          backgroundColor: "#171e27",
          color: "white",
          padding: "1em",
          marginBottom: "2em",
          borderRadius: ".5em",
          fontSize: "1.2em",
          fontWeight: "bold",
          border: "1px solid #323232"
        }}
      >
        {this.props.children}
      </section>
    );
  }
}

export class Gallery extends Component {
  render() {
    return (
      <Carousel style={{ width: "100%", height: "50vh", margin: "2em 0" }}>
        {this.props.children}
      </Carousel>
    );
  }
}

export class Footer extends Component {
  render() {
    return (
      <div style={{ margin: "1em 0", float: "right" }}>
        <Section>
          made with ♥️ and
          <a
            href="https://www.npmjs.com/package/design-tool-kit-react-js"
            style={{ marginLeft: ".3em", color: "#0db7ed" }}
          >
            design-tool-kit-react-js
          </a>
        </Section>
      </div>
    );
  }
}

export class Link extends Component {
  render() {
    return (
      <div style={{ margin: "1em 0", float: "right" }}>
        <Section>
          made with ♥️ and
          <a
            href="https://www.npmjs.com/package/design-tool-kit-react-js"
            style={{ marginLeft: ".3em", color: "#0db7ed" }}
          >
            design-tool-kit-react-js
          </a>
        </Section>
      </div>
    );
  }
}

export class ProfileBanner extends Component {
  render() {
    return (
      <div
        style={{
          position: "fixed",
          backgroundColor: "#323232",
          padding: "1em",
          color: "white",
          width: "17%",
          borderRadius: "1em",
          border: "1px solid #fff"
        }}
      >
        <div style={{ borderRadius: "50%" }}>{this.props.children}</div>

        <section
          style={{
            textAlign: "center",
            marginTop: "1em",
            fontWeight: "bold",
            fontSize: "24px"
          }}
        >
          Farid Garciayala
        </section>

        <section
          style={{
            textAlign: "center",
            marginTop: "1em",
            fontWeight: "bold",
            fontSize: "24px"
          }}
        >
          <a
            href="https://www.linkedin.com/in/farid-garciayala-6a9777a7/"
            style={{ marginRight: "1em" }}
          >
            <FaLinkedinIn style={{ color: "#0db7ed" }} />
          </a>
          <a href="https://github.com/faridg18" style={{ marginRight: "1em" }}>
            <FaGithub />
          </a>
          <a href="https://www.npmjs.com/~faridg18">
            <FaNpm style={{ color: "red" }} />
          </a>
        </section>

        <section
          style={{
            textAlign: "center",
            marginTop: "2em",
            fontWeight: "bold",
            fontSize: "24x"
          }}
        >
          <p>
            Hard-working professional with 1.5 years of experience and a proven
            knowledge of experimental design, methods design, and product
            design. Aiming to leverage my skills to successfully fill the
            Full-Stack Software Engineer role at your company.
          </p>
        </section>
      </div>
    );
  }
}


// need to work on position of arrows

export class Carousel extends Component {
  constructor(props) {
    super(props);
    this.state = { index: 0 };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
  }

  previous() {
    this.setState(state => ({
      index: Math.abs((state.index - 1) % (this.props.children.length || 1))
    }));
  }

  next() {
    this.setState(state => ({
      index: (state.index + 1) % (this.props.children.length || 1)
    }));
  }

  render() {
    return (
      <div style={this.props.style}>
        <div style={{ position: "absolute", height: "100%", width: "100%" }}>
          <FaArrowLeft
            onClick={this.previous}
            style={{ color: "white", left: 0, top: 0 }}
          />
          <FaArrowRight
            onClick={this.next}
            style={{ color: "white", right: 0, top: 0 }}
          />
         
        </div>
        <div>{this.props.children[this.state.index]}</div>
      </div>
    );
  }
}