Preview.tsx

import { Card, Carousel, Image, Space } from "antd";
import Meta from "antd/lib/card/Meta";
import Title from "antd/lib/skeleton/Title";
import React from "react";
import { Link } from "react-router-dom";

const contentStyle: React.CSSProperties = {
  height: "320px",
  color: "#fff",
  lineHeight: "160px",
  textAlign: "center",
  background: "#364d79",
};

export interface CategoryIO{
  id: string,
  name: string,
  movies: MovieIO[]

}

export interface MovieIO{
  id: string,
  name: string,
  originalName: string,
  intro: string,
  picture: string,
  published: string,
  runTimeMinutes: number
  director: DirectorIO

}

export interface DirectorIO{
  id: string,
  name: string,
  surname: string,
  birthdate: string
}

//example
export const cardsDataExample: MovieIO[] =[
  {id: "1", originalName: "Cars", name: "Auta", intro: "auta ve filmu", published: "7.8.2005", runTimeMinutes: 125,
   director:{id: "xd123", name:"Kenny", surname:"Omega", birthdate:"9.9.1980"}, picture: "https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg"},
  {id:"2", originalName:"Monster House", name: "V tom domě straší", intro:"jo ten dum je docela spooky",published: "4.4.1994", runTimeMinutes: 80, picture:"https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg",
  director:{id:"xp234", name:"Bray", surname:"Wyatt", birthdate:"unknown"}},
  {id:"3", originalName: "Pokemon", name: "Pokémon", intro:"Gotta catch them all.", published:"9.9.1970", runTimeMinutes: 600, picture:"https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg",
director:{id:"xc456", name:"Kazuchika", surname:"Okada", birthdate:"17.2.1984"}},
  {id:"4", originalName:"Gympl", name: "Gympl", intro:"VO SEDUMNÁCT METRŮ?", published:"2.2.2005",runTimeMinutes:96, picture:"https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg",
   director:{id:"xs789", name:"Tomáš", surname:"Vorel", birthdate: "někdy minulé století"}},
  {id:"5", originalName: "Toy Story", name: "Příběh hraček", intro:"Hmm the floor here is made of floor", published:"4.5.1999",runTimeMinutes: 90, picture:"https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg",
director:{id:"xl753", name:"Tomohiro", surname:"Ishii", birthdate: "19.9.1970"}},
  {id:"6", name: "Smoke", originalName: "Kouř", intro:"Jedu dál stále s tebou víme kam cesty vedou je to fajn fajn fajn je to fajn fajnový", published:"17.11.1989",runTimeMinutes:50, picture: "https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg",
director:{id:"xx787", name:"Zdenda", surname:"Pohlreich", birthdate:"4.4.1985"}},
  ]

const Preview: React.FC = () => (
  <div>
    <h1>Popular movies</h1>
    <Space>
      
      {cardsDataExample.map((movie) => {
      return (
      <>
      <Link to={`/movie/${movie.id}`} >
      <Card
        hoverable
        style={{
          width: 240,
        }}
        cover={
          <img
            alt={movie.name}
            src={movie.picture}
          />
        }
      >
      <Meta title={movie.name} description={movie.originalName} />
      </Card>
      </Link>
      </>)
      })}

    </Space>
    
    <Carousel autoplay>
      <div>
        <h3 style={contentStyle}>Avengers</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;