diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx index cc378a99111b93969636cf92d13be8b18bd0880d..45b1d747f283409358cc7e626dc76f6a75625d8f 100644 --- a/frontend/src/components/Preview.tsx +++ b/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>