- implement work experience

- implement education
- show dynamic names in layout

src/components/shared/Button.module.css

@@ -7,10 +7,6 @@
   @apply bg-primary-dark;
 }
 
-.container:focus {
-  @apply outline-none;
-}
-
 .container.outline {
   @apply border border-primary bg-inverse text-primary;
 }

src/components/shared/Input.js

@@ -1,8 +1,10 @@
 import cx from "classnames";
-import { get } from "lodash";
+import { get, isFunction } from "lodash";
 import React, { useContext } from "react";
+import { MdClose } from "react-icons/md";
 import { v4 as uuidv4 } from "uuid";
 import ResumeContext from "../../contexts/ResumeContext";
+import { handleKeyDown } from "../../utils";
 import styles from "./Input.module.css";
 
 const Input = ({
@@ -17,6 +19,8 @@ const Input = ({
   onChange,
   className,
   placeholder,
+  onDeleteItem,
+  showDeleteItemButton,
   type = "text",
 }) => {
   const uuid = uuidv4();
@@ -39,18 +43,59 @@ const Input = ({
     <div className={cx(styles.container, className)}>
       <label htmlFor={uuid}>
         <span>{label}</span>
-        <input
-          id={uuid}
-          name={name}
-          type={type}
-          value={value}
-          onBlur={onBlur}
-          checked={checked}
-          onChange={onChange}
-          placeholder={placeholder}
-          {...(path && inputProps(path))}
-        />
-        {touched && <p>{error}</p>}
+        {type === "textarea" ? (
+          <div className="flex flex-col">
+            <textarea
+              id={uuid}
+              rows="4"
+              name={name}
+              type={type}
+              value={value}
+              onBlur={onBlur}
+              checked={checked}
+              onChange={onChange}
+              placeholder={placeholder}
+              {...(path && inputProps(path))}
+            />
+
+            <p className="mt-2 text-sm opacity-75">
+              This text block supports{" "}
+              <a
+                href="https://www.markdownguide.org/basic-syntax/"
+                className="text-blue-600"
+                target="blank"
+              >
+                markdown
+              </a>
+              .
+            </p>
+          </div>
+        ) : (
+          <div className="relative grid items-center">
+            <input
+              id={uuid}
+              name={name}
+              type={type}
+              value={value}
+              onBlur={onBlur}
+              checked={checked}
+              onChange={onChange}
+              placeholder={placeholder}
+              {...(path && inputProps(path))}
+            />
+
+            {showDeleteItemButton && isFunction(onDeleteItem) && (
+              <MdClose
+                size="16px"
+                tabIndex="0"
+                onClick={onDeleteItem}
+                onKeyDown={(e) => handleKeyDown(e, onDeleteItem)}
+                className="absolute right-0 cursor-pointer opacity-50 hover:opacity-75 mx-4"
+              />
+            )}
+          </div>
+        )}
+        {error && touched && <p>{error}</p>}
       </label>
     </div>
   );

src/components/shared/Input.module.css

@@ -2,26 +2,21 @@
   @apply w-full;
 }
 
-.container > label {
-  @apply flex flex-col;
-}
-
-.container > label > span {
-  @apply mb-1 text-secondary-dark font-semibold tracking-wide text-xs uppercase;
-}
-
-.container > label > input {
+.container label input,
+.container label textarea {
   @apply py-3 px-4 rounded bg-secondary text-primary border border-secondary;
 }
 
-.container > label > input::placeholder {
+.container label input::placeholder,
+.container label textarea::placeholder {
   @apply text-primary opacity-50;
 }
 
-.container > label > input:focus {
+.container label input:focus,
+.container label textarea:focus {
   @apply outline-none border-gray-500;
 }
 
-.container > label > p {
+.container label > p {
   @apply mt-1 text-red-600 text-xs;
 }