Newer
Older
import { Card, Carousel, Space } from "antd";
import Meta from "antd/lib/card/Meta";
import React from "react";
const contentStyle: React.CSSProperties = {
height: "160px",
color: "#fff",
lineHeight: "160px",
textAlign: "center",
background: "#364d79",
};
Tomáš Havlíček
committed
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>
Tomáš Havlíček
committed
{cardsData.map((movie) => {
return (
<>
<Card
hoverable
style={{
width: 240,
}}
cover={
<img
Tomáš Havlíček
committed
alt={movie.title}
src={movie.image}
Tomáš Havlíček
committed
<Meta title={movie.title} description={movie.altitle} />
Tomáš Havlíček
committed
</>)
})}
Tomáš Havlíček
committed
</Space>
<Carousel autoplay>
<div>
<h3 style={contentStyle}>Avengers: Infinity War</h3>
</div>
<div>
<h3 style={contentStyle}>Morbius</h3>
</div>
<div>
<h3 style={contentStyle}>Princezna a Bubeník</h3>
</div>
<div>
<h3 style={contentStyle}>Scary Movie</h3>
</div>
<div>
<h3 style={contentStyle}>Scary Movie 2</h3>
</div>
<div>
<h3 style={contentStyle}>Scary Movie 3</h3>
</div>
</Carousel>
</div>
);
export default Preview;