53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { Movie } from "./movie-wall";
|
|
import tmdb from "./tmdb";
|
|
import { WatchProviders, WhereToWatch } from "./whereToWatch";
|
|
import CrossfadeImage from 'react-crossfade-image'
|
|
import { Config } from "../App";
|
|
import { Popcorn } from "lucide-react";
|
|
|
|
export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
|
|
movie: Movie;
|
|
similarMoviesAvailable: boolean;
|
|
watchProviders: WatchProviders;
|
|
config: Config;
|
|
className: string
|
|
}
|
|
export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config, className }: SidebarProps) {
|
|
const apology = config.language == "es" ?
|
|
"Resumen no disponible" :
|
|
config.language == "en" ?
|
|
"Summary unavailable." :
|
|
""
|
|
return <div id="sidebar" className={className}>
|
|
<div className="sm:h-14 w-fit flex justify-center items-center">
|
|
<h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
|
|
</div>
|
|
<div className="flex flex-row sm:flex-col gap-2 justify-center items-center">
|
|
{movie.poster_path ?
|
|
<a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="w-3/12 sm:w-60 aspect-poster flex justify-center">
|
|
<CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path)} style={{
|
|
objectFit: "clip",
|
|
height: "100%",
|
|
apectRatio: "2 / 3"
|
|
}} />
|
|
</a>
|
|
: <Popcorn height="100%" size="60%" />
|
|
}
|
|
{similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
|
|
<div className="h-36 sm:h-72 w-8/12 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
|
|
{movie.overview === null ?
|
|
<p>Loading...</p>
|
|
: movie.overview === "" ?
|
|
<p>{apology}</p>
|
|
:
|
|
<p className="self-start">{movie.overview}</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
<WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-32 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />
|
|
</div >
|
|
|
|
|
|
}
|