excerpt -> title

src/components/videos/Videos.tsx

@@ -1,27 +1,29 @@
 // Modules
-import { useEffect, useState } from 'react';
-import { v4 as uuiv4 } from 'uuid';
-import { useSelector, useDispatch } from 'react-redux';
+import { useEffect, useState } from "react";
+import { v4 as uuiv4 } from "uuid";
+import { useSelector, useDispatch } from "react-redux";
 
 // Components
-import SectionTitle from '../global/SectionTitle';
-import VideosItem from './VideosItem';
+import SectionTitle from "../global/SectionTitle";
+import VideosItem from "./VideosItem";
 
 // Types
-import { RootState } from '../../types/store.types';
+import { RootState } from "../../types/store.types";
 
 // Api
-import { Api } from '../../api/Api';
-import { url } from '../../url';
-import { videoParams } from '../../api/params';
+import { Api } from "../../api/Api";
+import { url } from "../../url";
+import { videoParams } from "../../api/params";
 
 // Actions
-import { setVideo } from '../../actions/setData';
-import Loader from '../global/Loader';
+import { setVideo } from "../../actions/setData";
+import Loader from "../global/Loader";
 
 const Videos = () => {
-  const data = useSelector<RootState, RootState['video']['data']>((state) => state.video.data);
-  const api = new Api(url + '/pagination/posts', videoParams);
+  const data = useSelector<RootState, RootState["video"]["data"]>(
+    (state) => state.video.data
+  );
+  const api = new Api(url + "/pagination/posts", videoParams);
   const language = api.language;
   const dispatch = useDispatch();
   const [lastLanguage, setLastLanguage] = useState<typeof language>(language);
@@ -37,11 +39,21 @@ const Videos = () => {
       <div className="videos-inner">
         <SectionTitle
           givenClass="videos"
-          title={language === 'EN' ? 'Videos' : language === 'RU' ? 'Видео' : 'Videolar'}
+          title={
+            language === "EN"
+              ? "Videos"
+              : language === "RU"
+              ? "Видео"
+              : "Videolar"
+          }
           linkData={{
-            link: '/all',
+            link: "/all",
             title: `${
-              language === 'EN' ? 'View all' : language === 'RU' ? 'Посмотреть все' : 'Doly gör'
+              language === "EN"
+                ? "View all"
+                : language === "RU"
+                ? "Посмотреть все"
+                : "Doly gör"
             }`,
           }}
         />
@@ -52,14 +64,14 @@ const Videos = () => {
                 return (
                   <VideosItem
                     key={uuiv4()}
-                    url={videosDataItem.video || ''}
+                    url={videosDataItem.video || ""}
                     placeholder={
                       videosDataItem.featured_images[0]
                         ? videosDataItem.featured_images[0].path
-                        : ''
+                        : ""
                     }
                     date={videosDataItem.published_at}
-                    excerpt={videosDataItem.excerpt}
+                    title={videosDataItem.title}
                   />
                 );
               }

src/components/videos/VideosItem.tsx

@@ -1,20 +1,26 @@
 // Modules
-import ReactPlayer from 'react-player';
-import { LazyLoadComponent } from 'react-lazy-load-image-component';
+import ReactPlayer from "react-player";
+import { LazyLoadComponent } from "react-lazy-load-image-component";
 
 // Types
-import { videosDataType } from '../../types/videos.types';
+import { videosDataType } from "../../types/videos.types";
 
-const VideosItem = ({ url, placeholder, date, excerpt }: videosDataType) => {
+const VideosItem = ({ url, placeholder, date, title }: videosDataType) => {
   return (
     <div className="videos-item">
       <LazyLoadComponent useIntersectionObserver>
         <div className="videos-item-video">
-          <ReactPlayer url={url} controls light={placeholder} width="100%" height="100%" />
+          <ReactPlayer
+            url={url}
+            controls
+            light={placeholder}
+            width="100%"
+            height="100%"
+          />
         </div>
         <div className="videos-item-data">
           <span>{date}</span>
-          <p>{excerpt}</p>
+          <p>{title}</p>
         </div>
       </LazyLoadComponent>
     </div>

src/types/videos.types.ts

@@ -2,5 +2,5 @@ export interface videosDataType {
   url: string;
   placeholder: string;
   date: string;
-  excerpt: string;
+  title: string;
 }