feat:reworked card to render from array, preparation for backend integration

frontend/src/components/Preview.tsx

@@ -9,9 +9,27 @@ const contentStyle: React.CSSProperties = {
   background: "#364d79",
 };
 
+interface DisplayCards{
+  title: string;
+  altitle: string;
+  image: string
+}
+
+const cardsData: DisplayCards[] =[
+  {title: "Cars", altitle: "Auta", image: "https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg"},
+  {title: "Monster House", altitle: "V tom domě straší", image:"https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg"},
+  {title: "Pokemon", altitle: "Pokémon", image:"https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg"},
+  {title: "The Can", altitle: "Gympl", image:"https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg"},
+  {title: "Toy Story", altitle: "Příběh hraček", image:"https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg"},
+  {title: "Smoke", altitle: "Kouř", image: "https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg"},
+  ]
+
 const Preview: React.FC = () => (
   <div>
     <Space>
+      {cardsData.map((movie) => {
+      return (
+      <>
       <Card
         hoverable
         style={{
@@ -19,85 +37,18 @@ const Preview: React.FC = () => (
         }}
         cover={
           <img
-            alt="Cars"
-            src="https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg"
-          />
-        }
-      >
-        <Meta title="Cars" description="Auta" />
-      </Card>
-      <Card
-        hoverable
-        style={{
-          width: 240,
-        }}
-        cover={
-          <img
-            alt="Monster House"
-            src="https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg"
-          />
-        }
-      >
-        <Meta title="Monster house" description="V tom domě straší" />
-      </Card>
-      <Card
-        hoverable
-        style={{
-          width: 240,
-        }}
-        cover={
-          <img
-            alt="Pokemon"
-            src="https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg"
+            alt={movie.title}
+            src={movie.image}
           />
         }
       >
-        <Meta title="Pokemon 3" description="Pokémon 3" />
+      <Meta title={movie.title} description={movie.altitle} />
       </Card>
-      <Card
-        hoverable
-        style={{
-          width: 240,
-        }}
-        cover={
-          <img
-            alt="Gympl"
-            src="https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg"
-          />
-        }
-      >
-        <Meta title="The Can" description="Gympl" />
-      </Card>
-      <Card
-        hoverable
-        style={{
-          width: 240,
-        }}
-        cover={
-          <img
-            alt="Toy Story"
-            src="https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg"
-          />
-        }
-      >
-        <Meta title="Toy Story" description="www.instagram.com" />
-      </Card>
-      <Card
-        hoverable
-        style={{
-          width: 240,
-        }}
-        cover={
-          <img
-            alt="Kour"
-            src="https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg"
-          />
-        }
-      >
-        <Meta title="Smoke" description="Kouř" />
-      </Card>
-    </Space>
+      </>)
+      })}
 
+    </Space>
+    
     <Carousel autoplay>
       <div>
         <h3 style={contentStyle}>Avengers: Infinity War</h3>