989af67c0a
* refactor: update Next.js and React.js * refactor: update Next.js images * refactor: update ESLint rules and fix warnings/errors * fix: remove old intl polyfill * fix: add proper size to next/image components * fix: adjust full-size for next/image components * fix: temporary allow all domains for image optimization * build: fixes an issue where dev env could lead to javascript heap out of memory * fix: resolve webpack cache issue with country-flag-icons * refactor: switch compiler from Babel to SWC * fix: resize logo in sidebar * fix: break word on long path to avoid text overflow * chore: added sharp for production image optimisation * fix: change extract script for i18n to a custom script * fix: resolve GitHub CodeQL alert * chore: temporarily remove builds for ARMv7 * fix: resize avatar images * refactor: update Node.js to v20 * fix: resolve various UI issues * build: migrate yarn to pnpm and restrict engine to node@^20.0.0 * ci: specify the pnpm version to use in workflow actions * ci: fix typo in pnpm action-setup for cypress workflow * test(cypress): use pnpm instead of yarn * style: ran prettier on pnpm-lock * ci(cypress): setup nodejs v20 in cypress workflow * ci: pnpm cache to reduce install time * ci: use sh shell to get pnpm store directory * build(dockerfile): migrate to pnpm from yarn in docker builds * build(dockerfile): copy the proper pnpm lockfile * build: install pnpm for all platforms * build(dockerfile): remove unnecessary `&&` on apk installation steps * build: migrate pnpm 8 to 9 * build(dockerfile): add node-gyp back in * build(dockerfile): install node-gyp through npm * build(dockerfile): ignore scripts to not run husky install when devdependencies are pruned * build: migrate to pnpm from yarn * chore: remove a section that is no longer relevant --------- Co-authored-by: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import Header from '@app/components/Common/Header';
|
|
import LoadingSpinner from '@app/components/Common/LoadingSpinner';
|
|
import PageTitle from '@app/components/Common/PageTitle';
|
|
import { genreColorMap } from '@app/components/Discover/constants';
|
|
import GenreCard from '@app/components/GenreCard';
|
|
import Error from '@app/pages/_error';
|
|
import defineMessages from '@app/utils/defineMessages';
|
|
import type { GenreSliderItem } from '@server/interfaces/api/discoverInterfaces';
|
|
import { useIntl } from 'react-intl';
|
|
import useSWR from 'swr';
|
|
|
|
const messages = defineMessages('components.Discover.MovieGenreList', {
|
|
moviegenres: 'Movie Genres',
|
|
});
|
|
|
|
const MovieGenreList = () => {
|
|
const intl = useIntl();
|
|
const { data, error } = useSWR<GenreSliderItem[]>(
|
|
`/api/v1/discover/genreslider/movie`
|
|
);
|
|
|
|
if (!data && !error) {
|
|
return <LoadingSpinner />;
|
|
}
|
|
|
|
if (!data) {
|
|
return <Error statusCode={404} />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageTitle title={intl.formatMessage(messages.moviegenres)} />
|
|
<div className="mt-1 mb-5">
|
|
<Header>{intl.formatMessage(messages.moviegenres)}</Header>
|
|
</div>
|
|
<ul className="cards-horizontal">
|
|
{data.map((genre, index) => (
|
|
<li key={`genre-${genre.id}-${index}`}>
|
|
<GenreCard
|
|
name={genre.name}
|
|
image={`https://image.tmdb.org/t/p/w1280_filter(duotone,${
|
|
genreColorMap[genre.id] ?? genreColorMap[0]
|
|
})${genre.backdrops[4]}`}
|
|
url={`/discover/movies/genre/${genre.id}`}
|
|
canExpand
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MovieGenreList;
|