feat: add custom base value

#8

src/App.tsx

@@ -8,6 +8,7 @@ import { useCopyToClipboard } from "react-use";
 import toast, { DefaultToastOptions, Toaster } from "react-hot-toast";
 import useToastLimit from "./components/hooks/useToastLimit";
 import GlobalContext from "./contexts/globalContext";
+import Base from "./components/Base";
 
 const toastSettings: DefaultToastOptions = {
   position: "bottom-center",
@@ -27,14 +28,15 @@ const defaultFactors: Factor[] = [
 
 const App = () => {
   const [factor, setFactor] = useState<Factor>([10, 40]);
-  const [baseValue] = useState(16);
+  const [base, setBase] = useState(16);
   const [values, setValues] = useState<number[]>([]);
   const [selectedValue, setSelectedValue] = useState<number | null>(null);
   const [factors, setFactors] = useState(defaultFactors);
 
   useToastLimit();
   const [clipboardState, copyToClipboard] = useCopyToClipboard();
 
+  const changeBase = (n: number) => setBase(n);
   const changeFactor = (f: Factor) => setFactor(f);
   const selectValue = (n: number) => () => {
     setSelectedValue(n);
@@ -59,22 +61,22 @@ const App = () => {
     addFactor,
     values,
     selectedValue,
+    base,
+    changeBase,
   };
 
   useEffect(() => {
-    setValues(generateFactorValues(factor, baseValue));
-  }, [baseValue, factor]);
+    setValues(generateFactorValues(factor, base));
+  }, [base, factor]);
 
   return (
     <GlobalContext.Provider value={globalContextValues}>
       <div className="sm:p-0 mx-auto max-w-[40rem] p-[1rem] sm:py-[4rem]">
         <Toaster toastOptions={toastSettings} />
         <Header />
-
         <main className="flex flex-col gap-[2rem]">
           <Dropdown />
-
-          <Difference />
+          <Base />
 
           <div className="flex flex-col items-baseline sm:flex-row">
             <h3
@@ -99,6 +101,7 @@ const App = () => {
               ))}
             </ul>
           </div>
+          <Difference />
 
           <About />
         </main>

src/components/Base.tsx

@@ -0,0 +1,56 @@
+import { ChangeEvent, useContext, useState } from "react";
+import Check from "./icons/Check";
+import GlobalContext from "../contexts/globalContext";
+
+const Base = () => {
+  const [value, setValue] = useState(16);
+  const { changeBase } = useContext(GlobalContext)!;
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { value, min, max } = event.target;
+    const newValue = Math.max(
+      Number(min),
+      Math.min(Number(max), Number(value)),
+    );
+
+    setValue(newValue);
+  };
+
+  const handleDone = () => changeBase(value);
+
+  return (
+    <div className="flex flex-col items-baseline sm:flex-row">
+      <h3
+        className="mb-[0.5rem] min-w-[8rem] text-secondary-text"
+        children="Base"
+      />
+
+      <div className="relative max-w-[8rem] ">
+        <input
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          min={1}
+          max={999}
+          type="number"
+          className="text-secondary w-full rounded-inner border border-primary-color-500 bg-transparent  p-[0.5rem] text-primary-text"
+          value={value}
+          onChange={handleChange}
+        />
+        <button
+          className="absolute right-[0] h-full rounded-r-inner border border-primary-color-500 bg-primary-color-500 px-[1rem] hover:bg-primary-color-700"
+          onClick={handleDone}
+        >
+          <Check />
+        </button>
+        {isFocused && (
+          <p className="absolute -bottom-[0.25rem] left-[0] translate-y-full whitespace-nowrap text-[1rem] text-tertiary-text">
+            TIP: 16 is a good start
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Base;

src/components/Dropdown.tsx

@@ -16,7 +16,7 @@ const Dropdown = () => {
   const [isModalActive, setIsModalActive] = useState(false);
   const openModal = () => setIsModalActive(true);
   const closeModal = () => setIsModalActive(false);
-  console.log("dropdown rerenders");
+
   const changeActiveFactor = (f: Factor) => () => changeFactor(f);
   return (
     <div className="flex flex-col items-baseline sm:flex-row">
@@ -31,7 +31,7 @@ const Dropdown = () => {
           <ArrowDown />
         </p>
         {isActive && (
-          <div className="left-0 top-0 absolute mt-[0.25rem] w-full overflow-clip rounded-inner border border-primary-color-700 bg-neutral shadow-md shadow-primary-color-500">
+          <div className="left-0 top-0 absolute z-[1] mt-[0.25rem] w-full overflow-clip rounded-inner border border-primary-color-700 bg-neutral shadow-md shadow-primary-color-500">
             {factors.map(([f1, f2]) => (
               <p
                 key={`${f1} ${f2}`}

src/components/Modal.tsx

@@ -99,7 +99,7 @@ const Modal = ({ isActive, close }: ModalProps) => {
       <div className="mt-[1.5rem] flex flex-col gap-[0.5rem]">
         <button
           onClick={closeModal}
-          className="p-[0.5rem] uppercase text-secondary-text hover:text-primary-text"
+          className="rounded-inner p-[0.5rem] uppercase text-secondary-text hover:text-primary-text"
         >
           Close
         </button>

src/components/icons/Check.tsx

@@ -0,0 +1,18 @@
+const Check = () => {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.62509 10.1063L3.45634 7.93752C3.33948 7.82066 3.18098 7.755 3.01572 7.755C2.85045 7.755 2.69195 7.82066 2.57509 7.93752C2.45823 8.05438 2.39258 8.21288 2.39258 8.37814C2.39258 8.45997 2.4087 8.541 2.44001 8.61661C2.47133 8.69221 2.51723 8.7609 2.57509 8.81877L5.18759 11.4313C5.43134 11.675 5.82509 11.675 6.06884 11.4313L12.6813 4.81877C12.7982 4.70191 12.8639 4.54341 12.8639 4.37814C12.8639 4.21288 12.7982 4.05438 12.6813 3.93752C12.5645 3.82066 12.406 3.755 12.2407 3.755C12.0754 3.755 11.917 3.82066 11.8001 3.93752L5.62509 10.1063Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default Check;

src/contexts/globalContext.ts

@@ -9,6 +9,8 @@ type GlobalContextValues = {
   addFactor: (f: Factor) => void;
   values: number[];
   selectedValue: number | null;
+  base: number;
+  changeBase: (n: number) => void;
 };
 
 const GlobalContext = createContext<GlobalContextValues | null>(null);

src/index.css

@@ -8,6 +8,22 @@
   html {
     @apply bg-neutral font-poppins leading-[1.5] text-primary-text;
   }
+
+  /* Remove input type number arrows */
+  /* Chrome */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* Firefox */
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  input:focus {
+    outline: none;
+  }
 }
 
 @layer components {