videos

src/components/main/MainContent.tsx

@@ -1,29 +1,29 @@
 // Modules
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
-import { LazyLoadComponent } from "react-lazy-load-image-component";
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector, useDispatch } from 'react-redux';
 
 // Components
-import ContentItem from "./ContentItem";
+import ContentItem from './ContentItem';
-import SectionTitle from "../global/SectionTitle";
+import SectionTitle from '../global/SectionTitle';
-import ContentSlider from "./ContentSlider";
+import ContentSlider from './ContentSlider';
-import Loader from "../global/Loader";
+import Loader from '../global/Loader';
 
 // Types
-import { RootState } from "../../types/store.types";
+import { RootState } from '../../types/store.types';
 
 // Api
-import { url } from "../../url";
+import { url } from '../../url';
-import { Api } from "../../api/Api";
+import { Api } from '../../api/Api';
-import { featuredParams } from "../../api/params";
+import { featuredParams } from '../../api/params';
-import { setFeatured } from "../../actions/setData";
+import { setFeatured } from '../../actions/setData';
 
 const MainContent = () => {
   const dispatch = useDispatch();
-  const data = useSelector<RootState, RootState["featured"]["data"]>(
+  const data = useSelector<RootState, RootState['featured']['data']>(
-    (state) => state.featured.data
+    (state) => state.featured.data,
   );
-  const api = new Api(url + "/posts", featuredParams);
+  const api = new Api(url + '/posts', featuredParams);
   const language = api.language;
   const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
 
@@ -52,49 +52,29 @@ const MainContent = () => {
                 <ContentItem
                   id={data[0].id}
                   type="big"
-                  img={
+                  img={data[0].featured_images[0] ? data[0].featured_images[0].path : ''}
-                    data[0].featured_images
-                      ? data[0].featured_images[0].path
-                      : ""
-                  }
                   title={data[0].title}
                 />
                 <ContentItem
                   id={data[1].id}
-                  img={
+                  img={data[1].featured_images[0] ? data[1].featured_images[0].path : ''}
-                    data[1].featured_images
-                      ? data[1].featured_images[0].path
-                      : ""
-                  }
                   title={data[1].title}
                 />
               </div>
               <div className="main-content-bottom">
                 <ContentItem
                   id={data[2].id}
-                  img={
+                  img={data[2].featured_images[0] ? data[2].featured_images[0].path : ''}
-                    data[2].featured_images
-                      ? data[2].featured_images[0].path
-                      : ""
-                  }
                   title={data[2].title}
                 />
                 <ContentItem
                   id={data[3].id}
-                  img={
+                  img={data[3].featured_images[0] ? data[3].featured_images[0].path : ''}
-                    data[3].featured_images
-                      ? data[3].featured_images[0].path
-                      : ""
-                  }
                   title={data[3].title}
                 />
                 <ContentItem
                   id={data[4].id}
-                  img={
+                  img={data[4].featured_images[0] ? data[4].featured_images[0].path : ''}
-                    data[4].featured_images
-                      ? data[4].featured_images[0].path
-                      : ""
-                  }
                   title={data[4].title}
                 />
               </div>

src/components/videos/Videos.tsx

@@ -31,7 +31,6 @@ const Videos = () => {
       setLastLanguage(language);
     }
   }, [lastLanguage, language]);
-
   return (
     <section className="videos">
       <div className="videos-inner">

src/styles/_main.scss

@@ -32,10 +32,8 @@
     z-index: 2;
     position: absolute;
     top: 0;
-    left: 50%;
+    left: 0%;
-    height: 100%;
+    @include wh100;
-    width: 98%;
-    transform: translateX(-50%);
   }
 
   img {