added Tv Shows page

frontend/src/App.js

@@ -19,9 +19,11 @@ import FilmsPage from "./pages/filmsPage";
 import TvShowsPage from "./pages/tvshowsPage";
 import FilmDetailsPage from "./pages/filmDetailsPage";
 import { FilmProvider } from "./context/FilmContext";
+import { TvShowsProvider } from "./context/TvShowsContext";
 import "./App.css";
 import MenueModal from "./components/modals/menueModal";
 import FilmPlayer from "./pages/filmPlayer";
+import TvShowDetailsPage from "./pages/tvshowDetailsPage";
 
 library.add(
   faSquareCaretLeft,
@@ -155,6 +157,7 @@ function AppContent() {
           <Route path="/tvshows" element={<TvShowsPage />} />
           <Route path="/film/:title" element={<FilmDetailsPage />} />
           <Route path="/player/film/:videoUrl" element={<FilmPlayer />} />
+          <Route path="/tvshow/:title" element={<TvShowDetailsPage />} />
         </Routes>
       </main>
     </div>
@@ -164,9 +167,11 @@ function AppContent() {
 function App() {
   return (
     <FilmProvider>
-      <Router>
-        <AppContent />
-      </Router>
+      <TvShowsProvider>
+        <Router>
+          <AppContent />
+        </Router>
+      </TvShowsProvider>
     </FilmProvider>
   );
 }

frontend/src/components/tv/card.css

@@ -0,0 +1,193 @@
+.tvshow-card {
+    box-sizing: border-box;
+    width: 250px;
+    height: 420px;
+    border: 1px solid #333; 
+    background-color: #2c2c2c;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+    transition: background-color 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 10px;
+    position: relative;
+}
+
+.tvshow-card:hover {
+    background-color: #1e1e1e; 
+}
+
+.tvshow-card-image {
+    width: 100%;
+    object-fit: cover;
+    border-bottom: 3px solid #f8b525;
+    transition: transform 0.5s ease; 
+    position: relative; 
+    z-index: 1;
+}
+
+.tvshow-card:hover .tvshow-card-image {
+    transform: scale(1.1);
+}
+
+.tvshow-card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(18, 36, 65, 0) 0%, rgba(2, 12, 30, 0.658) 80%); 
+    opacity: .6;
+    transition: opacity 0.3s ease;
+    z-index: 2;
+}
+
+.tvshow-card:hover .tvshow-card-overlay {
+    opacity: 1;
+}
+
+.tvshow-card-info {
+    height: 100%;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.807); 
+    border-top: 1px solid #333; 
+    z-index: 3;
+    position: relative;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Pacifico&family=Rubik+Burned&family=Rubik+Marker+Hatch&family=Rubik+Maze&family=Rubik+Microbe&family=Rubik:ital,wght@0,300..900;1,300..900&family=Signika:wght@300..700&display=swap');
+
+.tvshow-card-title {
+    margin: 0;
+    font-family: "Signika", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings:
+      "GRAD" 0;
+    font-weight: 600;
+    color: #f5f5f5; 
+    width: 100%;
+    box-sizing: border-box; 
+    text-align: center; 
+    white-space: nowrap; 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+}
+
+.tvshow-card-year {
+    margin: 0;
+    font-size: .9em;
+    font-family: "Signika", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings:
+      "GRAD" 0;
+    font-weight: 600; 
+    color: #949494; 
+    border: none; 
+    width: 100%;
+    box-sizing: border-box; 
+    text-align: center; 
+    white-space: nowrap; 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+}
+
+.spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+}
+
+.spinner div {
+    width: 15px;
+    height: 15px;
+    background-color: #ff8c00;
+    border-radius: 50%;
+    animation: spin 1s infinite ease-in-out;
+    margin: 0 5px;
+}
+
+.spinner div:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.spinner div:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+@keyframes spin {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+}
+
+.tvshow-card.loading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: #2c2c2c;
+    border: 1px solid #333;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+    width: 250px;
+    height: 420px;
+    position: relative;
+}
+
+.tvshow-card.loading::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 250px;
+    height: 420px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 15px;
+    z-index: 1;
+}
+
+.tvshow-card.loading .spinner {
+    margin-bottom: 20px;
+}
+
+.tvshow-card.loading .tvshow-card-title {
+    font-size: 1em;
+    color: #f5f5f5;
+    width: 100%;
+    text-align: center;
+    z-index: 2;
+    margin-top: 10px;
+}
+
+/* Media Queries for Mobile Devices */
+@media (max-width: 768px) {
+    .tvshow-card {
+        width: 150px;
+        height: 265px;
+        margin: 10px 0;
+    }
+    .tvshow-card.loading{
+        width: 150px;
+        height: 265px;
+        margin: 10px 0;
+    }
+
+    .tvshow-card-info {
+        padding: 5px;
+    }
+
+    .tvshow-card-title, .tvshow-card-year {
+        font-size: 0.8em;
+        
+    }
+}

