video items dynamic

src/App.tsx

@@ -2,7 +2,6 @@
 import { Routes, Route } from "react-router-dom";
 
 // Styles
-import "react-image-crop/src/ReactCrop.scss";
 import "./styles/style.scss";
 
 // Pages

src/components/video/Video.tsx

@@ -1,16 +1,37 @@
+// Modules
+import { v4 as uuidv4 } from "uuid";
+
 // Components
 import VideoItem from "./VideoItem";
+
+// Images
+import VideoItemImg from "../../assets/images/video-item.jpg";
+
 const Video = () => {
+  const date = "11.01.2023";
+  const title = "В Туркменистане отметили Новый год";
+  const data = [
+    { date, title, img: VideoItemImg },
+    { date, title, img: VideoItemImg },
+    { date, title, img: VideoItemImg },
+    { date, title, img: VideoItemImg },
+  ];
   return (
     <section className="video">
       <div className="container">
         <div className="video-inner">
           <h2>Видео</h2>
           <div className="video-wrapper">
-            <VideoItem />
-            <VideoItem />
-            <VideoItem />
-            <VideoItem />
+            {data.map((dataItem: Record<string, string>) => {
+              return (
+                <VideoItem
+                  key={uuidv4()}
+                  img={dataItem.img}
+                  date={dataItem.date}
+                  title={dataItem.title}
+                />
+              );
+            })}
           </div>
         </div>
       </div>

src/components/video/VideoItem.tsx

@@ -1,17 +1,17 @@
-// Images
-import VideoItemImg from "../../assets/images/video-item.jpg";
+// Types
+import { videoItemType } from "../../types/video.types";
 
-const VideoItem = () => {
+const VideoItem = ({ img, date, title }: videoItemType) => {
   return (
     <div className="video-item">
       <div className="video-item-top">
         <div className="video-img">
-          <img src={VideoItemImg} alt="" />
+          <img src={img} alt="" />
         </div>
       </div>
       <div className="video-item-bottom">
-        <span>11.01.2023</span>
-        <h5>В Туркменистане отметили Новый год</h5>
+        <span>{date}</span>
+        <h5>{title}</h5>
       </div>
     </div>
   );

src/types/video.types.ts

@@ -0,0 +1,5 @@
+export interface videoItemType {
+  img: string;
+  date: string;
+  title: string;
+}