fixed bugs

src/widgets/NewsList/NewsList.scss

@@ -0,0 +1,38 @@
+.news-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 30px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .news-list {
+    ul {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .news-list {
+    gap: 30px;
+
+    ul {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .news-list {
+    gap: 20px;
+
+    ul {
+      grid-template-columns: 1fr;
+    }
+  }
+}

src/widgets/NewsList/NewsList.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import "./NewsList.scss";
+import NewsCard from "@/entities/NewsCard/NewsCard";
+import { useNewsStore } from "./newsStore";
+import { useEffect, useState } from "react";
+import Pagination from "@/features/Pagination/Pagination";
+
+interface INewsListProps {
+  searchParams: {
+    ["страница-новостей"]: string;
+  };
+}
+
+const NewsList: React.FC<INewsListProps> = ({
+  searchParams,
+}: INewsListProps) => {
+  const [activePage, setActivePage] = useState<number>(
+    +searchParams["страница-новостей"] || 1
+  );
+  const { data: news, getNews, isLoading, error } = useNewsStore();
+
+  useEffect(() => {
+    getNews(activePage);
+  }, []);
+  return (
+    <div className="news-list">
+      <ul>
+        {news.results.map((news) => (
+          <li key={news.id}>
+            <NewsCard
+              id={news.id}
+              title={news.title}
+              description={news.description}
+              image={news.image}
+              date={news.created_at}
+            />
+          </li>
+        ))}
+      </ul>
+      <Pagination
+        activePage={activePage}
+        setActivePage={setActivePage}
+        prev={news.previous}
+        next={news.next}
+        count={news.count as number}
+        current_count={news.results.length}
+        limit={20}
+      />
+    </div>
+  );
+};
+
+export default NewsList;

src/widgets/NewsList/newsStore.ts

@@ -0,0 +1,38 @@
+import { apiInstance } from "@/shared/config/apiConfig";
+import { IFetch } from "@/shared/types/fetch-type";
+import { INewsList } from "@/shared/types/news-type";
+import { AxiosError } from "axios";
+import { create } from "zustand";
+
+interface useNewsStore extends IFetch {
+  data: INewsList;
+  getNews: (page: number) => void;
+}
+
+export const useNewsStore = create<useNewsStore>((set) => ({
+  data: {
+    count: 0,
+    previous: null,
+    next: null,
+    results: [],
+  },
+  error: "",
+  isLoading: false,
+  getNews: async (page: number) => {
+    try {
+      set({ isLoading: true });
+
+      const res = await apiInstance.get(`/news/?page${page}`);
+
+      set({ data: res.data });
+    } catch (error: unknown) {
+      if (error instanceof AxiosError) {
+        set({ error: error.message });
+      } else {
+        set({ error: "An error ocured" });
+      }
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+}));