styling

src/components/category/MainImg.tsx

@@ -1,32 +1,56 @@
 // Modules
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { v4 as uuidv4 } from "uuid";
 
-interface IProps {
-  img: string;
-}
+// Types
+import { RootState } from "../../types/store.types";
 
-const MainImg = ({ img }: IProps) => {
+const MainImg = () => {
+  // redux
+  const data = useSelector<RootState, RootState["newsScroll"]["data"]>(
+    (state) => state.newsScroll.data
+  );
   return (
-    <Link to={"/news/123"} className="main-img">
+    <>
+      {data.length > 0 ? (
+        data[0].id > -1 ? (
+          <Link to={`/news/${data[0].id}`} className="main-img">
             <LazyLoadImage
-        src={img}
-        alt={img}
+              src={
+                (data[0].featured_images.length > 0
+                  ? data[0].featured_images[0]
+                  : "") as string
+              }
+              alt={
+                (data[0].featured_images.length > 0
+                  ? data[0].featured_images[0]
+                  : "") as string
+              }
               useIntersectionObserver
               effect="blur"
             />
 
             <div className="main-img-overlay">
-        <h2>
-          Полезная информация для поступающих на программы подготовки научных
-          кадров в Туркменистане
-        </h2>
-        <p>
-          <span>Политика</span>
-          <span>12.01.2023</span>
+              <h2>{data[0].title}</h2>
+              <div className="main-img-overlay-wrapper">
+                <p className="cats">
+                  {data[0].categories.map((category) => {
+                    return <span key={uuidv4()}>{category.name}</span>;
+                  })}
                 </p>
+                <span className="date">{data[0].published_at}</span>
+              </div>
             </div>
           </Link>
+        ) : (
+          ""
+        )
+      ) : (
+        ""
+      )}
+    </>
   );
 };
 

src/components/global/NewsScroll.tsx

@@ -34,25 +34,40 @@ const NewsScroll = ({ title, category }: Props) => {
   const [lastLanguage, setLastLanguage] = useState<string>(language);
 
   // redux
-  const data = useSelector<RootState, RootState["newsScroll"]["data"]>(
+  const rawData = useSelector<RootState, RootState["newsScroll"]["data"]>(
     (state) => state.newsScroll.data
   );
   const dispatch = useDispatch();
 
   useEffect(() => {
-    api.get(data, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
+    api.get(rawData, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
     setLastLanguage(language);
   }, [category]);
 
   useEffect(() => {
-    if (data.length > 0) {
-      if (!((data as IPostsData[])[0].id > -1 && lastLanguage === language)) {
-        api.get(data, (data: IPostsData[]) => dispatch(setNewsScroll(data)));
+    if (rawData.length > 0) {
+      if (
+        !((rawData as IPostsData[])[0].id > -1 && lastLanguage === language)
+      ) {
+        api.get(rawData, (rawData: IPostsData[]) =>
+          dispatch(setNewsScroll(rawData))
+        );
         setLastLanguage(language);
       }
     }
   }, [language, lastLanguage]);
 
+  const [filteredData, setFilteredData] = useState<IPostsData[]>(rawData);
+
+  useEffect(() => {
+    const filtered = rawData.filter((el, index) => {
+      if (index > 0) {
+        return el;
+      }
+    });
+    setFilteredData(filtered);
+  }, [rawData]);
+
   return (
     <div className="news-scroll">
       <SectionTitle title="Лента новостей" />
@@ -64,9 +79,9 @@ const NewsScroll = ({ title, category }: Props) => {
           />
         ) : null}
         <div className="news-scroll-inner">
-          {data.length > 0 ? (
-            (data as IPostsData[])[0].id > -1 ? (
-              (data as IPostsData[]).map((dataEl) => {
+          {filteredData.length > 0 ? (
+            (filteredData as IPostsData[])[0].id > -1 ? (
+              (filteredData as IPostsData[]).map((dataEl, index) => {
                 return (
                   <News
                     key={uuidv4()}

src/pages/Category.tsx

@@ -14,7 +14,7 @@ const Category = () => {
       <div className="container">
         <div className="category-inner">
           <div className="category-left">
-            <MainImg img={Placeholder} />
+            <MainImg />
             <NewsScroll title={false} category={parseInt(category as string)} />
           </div>
           <div className="category-right">

src/styles/_category.scss

@@ -11,7 +11,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 50%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
   z-index: 2;
   pointer-events: none;
   display: flex;
@@ -25,6 +29,10 @@
     font-size: 2.4rem;
   }
 
+  .date {
+    text-align: right;
+  }
+
   p {
     display: flex;
     align-items: center;
@@ -40,6 +48,23 @@
       }
     }
   }
+
+  .cats {
+    display: flex;
+    gap: 1.6rem;
+    width: 100%;
+    justify-content: flex-start !important;
+
+    span {
+      width: fit-content;
+    }
+  }
+}
+
+.main-img-overlay-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 3.2rem;
 }
 
 .category-inner {

src/styles/_news.scss

@@ -41,7 +41,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1.6rem;
+  column-gap: 1.6rem;
+  row-gap: 0.8rem;
+  flex-wrap: wrap;
 }
 
 .news-link {