You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.6 KiB
57 lines
1.6 KiB
import { ArrowCircleRightIcon } from '@heroicons/react/outline';
|
|
import Link from 'next/link';
|
|
import React from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import useSWR from 'swr';
|
|
import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';
|
|
import GenreCard from '../../GenreCard';
|
|
import Slider from '../../Slider';
|
|
import { genreColorMap } from '../constants';
|
|
|
|
const messages = defineMessages({
|
|
moviegenres: 'Movie Genres',
|
|
});
|
|
|
|
const MovieGenreSlider = () => {
|
|
const intl = useIntl();
|
|
const { data, error } = useSWR<GenreSliderItem[]>(
|
|
`/api/v1/discover/genreslider/movie`,
|
|
{
|
|
refreshInterval: 0,
|
|
revalidateOnFocus: false,
|
|
}
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<div className="slider-header">
|
|
<Link href="/discover/movies/genres">
|
|
<a className="slider-title">
|
|
<span>{intl.formatMessage(messages.moviegenres)}</span>
|
|
<ArrowCircleRightIcon />
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
<Slider
|
|
sliderKey="movie-genres"
|
|
isLoading={!data && !error}
|
|
isEmpty={false}
|
|
items={(data ?? []).map((genre, index) => (
|
|
<GenreCard
|
|
key={`genre-${genre.id}-${index}`}
|
|
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}`}
|
|
/>
|
|
))}
|
|
placeholder={<GenreCard.Placeholder />}
|
|
emptyMessage=""
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default React.memo(MovieGenreSlider);
|