From bc31eb13deab538445bc1c5a82d288b21e041a09 Mon Sep 17 00:00:00 2001
From: mcarman <mcarman@rpmindustries.com>
Date: Tue, 7 Dec 2021 13:26:17 +0000
Subject: [PATCH] common components

---
 src/components/common/CheckBoxInput.js     | 40 ++++++++++++++++++++++
 src/components/common/Header.js            | 29 ++++++++++++++++
 src/components/common/TableCellCheckbox.js | 38 ++++++++++++++++++++
 src/components/common/TextInput.js         | 40 ++++++++++++++++++++++
 4 files changed, 147 insertions(+)
 create mode 100644 src/components/common/CheckBoxInput.js
 create mode 100644 src/components/common/Header.js
 create mode 100644 src/components/common/TableCellCheckbox.js
 create mode 100644 src/components/common/TextInput.js

diff --git a/src/components/common/CheckBoxInput.js b/src/components/common/CheckBoxInput.js
new file mode 100644
index 0000000..9d2fad7
--- /dev/null
+++ b/src/components/common/CheckBoxInput.js
@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function CheckBoxInput(props) {
+  let wrapperClass = "form-group";
+  if (props.error.length > 0) {
+    wrapperClass += "has-error";
+  }
+  return (
+    <div className={wrapperClass}>
+      <label htmlFor={props.id}>{props.label}</label>
+      <div className="field">
+        <input
+          id={props.id}
+          type="checkbox"
+          onChange={props.onChange}
+          name={props.name}
+          className="form-control"
+          checked={props.value}
+        />
+      </div>
+      {props.error && <div className="alert alert-danger">{props.error}</div>}
+    </div>
+  );
+}
+
+CheckBoxInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  checked: PropTypes.string,
+  error: PropTypes.string,
+};
+
+CheckBoxInput.defaultProps = {
+  error: "",
+};
+
+export default CheckBoxInput;
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
new file mode 100644
index 0000000..e94b055
--- /dev/null
+++ b/src/components/common/Header.js
@@ -0,0 +1,29 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+function Header() {
+  const activeStyle = { color: "orange" };
+  return (
+    <nav>
+      <NavLink activeStyle={activeStyle} exact to="/">
+        Home
+      </NavLink>{" "}
+      |
+      <NavLink activeStyle={activeStyle} to="/courses">
+        Courses
+      </NavLink>{" "}
+      |
+      <NavLink activeStyle={activeStyle} to="/about">
+        About
+      </NavLink>{" "}
+      |
+      <NavLink activeStyle={activeStyle} to="/users">
+        Uers
+      </NavLink>{" "}
+      {/** TODO
+       * Add new NavLink tags above for each object in whatever order your like */}
+    </nav>
+  );
+}
+
+export default Header;
diff --git a/src/components/common/TableCellCheckbox.js b/src/components/common/TableCellCheckbox.js
new file mode 100644
index 0000000..7248f4a
--- /dev/null
+++ b/src/components/common/TableCellCheckbox.js
@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function TableCellCheckbox(props) {
+  let wrapperClass = "form-group";
+  if (props.error.length > 0) {
+    wrapperClass += "has-error";
+  }
+  return (
+    <td className={wrapperClass}>
+      <div className="field">
+        <input
+          id={props.id}
+          type="checkbox"
+          onChange={props.onChange}
+          name={props.name}
+          className="form-control"
+          checked={props.checked}
+        />
+      </div>
+      {props.error && <div className="alert alert-danger">{props.error}</div>}
+    </td>
+  );
+}
+
+TableCellCheckbox.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  checked: PropTypes.bool,
+  error: PropTypes.string,
+};
+
+TableCellCheckbox.defaultProps = {
+  error: "",
+};
+
+export default TableCellCheckbox;
diff --git a/src/components/common/TextInput.js b/src/components/common/TextInput.js
new file mode 100644
index 0000000..9b1654d
--- /dev/null
+++ b/src/components/common/TextInput.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function TextInput(props) {
+    let wrapperClass = "form-group";
+    if(props.error.length > 0){
+        wrapperClass += "has-error";
+    }
+    return (
+        <div className={wrapperClass}>
+        <label htmlFor={props.id}>{props.label}</label>
+        <div className="field">
+          <input
+            id={props.id}
+            type="text"
+            onChange={props.onChange}
+            name={props.name}
+            className="form-control"
+            value={props.value}
+          />
+        </div>
+        { props.error && <div className="alert alert-danger">{props.error}</div>}
+      </div>
+    )
+}
+
+TextInput.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.string,
+    error: PropTypes.string
+};
+
+TextInput.defaultProps = {
+    error: ""
+};
+
+export default TextInput;
\ No newline at end of file