feat: add input for users

src/components/PricingComparator/PricingComparator.js

@@ -113,6 +113,15 @@ export default function PricingComparator() {
 
   const prices = getPrices(users, paidAnnually, codeCompetitor, chatCompetitor);
 
+  const decreaseUsers = shiftKey => {
+    const step = shiftKey ? 10 : 1;
+    setUsers(currentUsers => Math.max(1, currentUsers - step));
+  };
+  const increaseUsers = shiftKey => {
+    const step = shiftKey ? 10 : 1;
+    setUsers(currentUsers => currentUsers + step);
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.controls}>
@@ -122,18 +131,38 @@ export default function PricingComparator() {
             <button
               type="button"
               className="button button--secondary button--sm"
-              onClick={() =>
-                setUsers(currentUsers => Math.max(1, currentUsers - 1))
-              }
+              onClick={event => decreaseUsers(event.shiftKey)}
               disabled={users <= 1}
             >
               <FaMinus size={10} />
             </button>
-            <strong>{users}</strong>
+            <input
+              type="text"
+              onKeyDown={event => {
+                switch (event.key) {
+                  case "ArrowDown":
+                    return decreaseUsers(event.shiftKey);
+                  case "ArrowUp":
+                    return increaseUsers(event.shiftKey);
+                }
+              }}
+              onChange={event => {
+                const value = Math.round(Number(event.target.value));
+
+                if (isNaN(value)) {
+                  return;
+                }
+
+                setUsers(Math.max(1, value));
+              }}
+              pattern="[0-9]*"
+              value={users}
+              className={styles.controlsUsersInput}
+            />
             <button
               type="button"
               className="button button--secondary button--sm"
-              onClick={() => setUsers(currentUsers => currentUsers + 1)}
+              onClick={event => increaseUsers(event.shiftKey)}
             >
               <FaPlus size={10} />
             </button>

src/components/PricingComparator/PricingComparator.module.css

 .container {
+  margin-bottom: 1em;
 }
 
 .controls {
@@ -29,6 +30,10 @@
   padding: 0;
   margin: 0;
 }
+.controlsUsersInput {
+  padding: 0.2rem 0.6rem;
+  width: 8ch;
+}
 
 .controlsPeriodicity {
   margin: 0;