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, {useEffect, useState} from "react"; import { Link } from "react-router-dom"; import axiosConfig from "../axios-config"; import { ErrorPage } from "./ErrorPage"; 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; publishedAt: 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 RECENT movies (probably 6-7 is enough) export const cardsDataExample2: MovieIO[] = [ { id: "1", originalName: "Cars", name: "Auta", intro: "auta ve filmu", publishedAt: "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", publishedAt: "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.", publishedAt: "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Ů?", publishedAt: "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", publishedAt: "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ý", publishedAt: "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", }, }, ]; export const Preview: React.FC = () => { const [movies, setMovies] = useState<MovieIO[]>([]); const [isError, setIsError] = useState<boolean>(false); useEffect(() => { const fetchCategories = async () => { try { const response = await axiosConfig.get("movies?mostRecentCnt=6"); setMovies(response.data); } catch (err) { setIsError(true); } } void fetchCategories(); }, []) if (isError) { return <ErrorPage />; } return ( <Space className="preview" direction="vertical" style={{ display: "flex", paddingTop: "2%" }} > <Card title="Editor's picks"> <Row justify="space-evenly" gutter={50}> {movies.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" > <Space style={{ display: 'flex', padding: "5 %", justifyContent: "flex-end", width:"fit-content", overflow: "auto"}}> {cardsDataExample2.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> </Card> </Space> )}; export default Preview;