styling

src/pages/NewsArticle.tsx

@@ -9,6 +9,7 @@ import { motion } from "framer-motion";
 import Aside from "../components/aside/Aside";
 import NewsArticleSlider from "../components/news/NewsArticleSlider";
 import Loader from "../components/global/Loader";
+import VideosItem from "../components/videos/VideosItem";
 
 // Icons
 import { ReactComponent as Share } from "../assets/icons/share.svg";
@@ -55,7 +56,6 @@ const NewsArticle = () => {
     );
     const metaKeywords: any = document.querySelector("meta#meta-keywords");
     const title: any = document.querySelector("title");
-    console.log(metaDescription);
     try {
       title.innerText = data.data.powerseo_title;
       metaDescription.content = data.data.powerseo_description;
@@ -65,6 +65,8 @@ const NewsArticle = () => {
     }
   }, [data]);
 
+  console.log(data.data);
+
   return (
     <motion.div
       className="news-article"
@@ -98,6 +100,18 @@ const NewsArticle = () => {
                 <h2 className="news-article-title">{data.data.title}</h2>
               </div>
               <div className="news-article-slider-wrapper">
+                {/* {data.data.video ? (
+                  <VideosItem
+                    url={data.data.video}
+                    placeholder={
+                      data.data.featured_images[0]
+                        ? data.data.featured_images[0].path
+                        : ""
+                    }
+                  />
+                ) : (
+                  <NewsArticleSlider images={data.data.featured_images} />
+                )} */}
                 <NewsArticleSlider images={data.data.featured_images} />
               </div>
               <p

src/styles/_news-article.scss

@@ -18,7 +18,7 @@
 .news-article-content {
   display: flex;
   flex-direction: column;
-  // gap: 2.4rem;
+  gap: 2.4rem;
 }
 
 .news-article-status {
@@ -62,12 +62,12 @@
 }
 
 .news-article-image {
-  height: 56rem;
+  height: 44rem;
   img,
   span {
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
   }
 }
 

src/types/data.types.ts

@@ -41,6 +41,7 @@ export interface IPostsData {
   featured_images: FeaturedImage[];
   content_html: string;
   categories: Category[];
+  video: null | string;
   powerseo_title: null | string;
   powerseo_description: null | string;
   powerseo_keywords: null | string;