MoviePage.tsx

import { Badge, Descriptions, Image } from "antd";
import React from "react";
import { Link, useParams } from "react-router-dom";
import { MovieIO } from "./Preview";

export const MoviePage = () => {
  const { id, name } = useParams();
  
  //replace this with /channel/${id} API call
  const exampleMovie: MovieIO = {
    id: "789",
    name: "Saw",
    originalName: "Saw",
    intro: "Jigsaw is the bad guy and this is the game",
    picture:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Jo6M-3oyAlMsB4-F__Z9bwHaHa%26pid%3DApi&f=1",
    published: "1.1.2000",
    runTimeMinutes: 120,
    director: {
      id: "123456789",
      name: "Karel",
      surname: "Vomacka",
      birthdate: "20.2.1987",
    },
  };

  return (
    <>
      <Descriptions
        title={exampleMovie.name}
        bordered
        style={{ padding: "5%" }}
      >
        <Descriptions.Item label="Title picture" span={3}>
          <Image src={exampleMovie.picture}></Image>
        </Descriptions.Item>
        <Descriptions.Item label="Name" span={2}>
          {exampleMovie.name}
        </Descriptions.Item>
        <Descriptions.Item label="Original Name">
          {exampleMovie.originalName}
        </Descriptions.Item>
        <Descriptions.Item label="Description" span={3}>
          {exampleMovie.intro}
        </Descriptions.Item>
        <Descriptions.Item label="Published">
          {exampleMovie.published}
        </Descriptions.Item>
        <Descriptions.Item label="Runtime" span={2}>
          {exampleMovie.runTimeMinutes} minutes
        </Descriptions.Item>
      </Descriptions>
      <Descriptions title="Director" bordered style={{ padding: "5%" }}>
        <Descriptions.Item label="Name" span={3}>
          <Link to={`/director/${exampleMovie.director.id}`}>
            {exampleMovie.director.name} {exampleMovie.director.surname}
          </Link>
        </Descriptions.Item>
        <Descriptions.Item label="Birthdate">
          {exampleMovie.director.birthdate}
        </Descriptions.Item>
      </Descriptions>
    </>
  );
};