frontend/src/components/tv/card.js

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import "./card.css";
+import apiClient from "../../api/apiClient";
+
+const Spinner = () => (
+  <div className="spinner">
+    <div className="spinner-bounce1"></div>
+    <div className="spinner-bounce2"></div>
+    <div className="spinner-bounce3"></div>
+  </div>
+);
+
+function TvShowCard({ title }) {
+  const [metadata, setMetadata] = useState(null);
+  const navigate = useNavigate();
+  
+  useEffect(() => {
+    const fetchMetadata = async () => {
+      try {
+        const response = await apiClient.getTVMetadataByTitle(title);
+        const tvshowData = response.data; // Adjust based on actual API response
+        console.log(tvshowData);
+        setMetadata(tvshowData);
+      } catch (error) {
+        console.error("Failed to fetch metadata:", error);
+        setMetadata({ error: "Failed to load metadata" });
+      }
+    };
+
+    fetchMetadata();
+  }, [title]);
+
+  const handleCardClick = () => {
+    navigate(`/tvshow/${title}`);
+  };
+
+  // Function to find the English translation name
+  const findEnglishTranslation = (translations) => {
+    if (translations && Array.isArray(translations.nameTranslations)) {
+      // Look for the primary English translation
+      const primaryEngTranslation = translations.nameTranslations.find(
+        translation => translation.language === 'eng' && translation.isPrimary
+      );
+
+      if (primaryEngTranslation) {
+        return primaryEngTranslation.name;
+      }
+
+      // If no primary English translation, look for any English translation
+      const engTranslation = translations.nameTranslations.find(
+        translation => translation.language === 'eng'
+      );
+
+      if (engTranslation) {
+        return engTranslation.name;
+      }
+    }
+    return null;
+  };
+
+  // Determine the appropriate title
+  const eng_title = metadata?.translations ? 
+    (findEnglishTranslation(metadata.translations) || `${metadata?.name} (${metadata?.year})`) : 
+    `${metadata?.name} (${metadata?.year})` || title;
+  
+  // Extract other relevant details from the metadata
+  const imageUrl = metadata?.artworks?.find(artwork => artwork.type === 7 || artwork.type === 2)?.thumbnail || "";
+  const year = metadata?.year;
+
+  // Display loading spinner if metadata is not available
+  if (metadata === null)
+    return (
+      <div className="tvshow-card loading">
+        <Spinner />
+        <div className="tvshow-card-title">Loading...</div>
+      </div>
+    );
+
+  // Display error message if metadata fetching failed
+  if (metadata.error)
+    return (
+      <div className="tvshow-card error">
+        <p className="tvshow-card-title">Error loading metadata</p>
+      </div>
+    );
+
+  return (
+    <div className="tvshow-card" onClick={handleCardClick}>
+      <img src={imageUrl} alt={eng_title} className="tvshow-card-image" />
+      <div className="tvshow-card-overlay"></div>
+      <div className="tvshow-card-info">
+        <p className="tvshow-card-title">{eng_title}</p>
+        <p className="tvshow-card-year">{year}</p>
+      </div>
+    </div>
+  );
+}
+
+export default TvShowCard;

frontend/src/config.js

@@ -1,7 +1,7 @@
 // src/config.js
 const config = {
     apiBaseUrl: 'https://unicone-studio-load-balancer.hf.space',
-    version: "0.0.3 V Alpha",
+    version: "0.0.4 V Alpha",
   };
   
 export default config;

frontend/src/context/FilmContext.js

@@ -1,4 +1,3 @@
-// FilmContext.js
 import React, { createContext, useState, useContext } from 'react';
 
 const FilmContext = createContext();

frontend/src/context/TvShowsContext.js

@@ -0,0 +1,17 @@
+import React, { createContext, useContext, useState } from 'react';
+
+const TvShowsContext = createContext();
+
+export const TvShowsProvider = ({ children }) => {
+    const [tvshows, setTvshows] = useState([]);
+
+    return (
+        <TvShowsContext.Provider value={{ tvshows, setTvshows }}>
+            {children}
+        </TvShowsContext.Provider>
+    );
+};
+
+export const useTvShowsContext = () => {
+    return useContext(TvShowsContext);
+};

