feat: season/episode list on series details (#2967)

src/components/TvDetails/Season/index.tsx

@@ -0,0 +1,62 @@
+import AirDateBadge from '@app/components/AirDateBadge';
+import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import type { SeasonWithEpisodes } from '@server/models/Tv';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+
+const messages = defineMessages({
+  somethingwentwrong: 'Something went wrong while retrieving season data.',
+});
+
+type SeasonProps = {
+  seasonNumber: number;
+  tvId: number;
+};
+
+const Season = ({ seasonNumber, tvId }: SeasonProps) => {
+  const intl = useIntl();
+  const { data, error } = useSWR<SeasonWithEpisodes>(
+    `/api/v1/tv/${tvId}/season/${seasonNumber}`
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <div>{intl.formatMessage(messages.somethingwentwrong)}</div>;
+  }
+
+  return (
+    <div className="flex flex-col justify-center divide-y divide-gray-700">
+      {data.episodes
+        .slice()
+        .reverse()
+        .map((episode) => {
+          return (
+            <div
+              className="flex flex-col space-y-4 py-4 xl:flex-row xl:space-y-4 xl:space-x-4"
+              key={`season-${seasonNumber}-episode-${episode.episodeNumber}`}
+            >
+              <div className="flex-1">
+                <div className="flex flex-col space-y-2 xl:flex-row xl:items-center xl:space-y-0 xl:space-x-2">
+                  <h3 className="text-lg">{episode.name}</h3>
+                  <AirDateBadge airDate={episode.airDate} />
+                </div>
+                {episode.overview && <p>{episode.overview}</p>}
+              </div>
+              {episode.stillPath && (
+                <img
+                  className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
+                  src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
+                  alt=""
+                />
+              )}
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+export default Season;