Update the React Router Project

Author: bhattidev

08_reactRouter/src/components/Contact/Contact.jsx

@@ -18,112 +18,112 @@ export default function Contact() {
                 <svg
                   fill='none'
                   stroke='currentColor'
-                  stroke-linecap='round'
-                  stroke-linejoin='round'
-                  stroke-width='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth='1.5'
                   viewBox='0 0 24 24'
                   className='w-8 h-8 text-gray-500'
                 >
                   <path
-                    stroke-linecap='round'
-                    stroke-linejoin='round'
-                    stroke-width='1.5'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth='1.5'
                     d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'
                   />
                   <path
-                    stroke-linecap='round'
-                    stroke-linejoin='round'
-                    stroke-width='1.5'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth='1.5'
                     d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'
                   />
                 </svg>
                 <div className='ml-4 text-md tracking-wide font-semibold w-40'>
-                  Acme Inc, Street, State, Postal Code
+                  Wah Cantt , Rawalpandi
                 </div>
               </div>
 
               <div className='flex items-center mt-4 text-gray-600'>
                 <svg
                   fill='none'
                   stroke='currentColor'
-                  stroke-linecap='round'
-                  stroke-linejoin='round'
-                  stroke-width='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth='1.5'
                   viewBox='0 0 24 24'
                   className='w-8 h-8 text-gray-500'
                 >
                   <path
-                    stroke-linecap='round'
-                    stroke-linejoin='round'
-                    stroke-width='1.5'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth='1.5'
                     d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'
                   />
                 </svg>
                 <div className='ml-4 text-md tracking-wide font-semibold w-40'>
-                  +44 1234567890
+                  +92-3106145445
                 </div>
               </div>
 
               <div className='flex items-center mt-2 text-gray-600'>
                 <svg
                   fill='none'
                   stroke='currentColor'
-                  stroke-linecap='round'
-                  stroke-linejoin='round'
-                  stroke-width='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth='1.5'
                   viewBox='0 0 24 24'
                   className='w-8 h-8 text-gray-500'
                 >
                   <path
-                    stroke-linecap='round'
-                    stroke-linejoin='round'
-                    stroke-width='1.5'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth='1.5'
                     d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
                   />
                 </svg>
                 <div className='ml-4 text-md tracking-wide font-semibold w-40'>
-                  [email protected]
+                  [email protected]
                 </div>
               </div>
             </div>
 
             <form className='p-6 flex flex-col justify-center'>
               <div className='flex flex-col'>
-                <label for='name' className='hidden'>
+                <label htmlFor='name' className='hidden'>
                   Full Name
                 </label>
                 <input
                   type='name'
                   name='name'
                   id='name'
                   placeholder='Full Name'
-                  className='w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none'
+                  className='w-full mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none'
                 />
               </div>
 
               <div className='flex flex-col mt-2'>
-                <label for='email' className='hidden'>
+                <label htmlFor='email' className='hidden'>
                   Email
                 </label>
                 <input
                   type='email'
                   name='email'
                   id='email'
                   placeholder='Email'
-                  className='w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none'
+                  className='w-full mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none'
                 />
               </div>
 
               <div className='flex flex-col mt-2'>
-                <label for='tel' className='hidden'>
+                <label htmlFor='tel' className='hidden'>
                   Number
                 </label>
                 <input
                   type='tel'
                   name='tel'
                   id='tel'
                   placeholder='Telephone Number'
-                  className='w-100 mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none'
+                  className='w-full mt-2 py-3 px-3 rounded-lg bg-white border border-gray-400 text-gray-800 font-semibold focus:border-orange-500 focus:outline-none'
                 />
               </div>
 

08_reactRouter/src/components/GitHub/GitHub.jsx

@@ -1,14 +1,34 @@
-import React, { useEffect } from 'react';
+// import React, { useEffect, useState } from 'react';
+import { useLoaderData } from 'react-router-dom';
 
 function GitHub() {
-  useEffect(() => {
-    fetch('https://api.github.com/users/imran5244');
-  }, []);
+  const data = useLoaderData();
+  //   const [data, setData] = useState([]);
+  //   useEffect(() => {
+  //     fetch('https://api.github.com/users/imran5244')
+  //       .then((Response) => Response.json())
+  //       .then((data) => {
+  //         setData(data);
+  //       });
+  //   }, []);
   return (
-    <div className='text-center m-4 bg-gray-600 text-white p-4 text-3xl '>
-      GitHub Followers
+    <div className='text-center mx-auto mt-8 bg-gray-800 text-white p-8 rounded-lg shadow-lg max-w-md'>
+      <img
+        src={data.avatar_url}
+        alt='GitHub Profile'
+        className='rounded-full mb-4 mx-auto'
+        style={{ width: '150px', height: '150px' }}
+      />
+      <h2 className='text-3xl font-semibold mb-2'>
+        GitHub Followers: {data.followers}
+      </h2>
     </div>
   );
 }
 
 export default GitHub;
+
+export const githubInfoLoader = async () => {
+  const respone = await fetch('https://api.github.com/users/imran5244');
+  return respone.json();
+};

08_reactRouter/src/components/Header/Header.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link, NavLink } from 'react-router-dom';
 export default function Header() {
   return (
@@ -79,18 +78,6 @@ export default function Header() {
                   GitHub
                 </NavLink>
               </li>
-              <li>
-                <NavLink
-                  to='/user'
-                  className={({ isActive }) =>
-                    `block py-2 pr-4 pl-3 duration-200 
-                    ${isActive ? 'text-orange-700' : 'text-gray-700'} 
-                    border-b border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
-                  }
-                >
-                  User
-                </NavLink>
-              </li>
             </ul>
           </div>
         </div>

08_reactRouter/src/components/User/User.jsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import { useParams } from 'react-router-dom';
 
 function User() {
   const { userid } = useParams();
+
   return (
     <div className='bg-gray-600 text-white text-3xl p-4 text-center '>
-      User:{userid}
+      User: {userid}
     </div>
   );
 }

08_reactRouter/src/main.jsx

@@ -12,7 +12,7 @@ import Home from './components/Home/Home.jsx';
 import About from './components/About/About.jsx';
 import Contact from './components/Contact/Contact.jsx';
 import User from './components/User/User.jsx';
-import GitHub from './components/GitHub/GitHub.jsx';
+import GitHub, { githubInfoLoader } from './components/GitHub/GitHub.jsx';
 
 // const router = createBrowserRouter([
 //   {
@@ -41,8 +41,9 @@ const router = createBrowserRouter(
       <Route path='' element={<Home />} />
       <Route path='about' element={<About />} />
       <Route path='contact' element={<Contact />} />
-      <Route path='user/ :userid' element={<User />} />
-      <Route path='github' element={<GitHub />} />
+      <Route path='/user/:userid' component={User} />
+
+      <Route loader={githubInfoLoader} path='github' element={<GitHub />} />
     </Route>
   )
 );