movieTabs movieTabs.tsx

100% Statements 4/4

100% Branches 0/0

100% Functions 2/2

100% Lines 4/4

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  
 
 
 
 
 
 
 
 
 
3x
1x
 
1x
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useTranslation } from "react-i18next";
import { Tab } from "@headlessui/react";
import { MoviesList } from "@/components/organisms";
 
interface MovieTabsProps {
  favoriteMovies: any;
  moviesInWatchlist: any;
  ratedMovies: any;
}
 
export const MovieTabs = ({ favoriteMovies, moviesInWatchlist, ratedMovies }: MovieTabsProps) => {
  const { t } = useTranslation();
 
  return (
    <Tab.Group>
      <Tab.List className="border-2 flex justify-center gap-8">
        {[t("favorites"), t("watchlist"), t("rated_movies")].map((t) => (
          <Tab
            className={`ui-selected:border-b-4 ui-selected:border-[#172554] text-md md:text-xl p-2`}
          >
            {t}
          </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>
  );
};