Newer
Older
Tomáš Havlíček
committed
import { Badge, Descriptions, Image } from "antd";
import React from "react";
import { Link, useParams } from "react-router-dom";
Tomáš Havlíček
committed
import { MovieIO } from "./Preview";
Tomáš Havlíček
committed
export const MoviePage = () => {
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",
director: {
id: "123456789",
name: "Karel",
surname: "Vomacka",
birthdate: "20.2.1987",
},
};
Tomáš Havlíček
committed
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>
</>
);
};