edit some code

KINGALVI · KINGALVI · commit ddc3fe6f6d13 · 2025-05-21T18:14:05.000+02:00
diff --git a/src/Router/React_Router.jsx b/src/Router/React_Router.jsx
@@ -6,26 +6,26 @@ import Data from "../components/Main-Section/Data/Data";
 
 const React_Router = () => {
 
-    // how to create path and path component in react router
+    // how to create path and path component in react router . for that we havet to use react router createBrowserRouter function .
     const router = createBrowserRouter([
 
         {
-            //path declaration
+            //the path declaration . for that we have to use path react router keywords .
             path: "/",
-            //path component
+            //the path component . for that we have to use element react router keywords .
             element: <Main />,
-            //child path and path component declaration
+            // the child path and path component declaration . sometimes we need some dynamic change in website without reaload the the website , for that we have to use react router children keywords .
             children: [
                 {
-                    //child path
+                    // the child path
                     path: "About",
-                    //child path component
+                    // the child path component
                     element: <About />
                 },
                 {
-                    //child path
+                    // the child path
                     path: "Data",
-                    //child path component
+                    // the child path component
                     element: <Data />
                 }
             ]
@@ -35,7 +35,7 @@ const React_Router = () => {
 
     return (
         <>
-            {/* Call react-router */}
+            {/* Call react-router using RouterProvider . */}
             <RouterProvider router={router} />
         </>
     );
diff --git a/src/components/Header-Section/Header.jsx b/src/components/Header-Section/Header.jsx
@@ -1,3 +1,5 @@
+import { Link } from "react-router-dom";
+
 const Header = () => {
     return (
         <>
@@ -10,8 +12,8 @@ const Header = () => {
                         <ul
                             tabIndex={0}
                             className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
-                            <li><a href="../Main-Section/About/About.jsx">About</a></li>
-                            <li><a href="../Main-Section/Data/Data.jsx">Data</a></li>
+                            <li><Link to="About">About</Link></li>
+                            <li><Link to="Data">Data</Link></li>
                         </ul>
                     </div>
                     <a className="btn btn-ghost text-xl">KING ALVI</a>
@@ -23,8 +25,11 @@ const Header = () => {
                     </ul>
                 </div>
                 <div className="navbar-end">
-                    <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
-                    <span className="pl-3"><a className="btn">Search</a></span>
+                    <input
+                        type="text"
+                        placeholder="Search"
+                        className="input input-bordered join-item w-52" />
+                    <button className="btn btn-primary join-item">Search</button>
                 </div>
             </div>
         </>
diff --git a/src/components/Main-Section/Main/Main.jsx b/src/components/Main-Section/Main/Main.jsx
@@ -6,6 +6,7 @@ const Main = () => {
     return (
         <div>
             <Header />
+            {/* the dynamic change will apper here when the path change . we have to use react router outlet for that . */}
             <Outlet />
             <Footer />
         </div>
