- creating the right sidebar

- designing the artboard
- optimizing dark mode performance
- optimizing input onChange handler

src/components/shared/Heading.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Heading = ({ children }) => {
+  return <h2 className="text-4xl">{children}</h2>;
+};
+
+export default Heading;

src/components/shared/Input.js

@@ -1,11 +1,14 @@
 import cx from "classnames";
-import React from "react";
+import { get } from "lodash";
+import React, { useContext } from "react";
 import { v4 as uuidv4 } from "uuid";
+import ResumeContext from "../../contexts/ResumeContext";
 import styles from "./Input.module.css";
 
 const Input = ({
-  label,
   name,
+  path,
+  label,
   value,
   error,
   onChange,
@@ -14,6 +17,20 @@ const Input = ({
   type = "text",
 }) => {
   const uuid = uuidv4();
+  const { state, dispatch } = useContext(ResumeContext);
+
+  const inputProps = (path) => ({
+    value: get(state, path),
+    onChange: (e) => {
+      dispatch({
+        type: "on_input",
+        payload: {
+          path,
+          value: e.target.value,
+        },
+      });
+    },
+  });
 
   return (
     <div className={cx(styles.container, className)}>
@@ -26,8 +43,9 @@ const Input = ({
           value={value}
           onChange={onChange}
           placeholder={placeholder}
+          {...(path && inputProps(path))}
         />
-        <p className="mt-1 text-red-600 text-sm">{error}</p>
+        <p>{error}</p>
       </label>
     </div>
   );

src/components/shared/Input.module.css

@@ -7,13 +7,21 @@
 }
 
 .container > label > span {
-  @apply mb-1 text-gray-600 font-medium text-sm uppercase;
+  @apply mb-1 text-secondary-dark font-medium text-xs uppercase;
 }
 
 .container > label > input {
-  @apply py-4 px-4 rounded bg-gray-200 border border-gray-200;
+  @apply py-3 px-4 rounded bg-secondary text-primary border border-secondary;
+}
+
+.container > label > input::placeholder {
+  @apply text-primary opacity-50;
 }
 
 .container > label > input:focus {
-  @apply outline-none border-gray-400;
+  @apply outline-none border-secondary-dark;
+}
+
+.container > label > p {
+  @apply mt-1 text-red-600 text-xs;
 }