All files / src/components/molecules/movieTabs movieTabs.tsx

100% Statements 7/7
100% Branches 0/0
100% Functions 2/2
100% Lines 7/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54                        2x 1x 1x   1x   1x           1x       3x                                                  
import { useTranslation } from "react-i18next";
import { Tab } from "@headlessui/react";
import { MoviesList } from "@/components/organisms";
import { IMovieList } from "@/interfaces";
import useUserStore from "@/store/useUserStore";
 
interface MovieTabsProps {
  favoriteMovies: IMovieList[];
  moviesInWatchlist: IMovieList[];
  ratedMovies: IMovieList[];
}
 
export const MovieTabs = ({ favoriteMovies, moviesInWatchlist, ratedMovies }: MovieTabsProps) => {
  const { t } = useTranslation();
  const { accentColor } = useUserStore();
 
  const tabKeys = ["Favorites", "Watchlist", "Rated Movies"] as const;
 
  const mapTranslationKeysToMovieTabs = {
    Favorites: favoriteMovies,
    Watchlist: moviesInWatchlist,
    "Rated Movies": ratedMovies,
  };
 
  return (
    <Tab.Group>
      <Tab.List className="border-2 flex justify-center gap-8">
        {tabKeys.map((key) => (
          <Tab
            className={`ui-selected:border-b-4 ui-selected:border-[#172554] text-md md:text-xl p-2 flex gap-3 items-center flex-col md:flex-row`}
          >
            {t(key.toLowerCase().replace(" ", "_"))}
            <div style={{ background: accentColor }} className="rounded-full px-2 text-white">
              {mapTranslationKeysToMovieTabs[key].length}
            </div>
          </Tab>
        ))}
      </Tab.List>
 
      <Tab.Panels className="px-4 md:px-8">
        <Tab.Panel>
          <MoviesList movies={favoriteMovies} />
        </Tab.Panel>
        <Tab.Panel>
          <MoviesList movies={moviesInWatchlist} />
        </Tab.Panel>
        <Tab.Panel>
          <MoviesList movies={ratedMovies} />
        </Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  );
};