Preview.tsx

import {
  Card,
  Carousel,
  Col,
  Divider,
  Grid,
  Image,
  Menu,
  Row,
  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 - TODO replace this with API preview call  - get POPULAR movies (probably 6 is enough)
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",
    },
  },
];

//example - TODO replace this with API preview call  - get RECENT movies (probably 6-7 is enough)
export const cardsDataExample2: 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 = () => (
  <Space
    className="preview"
    direction="vertical"
    style={{ display: "flex", paddingTop: "2%" }}
  >
    <Card title="Editor's picks">
      <Row justify="space-evenly" gutter={50}>
        {cardsDataExample.map((movie) => {
          return (
            <Col flex={1}>
              <Link to={`/movie/${movie.id}`}>
                <Card
                  hoverable
                  style={{
                    width: "240px",
                  }}
                  cover={<img alt={movie.name} src={movie.picture} />}
                >
                  <Meta title={movie.name} description={movie.originalName} />
                </Card>
              </Link>
            </Col>
          );
        })}
      </Row>
    </Card>
    <Divider />

    <Card title="Recent movies">
      <Row justify="space-evenly"   gutter={50}>
        {cardsDataExample.map((movie) => {
          return (
            <Col flex={1} style={{display: "flex"}}>
              <Link to={`/movie/${movie.id}`} style={{alignSelf: "center"}}>
                <Card
                  hoverable
                  style={{
                    width: "240px",
                    alignSelf: "center",
                  }}
                  cover={<img alt={movie.name} src={movie.picture} />}
                >
                  <Meta title={movie.name} description={movie.originalName} />
                </Card>
              </Link>
            </Col>
          );
        })}
      </Row>
    </Card>
  </Space>
);

export default Preview;