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