Make mobile responsive

Author: woojiahao

src/App.tsx

@@ -1,16 +1,24 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
 
 function App() {
   const navigate = useNavigate()
-  const usernameRef = useRef<HTMLInputElement>(null);
+  const [username, setUsername] = useState<string>("");
+
+  const usernameInput = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setUsername(event.currentTarget.value)
+  }, [])
 
   const searchUser = useCallback(() => {
-    navigate(`/dashboard/${usernameRef?.current?.value}`)
-  }, [navigate, usernameRef])
+    navigate(`/dashboard/${username}`)
+  }, [navigate, username])
+
+  const isSearchDisabled = useMemo(() => {
+    return username.trim() === ""
+  }, [username])
 
   return (
-    <div className="w-[40%] my-28 mx-auto">
+    <div className="lg:w-[40%] my-28 mx-auto md:w-[60%] w-[80%]">
       <div className="text-center mb-6">
         <h1 className="text-4xl font-bold mb-4">Git Mastery Progress Dashboard</h1>
         <p className="text-gray-700 font-semibold">Enter your Github username to find your progress!</p>
@@ -19,10 +27,10 @@ function App() {
         <div className="flex items-center justify-center p-4 border-r border-r-gray-700">
           <span className="font-bold">@</span>
         </div>
-        <input ref={usernameRef} className="font-semibold w-full px-4 focus:outline-none" placeholder="Your Github username" type="text" />
+        <input onChange={usernameInput} className="font-semibold w-full px-4 focus:outline-none" placeholder="Your Github username" type="text" />
       </div>
       <div className="text-center mt-4">
-        <button type="button" onClick={searchUser} className="hover:cursor-pointer hover:bg-gray-600 hover:text-white transition border-1 rounded-sm px-4 py-2 font-semibold">View Progress →</button>
+        <button type="button" onClick={searchUser} disabled={isSearchDisabled} className="enabled:hover:cursor-pointer enabled:hover:bg-gray-600 enabled:hover:text-white transition border-1 rounded-sm px-4 py-2 font-semibold disabled:border-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed">View Progress →</button>
       </div>
     </div>
   )

src/Dashboard.tsx

@@ -66,10 +66,8 @@ function Dashboard() {
     return sortedGroups
   }, [problemSets, isProblemSetsLoading, parsedUserProgress])
 
-  console.log(problemSetGroups)
-
   return (
-    <div className="w-[40%] my-28 mx-auto">
+    <div className="lg:w-[40%] my-28 mx-auto md:w-[60%] w-[80%]">
       <h3 className="text-2xl font-bold mb-4">Git Mastery Progress Dashboard</h3>
       <div className="mb-6">
         <Link to="/" className="text-gray-500 italic mb-2">← Back to search</Link>