finish network speed converter

.eslintrc.cjs

@@ -46,7 +46,19 @@ module.exports = {
         "@typescript-eslint/no-non-null-assertion": "off",
         "import/no-unresolved": 1,
         "import/prefer-default-export": "off",
-        "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
+        "import/no-extraneous-dependencies": [
+            1, 
+            { 
+                devDependencies: [
+                    "test/**/*",
+                    "tests/**/*",
+                    "**/__tests__/**",
+                    "**/*.test.{js,jsx}",
+                    "**/*.test.jsx",
+                    "src/utils/fontAwesome.ts"
+                ]
+            }
+        ],
         "@typescript-eslint/no-use-before-define": 0,
         "no-use-before-define": 0,
         "@typescript-eslint/no-var-requires": 0,

package.json

@@ -13,6 +13,11 @@
     "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.13.0"

src/components/NetworkUnitConverter/CardFooter.tsx

@@ -0,0 +1,40 @@
+interface CardFooterProps {
+    inputValue: number
+}
+
+const CardFooter = ({inputValue}:CardFooterProps)=>{
+    let criteria: Record<string, any> = {}
+
+    if(!inputValue){
+        criteria = {
+            title: "---",
+            backgroundColor: "#d3d8e2"
+        }
+    }else if(inputValue < 15){
+        criteria = {
+            title: "SLOW",
+            backgroundColor: "#ee362d"
+        }
+    }else if(inputValue < 40){
+        criteria = {
+            title: "GOOD",
+            backgroundColor: "#1b82f1"
+        }
+    }else{
+        criteria = {
+            title: "FAST",
+            backgroundColor: "#13d569"
+        }
+    }
+
+    return (
+        <div 
+            className={`min-h-[40px] flex items-center justify-center text-[white] m-[5px] rounded-br-md rounded-bl-md`}
+            style={{backgroundColor: criteria.backgroundColor}}
+        >
+            {criteria.title}
+        </div>
+    )
+}
+
+export default CardFooter

src/components/NetworkUnitConverter/UnitControl.tsx

@@ -0,0 +1,16 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import style from "@/styles/NetworkUnitConverter.module.css"
+
+const UnitControl = ()=>{
+    return (
+        <div className="flex items-center justify-between mb-[45px]">
+            <div className="inline-flex bg-[#0a97b0] items-center justify-center w-[75px] h-[35px] text-[white] rounded-[3px]">Mbps</div>
+            <span className={`${style["icon-color"]} fa-fw fa-stack`}>
+                <FontAwesomeIcon icon={["fas", "exchange-alt"]} className="fa-stack" />
+            </span>
+            <div className="inline-flex bg-[#0a97b0] items-center justify-center w-[75px] h-[35px] text-[white] rounded-[3px]">MB/s</div>
+        </div>
+    )
+}
+
+export default UnitControl

src/components/NetworkUnitConverter/UnitConverter.tsx

@@ -0,0 +1,38 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+interface UnitConverterProps {
+    inputValue: number,
+    onChangeInput: (e: React.ChangeEvent<HTMLInputElement>)=>void
+}
+
+const UnitConverter = (props: UnitConverterProps)=>{
+    const {inputValue, onChangeInput} = props
+
+    return (
+        <div className="flex items-center justify-between">
+            <div className="flex-1">
+                <div className="text-[#6886c5] font-[bold] mb-3 text-left">Set</div>
+                <input 
+                    type="number" 
+                    className="text-[32px] max-w-[170px] flex-1 inline-block text-[#0a97b0] font-[bold] border-[none] bg-transparent outline-none" 
+                    min="0" 
+                    value={inputValue}
+                    onChange={onChangeInput}
+                />
+            </div>
+            <span className="text-[#6886c5] fa-2x" style={{marginTop: 30}}>
+                <FontAwesomeIcon icon="angle-right" className="fa-stack" />
+            </span>
+            <div className="text-right flex-1">
+                <div className="text-[#6886c5] font-[bold] mb-3">Show</div>
+                <input 
+                    type="text" 
+                    className="text-[32px] max-w-[170px] flex-1 inline-block text-[#0a97b0] font-[bold] border-[none] bg-transparent outline-none text-right" 
+                    disabled 
+                    value={inputValue/8} 
+                />
+            </div>
+        </div>
+    )
+}
+
+export default UnitConverter

src/components/NetworkUnitConverter/index.ts

@@ -0,0 +1,5 @@
+import UnitControl from "@/components/NetworkUnitConverter/UnitControl"
+import UnitConverter from "@/components/NetworkUnitConverter/UnitConverter"
+import CardFooter from "@/components/NetworkUnitConverter/CardFooter"
+
+export { UnitControl, UnitConverter, CardFooter }

src/main.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "@/App"
 import "./main.css"
+import "./utils/fontAwesome"
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
     <React.StrictMode>

src/pages/Home.tsx

@@ -6,10 +6,6 @@ import { useNavigate } from "react-router-dom"
 const Home = ()=>{
     const router = useNavigate()
 
-    function toButton(){
-        router("/button")
-    }
-
     return (
         <>
             <div className="grid place-content-center h-screen text-center text-lg">
@@ -29,7 +25,16 @@ const Home = ()=>{
                 <p className="opacity-40">
                     Click on the Vite and React logos to learn more
                 </p>
-                <button onClick={toButton} className="bg-blue-400 p-4 text-lg my-2 rounded-md text-white">Redirect to Button</button>
+                <button 
+                    onClick={() => router("/button")} 
+                    className="bg-blue-400 p-4 text-lg my-2 rounded-md text-white"
+                >Redirect to Button
+                </button>
+                <button
+                    onClick={() => router("/network-unit-converter")}
+                    className="bg-green-400 p-4 text-lg my-2 rounded-md text-white"
+                >Redirect to Network Unit Converter
+                </button>
             </div>
         </>
     )

src/pages/NetworkUnitConverter.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react"
+import { UnitControl, UnitConverter, CardFooter } from "@/components/NetworkUnitConverter"
+
+const NetworkUnitConverter = ()=>{
+    const [inputValue, setInputValue] = useState(0)
+    const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>)=>{
+        const {value} = e.target
+        setInputValue(Number(value))
+    }
+
+    return (
+        <div className="flex flex-col shadow-[1px_1px_10px_1px_#134c76] min-w-[440px] min-h-[320px] rounded-[7px] bg-white">
+            <div className="flex items-center justify-center min-h-[50px] bg-[#0a97b0] text-[white] text-xl rounded-t-md">Network Speed Converter</div>
+            <div className="flex-1 p-[30px]">
+                <UnitControl />
+
+                <UnitConverter 
+                    inputValue={inputValue}
+                    onChangeInput={onChangeInput}
+                />
+            </div>
+            <CardFooter inputValue={inputValue}/>
+        </div>
+    )
+}
+
+export default NetworkUnitConverter

src/router/index.tsx

@@ -3,6 +3,7 @@ import { createHashRouter, Navigate } from "react-router-dom"
 
 const Home = lazy(()=>import("@/pages/Home"))
 const Button = lazy(()=>import("@/pages/Button"))
+const NetworkUnitConverter = lazy(()=>import("@/pages/NetworkUnitConverter"))
 
 export default createHashRouter([
     {
@@ -16,5 +17,9 @@ export default createHashRouter([
     {
         path: "/button",
         element: <Button />
+    },
+    {
+        path: "/network-unit-converter",
+        element: <NetworkUnitConverter />
     }
 ])

src/styles/NetworkUnitConverter.module.css

@@ -0,0 +1,10 @@
+/**
+ * Design Credit:
+ * https://dribbble.com/shots/4241423-Exchanger-landing-page
+**/
+
+.icon-color {
+  color: #6886c5;
+}
+
+

src/utils/fontAwesome.ts

@@ -0,0 +1,8 @@
+import { library } from "@fortawesome/fontawesome-svg-core"
+import { fab } from "@fortawesome/free-brands-svg-icons"
+import { fas } from "@fortawesome/free-solid-svg-icons"
+import { far } from "@fortawesome/free-regular-svg-icons"
+
+library.add(fab, fas, far)
+
+export default library

yarn.lock

@@ -377,6 +377,46 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.42.0.tgz#484a1d638de2911e6f5a30c12f49c7e4a3270fb6"
   integrity sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-svg-core@1.2.36":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-brands-svg-icons@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733"
+  integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-regular-svg-icons@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
+  integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-solid-svg-icons@5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"