news page pagination added

src/assets/icons/arrow.svg

@@ -1,3 +1,3 @@
-<svg width="17" height="8" viewBox="0 0 17 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.3536 4.35355C16.5488 4.15829 16.5488 3.84171 16.3536 3.64645L13.1716 0.464466C12.9763 0.269204 12.6597 0.269204 12.4645 0.464466C12.2692 0.659728 12.2692 0.976311 12.4645 1.17157L15.2929 4L12.4645 6.82843C12.2692 7.02369 12.2692 7.34027 12.4645 7.53553C12.6597 7.7308 12.9763 7.7308 13.1716 7.53553L16.3536 4.35355ZM0 4.5H16V3.5H0V4.5Z" fill="#05172D"/>
+<svg width="17" height="8" viewBox="0 0 17 8" fill="" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.3536 4.35355C16.5488 4.15829 16.5488 3.84171 16.3536 3.64645L13.1716 0.464466C12.9763 0.269204 12.6597 0.269204 12.4645 0.464466C12.2692 0.659728 12.2692 0.976311 12.4645 1.17157L15.2929 4L12.4645 6.82843C12.2692 7.02369 12.2692 7.34027 12.4645 7.53553C12.6597 7.7308 12.9763 7.7308 13.1716 7.53553L16.3536 4.35355ZM0 4.5H16V3.5H0V4.5Z" fill=""/>
 </svg>

src/assets/styles/_news.scss

@@ -14,6 +14,42 @@
   gap: 1.6rem;
 }
 
+.pagination {
+  font-size: 1.8rem;
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  margin-top: 4.8rem;
+
+  .arr-left {
+    transform: rotate(180deg);
+  }
+}
+
+.pagination-arrow {
+  padding: 1.6rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+  border-radius: 0.8rem;
+
+  &:hover {
+    background: rgb(247, 247, 247);
+  }
+
+  &:disabled {
+    &:hover {
+      background: none;
+      cursor: default;
+    }
+    .arr-pagination-svg {
+      fill: $base-gray;
+    }
+  }
+}
+
 @media (max-width: 1200px) {
   .news-post-wrapper {
     grid-template-columns: repeat(2, 1fr);

src/pages/NewsPage.jsx

@@ -6,18 +6,24 @@ import { dateReverse } from "../helpers/functions";
 // Components
 import SectionTitle from "../components/SectionTitle";
 import NewsPost from "../components/NewsPost";
+// Icons
+import { ReactComponent as Arrow } from "../assets/icons/arrow.svg";
 
 const NewsPage = ({ lang, setPostId, postsData, setPostsData }) => {
+  const [url, setUrl] = useState("http://tmex.gov.tm:8765/api/news");
+
   useEffect(() => {
     // News fetch
-    const PostsData = new Api(
-      "http://tmex.gov.tm:8765/api/news",
-      postsData,
-      setPostsData
-    ).get({
+    const PostsData = new Api(url, postsData, setPostsData).get({
       "X-Localization": lang,
     });
-  }, [lang]);
+  }, [lang, url]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      window.scrollTo(0, 0);
+    }, 300);
+  }, [url]);
 
   return (
     <main>
@@ -42,6 +48,41 @@ const NewsPage = ({ lang, setPostId, postsData, setPostsData }) => {
                 })
               : null}
           </div>
+          {postsData ? (
+            <div className="pagination">
+              <button
+                disabled={!postsData.meta.pagination.links.previous}
+                className={"arr-left pagination-arrow"}
+                onClick={() => {
+                  postsData
+                    ? postsData.meta.pagination.links.previous
+                      ? setUrl(postsData.meta.pagination.links.previous)
+                      : null
+                    : null;
+                }}
+              >
+                <Arrow className="arr-pagination-svg" />
+              </button>
+              <div className="pagination-count">
+                {postsData
+                  ? `${postsData.meta.pagination.current_page} / ${postsData.meta.pagination.total_pages}`
+                  : "1 / 1"}
+              </div>
+              <button
+                disabled={!postsData.meta.pagination.links.next}
+                className={"arr-right pagination-arrow"}
+                onClick={() => {
+                  postsData
+                    ? postsData.meta.pagination.links.next
+                      ? setUrl(postsData.meta.pagination.links.next)
+                      : null
+                    : null;
+                }}
+              >
+                <Arrow className="arr-pagination-svg" />
+              </button>
+            </div>
+          ) : null}
         </div>
       </div>
     </main>