user image navbar made

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.2.6",
     "@egjs/grid": "^1.14.2",
     "@reduxjs/toolkit": "^1.9.7",
+    "antd": "^5.11.0",
     "axios": "^1.6.0",
     "lodash.debounce": "^4.0.8",
     "masonry-layout": "^4.2.2",

src/App.jsx

@@ -2,8 +2,10 @@ import React, { useEffect } from 'react';
 import Home from "./Pages/Home.jsx";
 import SharedLayer from "./Pages/SharedLayer.jsx";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
-import {axiosClient} from "./Axios.js";
-import axios from "axios";
+import UserPhotos from "./Componnent/UserComponenet/UserPhotos.jsx";
+import UserLikes from "./Componnent/UserComponenet/UserLikes.jsx";
+import UserCollection from "./Componnent/UserComponenet/UserCollection.jsx";
+import ProfileLayout from "./Pages/ProfileLayout.jsx";
 
 const App = () => {
 
@@ -16,6 +18,11 @@ const App = () => {
                 <Routes>
                     <Route  element={ <SharedLayer/>} >
                         <Route path="/" index  element={<Home/>}/>
+                        <Route path=":userName" element={<ProfileLayout/>}>
+                            <Route path="photos" element={<UserPhotos/>}/>
+                            <Route path="likes" element={<UserLikes/>}/>
+                            <Route path="collection" element={<UserCollection/>}/>
+                         </Route>
                         <Route  path="*" element={<h1>error page</h1>}/>
                     </Route>
                 </Routes>

src/Componnent/CardGrid.jsx

@@ -1,4 +1,5 @@
 import { useState} from "react";
+import {Link} from "react-router-dom";
 
 export const CardGrid = ({images}) => {
 
@@ -17,10 +18,10 @@ export const CardGrid = ({images}) => {
         };
 
         const openModal = () => {
-            setTimeout(() => setShowModal(true), 600)
+            setTimeout(() => setShowModal(true), 800)
         };
         const closeModal = () => {
-            setTimeout(() => setShowModal(false), 500)
+            setTimeout(() => setShowModal(false), 2000)
 
         };
         const grids = [];
@@ -119,10 +120,12 @@ export const CardGrid = ({images}) => {
                                              className="  rounded w-20 h-20 p-2 pb-0"/>
                                     </div>
                                     <div className="text-center p-3  text-white">
-                                        <a href={userName} target="_blank">
+
+                                        <Link to={`/${userName}`} target="_blank" rel="noopener noreferrer">
                                             <button  className="px-20 py-2 m-2 text-center  rounded-md bg-sky-600 "> view profile</button>
 
-                                        </a>
+                                        </Link>
+
                                     </div>
 
                                 </div>

src/Componnent/CardList.jsx

@@ -10,7 +10,7 @@ const CardList = () => {
     const dispatch = useDispatch();
     const {data, page, isLoading, error} = useSelector((state) => state.api);
 
-    console.log(data, 'response data');
+    // console.log(data, 'response data');
     // console.log(page, 'page number');
 
     useEffect(() => {
@@ -50,7 +50,7 @@ const CardList = () => {
     };
 
     return (
-        <div className=" container mx-auto">
+        <div className=" container mx-auto ">
 
             {isLoading ? 'is loding' : ''}
             <div className="w-full  my-5 mx-auto xs:columns-1 sm:columns-2 md:columns-3 lg:columns-3 gap-1">

src/Componnent/Featured.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Featured = () => {
+    return (
+        <div>
+
+        </div>
+    );
+};
+
+export default Featured;

src/Componnent/Navbar.jsx

@@ -1,9 +1,26 @@
+import SearchBar from "./SearchBar.jsx";
+import SearchAnt from "./SearchAnt.jsx";
+import Notification from "./NavbarNotification.jsx";
+import NavbarProfile from "./NavbarProfile.jsx";
+import NavbarNotification from "./NavbarNotification.jsx";
+import NavbarMenu from "./NavbarMenu.jsx";
 
 const Navbar = () => {
     return (
         <div>
-            <div >
-            heather
+            <div className="flex justify-start items-center  mx-2  " >
+
+                <div className="  w-18 h-18 md:m-2">
+                    <img src="/photos.svg"/>
+                </div>
+
+                <SearchAnt />
+                <button className="p-2 border border-zinc-500 text-zinc-500 hidden md:inline mx-1 rounded-xl"> submit a photo</button>
+                    <NavbarNotification/>
+
+                <NavbarProfile/>
+                <NavbarMenu/>
+
             </div>
         </div>
     );

src/Componnent/NavbarCategory.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Link} from "react-router-dom";
+
+const NavbarCategory = () => {
+    return (
+
+        <div className="flex justify-start items-center m-3  text-zinc-500 md:text-xl divide-x-2 divide-black overflow-x-auto 	">
+            <div className="flex justify-start items-center   space-x-2  ">
+                    <Link to={'/'} className="p-2" >Editoral</Link>
+                    <Link to={'/'} className="p-2">Following</Link>
+            </div>
+            <div className="flex justify-start items-center ms-2 flex-nowrap ">
+                <Link to={'/'} className="p-2" >Editoral</Link>
+                <Link to={'/'} className="p-2" >Editoral</Link>
+                <Link to={'/'} className="p-2" >Editoral</Link>
+                <Link to={'/'} className="p-2" >Editoral</Link>
+                <Link to={'/'} className="p-2" >Editoral</Link>
+                <Link to={'/'} className="p-2" >Editoral</Link>
+                <Link to={'/'} className="p-2" >Editoral</Link>
+
+
+
+            </div>
+        </div>
+    );
+};
+
+export default NavbarCategory;

src/Componnent/NavbarMenu.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { Button, Popover } from 'antd';
+const App = () => {
+    const [open, setOpen] = useState(false);
+    const hide = () => {
+        setOpen(false);
+    };
+    const handleOpenChange = (newOpen) => {
+        setOpen(newOpen);
+    };
+    const content=
+        <div className="flex justify-center items-start m-3 text-xl gap-4 ">
+
+            <div className="px-2 m-1 flex-col space-y-3 space-x-2">
+                <div className="font-bold text-xl">
+                    <img src="/company.svg" className="inline pr-2"/>
+                    Company</div>
+                <div>About</div>
+                <div>History</div>
+                <div>join the team</div>
+                <div> press</div>
+                <div> contact</div>
+                <div> help center</div>
+                <div> socials</div>
+
+            </div>
+
+            <div className="px-2 m-1 flex-col space-y-3 space-x-2">
+
+                <div className="font-bold text-xl">
+                    <img src="/product-carousel-svgrepo-com.svg" className="inline pr-2"/>
+
+                    Product</div>
+                <div>Developers/Api</div>
+                <div>Gallery Dataset</div>
+                <div>Gallery for ios</div>
+                <div> Apps & Plugin</div>
+
+
+            </div>
+            <div className="px-2 m-1 flex-col space-y-3 space-x-2">
+
+                <div className="font-bold text-xl">
+                    <img src="/community.svg" className="inline pr-2"/>
+
+                    Community</div>
+                <div>Become Contributor</div>
+                <div>Topics</div>
+                <div>Collections</div>
+                <div> Trends</div>
+                <div> Gallery Awards</div>
+                <div> status</div>
+
+            </div>
+
+        </div>
+    return (
+
+
+        <Popover
+            color={""}
+            placement="bottomRight"
+            content={content}
+            trigger="click"
+            open={open}
+            onOpenChange={handleOpenChange}
+        >
+            <img src="/menu.svg" className="px-2"/>
+        </Popover>
+    );
+};
+export default App;