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>
);
};
|