watch provider text language dependent

src/App.css

@@ -56,7 +56,7 @@ main {
   background-color: rgba(0, 0, 0, 0.5);
 
   display: grid;
-  grid-template-rows: 1fr 2fr 2fr 1fr;
+  grid-template-rows: 1fr 1fr 2fr 1fr;
   align-items: center;
   justify-content: center;
 
@@ -73,13 +73,10 @@ main {
     display: contents;
   }
 
-  margin: 0;
-  grid-row: 2/ span 1;
 
   .chosen-movie-poster {
+    grid-row: 2/ span 1;
     object-fit: cover;
-    height: 100%;
-    width: 100%;
     display: flex;
     justify-content: center;
   }

src/App.tsx

@@ -8,7 +8,6 @@ import tmdb from './objects/tmdb'
 import { Sidebar } from './objects/sidebar'
 import { Movie } from './objects/movie-wall'
 import CrossfadeImage from 'react-crossfade-image'
-import { WhereToWatch } from './objects/whereToWatch'
 
 export type Config = {
   language: string,
@@ -65,7 +64,7 @@ function App() {
       </div>
       <main >
         <HamburgerMenu config={config} setConfig={setConfig} />
-        <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} />
+        <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
         <div id="movie-wall-container">
           <MovieWall movies={movies}
             setMovies={setMovies}

src/objects/sidebar.tsx

@@ -3,12 +3,19 @@ import { Movie } from "./movie-wall";
 import tmdb from "./tmdb";
 import { WhereToWatch } from "./whereToWatch";
 import CrossfadeImage from 'react-crossfade-image'
+import { Config } from "../App";
 export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   movie: Movie;
   similarMoviesAvailable: boolean;
   watchProviders: {};
+  config: Config;
 }
-export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: SidebarProps) {
+export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config }: SidebarProps) {
+  const apology = config.language == "es" ?
+    "Resumen no disponible" :
+    config.language == "en" ?
+      "Summary unavailable." :
+      ""
   return <div id="sidebar">
     <h1>{movie?.title ?? "loading"}</h1>
     <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
@@ -16,10 +23,10 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: Sideb
     </a>
     {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
     <p id="summary">{movie.overview === null ? "Loading"
-      : movie.overview === "" ? "Resumen no disponible."
+      : movie.overview === "" ? apology
         : movie.overview}
     </p>
-    <WhereToWatch watchProviders={watchProviders} />
+    <WhereToWatch watchProviders={watchProviders} config={config} />
   </div>
 
 

src/objects/tmdb.tsx

@@ -60,7 +60,6 @@ export default {
         .filter((e: Movie) => {
           return e.poster_path
         })
-      // array.splice(19)
       if (array.length > 0) {
         setMovies(array)
         setSimilarMoviesAvailable(true)

src/objects/whereToWatch.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import tmdb from "./tmdb"
+import { Config } from "../App"
 
 interface WhereToWatchProps extends React.ComponentPropsWithRef<"div"> {
   watchProviders: {
@@ -7,7 +8,6 @@ interface WhereToWatchProps extends React.ComponentPropsWithRef<"div"> {
     rent: Array<{}>;
     buy: Array<{}>;
     link: string;
-
   };
 }
 const sampleData = {
@@ -74,20 +74,20 @@ function watchProvidersExist(watchProviders: any) {
   return watchProviders?.link
 
 }
-export function WhereToWatch({ watchProviders }: WhereToWatchProps) {
+export function WhereToWatch({ watchProviders, config }: WhereToWatchProps) {
   console.log("Watch providers exist?" + watchProvidersExist(watchProviders))
   if (!watchProvidersExist(watchProviders)) {
     console.group()
     console.log("Watch providers (WhereToWatch)")
     console.log(watchProviders)
     console.groupEnd()
-    return <p>Por el momento no hay opciónes streaming.</p>
+    return <p>{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
   }
   return <><footer id="sidebar-footer">
     <div id="watch-providers-container">
       {watchProviders?.flatrate?.length > 0 ? <div className="watch-providers"><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
-      {watchProviders?.rent?.length > 0 ? <div className="watch-providers"><h1>Alquiler:</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
+      {watchProviders?.rent?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
-      {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>Comprar:</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
+      {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
     </div>
     <p>Powered by Just Watch.</p>
   </footer>