frontend/src/pages/tvShowsPage.css

@@ -0,0 +1,66 @@
+.tvshows-page-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    max-width: 1300px;
+    margin: 0 auto;
+  }
+  
+  .tvshows-page {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 50px;
+    justify-items: center;
+    align-items: start;
+    width: 100%;
+  }
+  
+  /* Media query for smaller screens */
+  @media (max-width: 768px) {
+    .tvshows-page {
+      grid-template-columns: repeat(auto-fit, minmax(150px, .1fr));
+      gap: 10px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .tvshows-page {
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    }
+  }
+  
+  .pagination-controls {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .pagination-button {
+    background-color: #2c2b2b;
+    color: #f5f5f5; 
+    border: none;
+    border-radius: 5px;
+    padding: 5px; 
+    width: 50px;
+    text-align: center;
+    margin: 0 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+  
+  .pagination-button:hover {
+    background-color: #555; 
+    transform: scale(1.05); 
+  }
+  
+  .pagination-button:disabled {
+    background-color: #555; 
+    cursor: not-allowed;
+  }
+  
+  .page-info {
+    font-size: 1.2em;
+    color: #f5f5f5;
+  }
+  

frontend/src/pages/tvshowDetailsPage.js

@@ -0,0 +1,315 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useParams } from "react-router-dom";
+import apiClient from "../api/apiClient";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlay, faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import PlayModal from "../components/film/modals/playModal";
+import { getCountryName } from "../utils";
+import "./filmDetailsPage.css";
+
+function TvShowDetailsPage() {
+  const { title } = useParams();
+  const [filmDetails, setFilmDetails] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [videoUrl, setVideoUrl] = useState(null);
+  const [downloadProgress, setDownloadProgress] = useState(null);
+  const [isOverviewExpanded, setIsOverviewExpanded] = useState(false);
+  const [currentArtworkIndex, setCurrentArtworkIndex] = useState(0);
+
+  const fetchFilmDetails = useCallback(async () => {
+    try {
+      const response = await apiClient.getFilmMetadataByTitle(title);
+      if (response.data) {
+        const filmData = response.data;
+
+        let countryName = "";
+        if (filmData.originalCountry) {
+          countryName = await getCountryName(filmData.originalCountry);
+        }
+
+        setFilmDetails({
+          ...filmData,
+          originalCountry: countryName,
+        });
+      } else {
+        setError("No film details found.");
+      }
+    } catch (err) {
+      setError("Failed to fetch film details.");
+    } finally {
+      setLoading(false);
+    }
+  }, [title]);
+
+  const fetchVideoUrl = useCallback(async () => {
+    try {
+      const response = await apiClient.getMovieByTitle(title);
+      if (response.url) {
+        setVideoUrl(response.url);
+      } else if (response.progress_url) {
+        setDownloadProgress(response.progress_url);
+      }
+    } catch (err) {
+      setError("Failed to fetch video URL.");
+    }
+  }, [title]);
+
+  useEffect(() => {
+    fetchFilmDetails();
+  }, [fetchFilmDetails]);
+
+  useEffect(() => {
+    if (isModalOpen && !videoUrl) {
+      fetchVideoUrl();
+    }
+  }, [isModalOpen, videoUrl, fetchVideoUrl]);
+
+  const handlePlay = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleOverviewToggle = () => {
+    setIsOverviewExpanded(!isOverviewExpanded);
+  };
+
+  const handleNextArtwork = () => {
+    if (filmDetails && previewArtworks.length > 1) {
+      setCurrentArtworkIndex((prevIndex) => (prevIndex + 1) % previewArtworks.length);
+    }
+  };
+
+  const handlePreviousArtwork = () => {
+    if (filmDetails && previewArtworks.length > 1) {
+      setCurrentArtworkIndex((prevIndex) =>
+        (prevIndex - 1 + previewArtworks.length) % previewArtworks.length
+      );
+    }
+  };
+    const findEnglishTitleTranslation = (translations) => {
+        if (translations && Array.isArray(translations.nameTranslations)) {
+          const primaryEngTranslation = translations.nameTranslations.find(
+            translation => translation.language === 'eng'
+          );
+    
+          if (primaryEngTranslation) {
+            return primaryEngTranslation.name;
+          }
+          const engTranslation = translations.nameTranslations.find(
+            translation => translation.language === 'eng'
+          );
+          if (engTranslation) {
+            return engTranslation.name;
+          }
+        }
+        return null;
+      };
+
+        const findEnglishOverviewTranslation = (translations) => {
+            if (translations) {
+              // Look for the primary English translation
+              const primaryEngTranslation = translations.find(
+                translation => translation.language === 'eng'
+              );
+        
+              if (primaryEngTranslation) {
+                return primaryEngTranslation.overview;
+              }
+        
+              // If no primary English translation, look for any English translation
+              const engTranslation = translations.find(
+                translation => translation.language === 'eng'
+              );
+        
+              if (engTranslation) {
+                return engTranslation.overview;
+              }
+            }
+            return null;
+          };
+
+  if (loading) {
+    return <div className="loading">Loading...</div>;
+  }
+
+  if (error) {
+    return <div className="error">{error}</div>;
+  }
+
+  const {
+    aliases = [],
+    translations = {},
+    genres = [],
+    year = "",
+    originalCountry = "",
+    remoteIds = [],
+    artworks = [],
+    characters = [],
+  } = filmDetails || {};
+
+  const thumbnailUrl =
+    artworks.find((artwork) => artwork.type === 7 || artwork.type === 2)?.thumbnail ||
+    "default-thumbnail.jpg";
+  const backdropUrl =
+    artworks.find((artwork) => artwork.type === 3)?.thumbnail ||
+    "default-backdrop.jpg";
+
+  const eng_title =(findEnglishTitleTranslation(translations));
+  const previewArtworks = artworks.filter((artwork) => artwork.type === 3);
+  const overviewText = findEnglishOverviewTranslation(translations.overviewTranslations) || "";
+  const overviewPreview = overviewText.slice(0, 150);
+  const showReadMore = overviewText.length > 150;
+  const isFirstArtwork = previewArtworks.length > 0 && currentArtworkIndex === 0;
+  const isLastArtwork =
+    previewArtworks.length > 0 && currentArtworkIndex === previewArtworks.length - 1;
+
+  return (
+    <div className="film-details-page">
+      {/* Hero Section */}
+      <div className="hero-section">
+        <div
+          className="film-backdrop"
+          style={{ backgroundImage: `url(${backdropUrl})` }}
+        >
+          <div className="film-overlay"></div>
+        </div>
+        <div className="hero-content">
+          <div className="hero-content-left">
+            <img src={thumbnailUrl} alt={aliases.name} className="film-thumbnail" />
+          </div>
+          <div className="hero-content-right">
+            <h1 className="film-title">{eng_title}</h1>
+            <div className="film-metadata">
+            <div className="movie-metadata-bar">
+              {genres.length > 0 && (
+                <p className="movie-genre">
+                  <strong>Genres:</strong> {genres.map((genre) => genre.name).join(", ")}
+                </p>
+              )}
+              {year && (
+                <p>
+                  <strong>Year:</strong> {year}
+                </p>
+              )}
+              {originalCountry && (
+                <p>
+                  <strong>Country:</strong> {originalCountry}
+                </p>
+              )}
+              </div>
+              {translations.overviewTranslations && translations.overviewTranslations.length > 0 && (
+                <p className="movie-overview">
+                  <strong>Overview:</strong> {isOverviewExpanded ? overviewText : overviewPreview}
+                  {showReadMore && (
+                    <button onClick={handleOverviewToggle} className="overview-toggle">
+                      {isOverviewExpanded ? "Read Less" : "Read More"}
+                    </button>
+                  )}
+                </p>
+              )}
+            </div>
+            <button onClick={handlePlay} className="play-button">
+              <FontAwesomeIcon icon={faPlay} size="2x" />
+              <span>Play</span>
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* Preview Section */}
+      {previewArtworks.length > 0 && (
+        <div className="artwork-preview">
+          <h2>Preview</h2>
+          <div className="artwork-container">
+            <button
+              onClick={handlePreviousArtwork}
+              className="nav-button left"
+              disabled={isFirstArtwork}
+            >
+              <FontAwesomeIcon icon={faChevronLeft} />
+            </button>
+            <img
+              src={previewArtworks[currentArtworkIndex]?.thumbnail || "default-thumbnail.jpg"}
+              alt="Artwork"
+              className="artwork-image"
+            />
+            <button
+              onClick={handleNextArtwork}
+              className="nav-button right"
+              disabled={isLastArtwork}
+            >
+              <FontAwesomeIcon icon={faChevronRight} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {characters?.length > 0 && (
+        <div className="film-cast-crew">
+          <h2>Cast</h2>
+          <div className="cast-list">
+            {characters
+              .filter((character) => character.type === 3)
+              .map((character) => (
+                <div className="cast-member" key={character.id}>
+                  <img
+                    src={
+                      character.personImgURL ||
+                      `https://eu.ui-avatars.com/api/?name=${encodeURIComponent(
+                        character.personName
+                      )}&size=250`
+                    }
+                    alt={character.personName}
+                    className="cast-photo"
+                  />
+                  <p className="cast-name">{character.personName}</p>
+                </div>
+              ))}
+          </div>
+        </div>
+      )}
+
+      {/* Additional Information */}
+      <div className="additional-info">
+        {remoteIds.length > 0 && (
+          <div className="external-links">
+            <strong>External Links:</strong>
+            <ul>
+              {remoteIds.map((id, index) => (
+                <li key={index}>
+                  <a
+                    href={
+                      id.type === 2
+                        ? `https://www.imdb.com/title/${id.id}`
+                        : `https://www.themoviedb.org/movie/${id.id}`
+                    }
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {id.sourceName}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {/* Modal for Play */}
+      <PlayModal
+        isOpen={isModalOpen}
+        onRequestClose={handleModalClose}
+        videoUrl={videoUrl}
+        setVideoUrl={setVideoUrl}
+        downloadProgress={downloadProgress}
+        title={title}
+      />
+    </div>
+  );
+}
+
+export default TvShowDetailsPage;

frontend/src/pages/tvshowsPage.js

@@ -1,12 +1,87 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import apiClient from '../api/apiClient';
+import { useTvShowsContext } from '../context/TvShowsContext';
+import './tvShowsPage.css';
+import TvShowCard from '../components/tv/card';
+
+const TVSHOWS_PER_PAGE = 10;
 
 function TvShowsPage() {
-  return (
-    <div>
-      <h1>Tv Shows Page</h1>
-      <p>Welcome to the Tv Shows Page</p>
-    </div>
-  );
+    const { tvshows, setTvshows } = useTvShowsContext();
+    const [currentPage, setCurrentPage] = useState(1);
+
+    useEffect(() => {
+        if (tvshows.length === 0) {
+            apiClient.getAllTVShows()
+                .then(response => {
+                    console.log('All tvshows:', response);
+
+                    // Transform the response data to get unique show titles
+                    const uniqueTvShows = Object.keys(response);
+                    console.log(uniqueTvShows);
+                    setTvshows(uniqueTvShows);
+                })
+                .catch(error => {
+                    console.error('Failed to get all tvshows:', error);
+                });
+        }
+    }, [tvshows, setTvshows]);
+
+    const startIndex = (currentPage - 1) * TVSHOWS_PER_PAGE;
+    const currentTvShows = tvshows.slice(startIndex, startIndex + TVSHOWS_PER_PAGE);
+
+    const handleNextPage = () => {
+        setCurrentPage(prevPage => prevPage + 1);
+    };
+
+    const handlePrevPage = () => {
+        setCurrentPage(prevPage => Math.max(prevPage - 1, 1));
+    };
+
+    const totalPages = Math.ceil(tvshows.length / TVSHOWS_PER_PAGE);
+
+    const isPrevButtonEnabled = currentPage > 1;
+    const isNextButtonEnabled = currentPage < totalPages;
+
+    return (
+        <div className="tvshows-page-container">
+            <div className="pagination-controls">
+                <button 
+                    onClick={handlePrevPage} 
+                    disabled={!isPrevButtonEnabled}
+                    className="pagination-button"
+                >
+                    <FontAwesomeIcon 
+                        icon="fa-regular fa-square-caret-left" 
+                        size="2xl"
+                        color='#e88f36'
+                        bounce={isPrevButtonEnabled}
+                    />
+                </button>
+                <span className="page-info">
+                    {currentPage} - {totalPages}
+                </span>
+                <button 
+                    onClick={handleNextPage} 
+                    disabled={!isNextButtonEnabled}
+                    className="pagination-button"
+                >
+                    <FontAwesomeIcon 
+                        icon="fa-regular fa-square-caret-right" 
+                        size="2xl"
+                        color='#e88f36'
+                        bounce={isNextButtonEnabled}
+                    />
+                </button>
+            </div>
+            <div className="tvshows-page">
+                {currentTvShows.map(showTitle => (
+                    <TvShowCard key={showTitle} title={showTitle} />
+                ))}
+            </div>
+        </div>
+    );
 }
 
 export default TvShowsPage;