category main img

src/components/category/MainImg.tsx

@@ -1,59 +0,0 @@
-// 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";
-import placeholder from "../../assets/images/placeholder.webp";
-
-// Types
-import { RootState } from "../../types/store.types";
-
-const MainImg = () => {
-  // redux
-  const data = useSelector<RootState, RootState["newsScroll"]["data"]>(
-    (state) => state.newsScroll.data
-  );
-  return (
-    <>
-      {data.length > 0 ? (
-        data[0].id > -1 ? (
-          <Link to={`/news/${data[0].id}`} className="main-img">
-            <LazyLoadImage
-              placeholderSrc={placeholder}
-              src={
-                (data[0].featured_images.length > 0
-                  ? data[0].featured_images[0].path
-                  : "") as string
-              }
-              alt={
-                (data[0].featured_images.length > 0
-                  ? data[0].featured_images[0].file_name
-                  : "") as string
-              }
-              useIntersectionObserver
-              effect="opacity"
-            />
-
-            <div className="main-img-overlay">
-              <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>
-        ) : (
-          ""
-        )
-      ) : (
-        ""
-      )}
-    </>
-  );
-};
-
-export default MainImg;

src/pages/Category.tsx

@@ -1,14 +1,22 @@
 // Modules
 import { motion } from "framer-motion";
+import { useSelector } from "react-redux";
 
 // Components
 import { useParams } from "react-router-dom";
 import Aside from "../components/aside/Aside";
 import NewsScroll from "../components/global/NewsScroll";
-import MainImg from "../components/category/MainImg";
+import ContentItem from "../components/main/ContentItem";
+
+// Types
+import { RootState } from "../types/store.types";
+import Loader from "../components/global/Loader";
 
 const Category = () => {
   let { category } = useParams();
+  const data = useSelector<RootState, RootState["newsScroll"]["data"]>(
+    (state) => state.newsScroll.data
+  );
   return (
     <motion.main
       className="category"
@@ -19,7 +27,24 @@ const Category = () => {
       <div className="container">
         <div className="category-inner">
           <div className="category-left">
-            <MainImg />
+            {data.length > 0 ? (
+              data[0].id > -1 ? (
+                <ContentItem
+                  id={data[0].id}
+                  img={
+                    data[0].featured_images[0]
+                      ? data[0].featured_images[0].path
+                      : ""
+                  }
+                  title={data[0].title}
+                  type={"big"}
+                />
+              ) : (
+                <Loader />
+              )
+            ) : (
+              <Loader />
+            )}
             <NewsScroll title={false} category={parseInt(category as string)} />
           </div>
           <div className="category-right">

src/styles/_category.scss

@@ -92,6 +92,9 @@
   display: flex;
   flex-direction: column;
   gap: 2.4rem;
+  .main-content-item {
+    height: 40rem;
+  }
 }
 
 @media (max-width: 1024px) {