fix(nav): Enhanced prev/next button functionality

PRABHAT1SHUKLA · Oct 1, 2023 · e109aed · e109aed
1 parent 9da6c30
commit e109aed
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/MainSection.js b/src/MainSection.js
@@ -77,6 +77,13 @@ const MainSection = () => {
       });
   };
 
+  const navigationHandler = (page) => {
+    setPage(page);
+    document.querySelector("#image_1").scrollIntoView({
+      behavior: "smooth",
+    });
+  };
+
   useEffect(() => {
     fetchImages();
   }, [page]);
@@ -132,10 +139,11 @@ const MainSection = () => {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 p-5">
-        {images &&images.map((image, index) => {
+        {images && images.map((image, index) => {
           return (
             <ImageCard
               key={image?.id}
+              id={image && `image_${index + 1}`}
               url={image?.urls?.small}
               download={image?.urls?.full}
             />
@@ -146,15 +154,15 @@ const MainSection = () => {
       <div className="flex justify-center mt-8">
         {page > 1 && (
           <button
-            onClick={() => setPage(page - 1)}
+            onClick={() => navigationHandler(page - 1)}
             className=" p-1 px-2 bg-violet-500 text-white w-fit rounded-md"
           >
             Previous
           </button>
         )}
         {page < totalPages && (
           <button
-            onClick={() => setPage(page + 1)}
+            onClick={() => navigationHandler(page + 1)}
             className="p-1 px-2 mx-6  bg-violet-500 text-white w-fit rounded-md"
           >
             Next

diff --git a/src/components/menu/ImageCard/ImageCard.js b/src/components/menu/ImageCard/ImageCard.js
@@ -1,4 +1,4 @@
-const ImageCard = ({ url, download }) => {
+const ImageCard = ({ url, download, id }) => {
   // Function to Download Image
   const downloadImage = async () => {
     try {
@@ -37,6 +37,7 @@ const ImageCard = ({ url, download }) => {
     <div className="relative group w-full md:w-80 h-72 rounded-md overflow-hidden shadow-lg hover:shadow-md transform transition-transform hover:scale-105">
       <img
         src={url}
+        id={id}
         alt="Image"
         className="w-full h-full object-cover transform hover:scale-105 duration-200"
       />