Use general media display component

Instead of a different one for each media type

components/modules/calendar/MediaDisplay.tsx

@@ -2,22 +2,20 @@ import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@ma
 import { Link } from 'tabler-icons-react';
 
 export interface IMedia {
-  id: string;
+  overview: string;
+  imdbId: any;
   title: string;
-  description: string;
   poster: string;
-  type: string;
   genres: string[];
+  seasonNumber?: number;
+  episodeNumber?: number;
 }
 
-export function RadarrMediaDisplay(props: any) {
+function MediaDisplay(props: { media: IMedia }) {
-  const { media }: { media: any } = props;
+  const { media }: { media: IMedia } = props;
-  // Find a poster CoverType
-  const poster = media.images.find((image: any) => image.coverType === 'poster');
-  // Return a movie poster containting the title and the description
   return (
-    <Group noWrap align="self-start">
+    <Group noWrap align="self-start" mr={15}>
-      <Image fit="cover" src={poster.url} alt={media.title} width={300} height={400} />
+      <Image fit="cover" src={media.poster} alt={media.title} width={300} height={400} />
       <Stack
         justify="space-between"
         sx={(theme) => ({
@@ -33,7 +31,17 @@ export function RadarrMediaDisplay(props: any) {
               </ActionIcon>
             </Anchor>
           </Group>
-          <Text>{media.overview}</Text>
+          {media.episodeNumber && media.seasonNumber && (
+            <Text
+              style={{
+                textAlign: 'center',
+                color: '#a0aec0',
+              }}
+            >
+              Season {media.seasonNumber} episode {media.episodeNumber}
+            </Text>
+          )}
+          <Text align="justify">{media.overview}</Text>
         </Group>
         {/*Add the genres at the bottom of the poster*/}
         <Group>
@@ -46,46 +54,40 @@ export function RadarrMediaDisplay(props: any) {
   );
 }
 
+export function RadarrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  // Find a poster CoverType
+  const poster = media.images.find((image: any) => image.coverType === 'poster');
+  // Return a movie poster containting the title and the description
+  return (
+    <MediaDisplay
+      media={{
+        imdbId: media.imdbId,
+        title: media.title,
+        overview: media.overview,
+        poster: poster.url,
+        genres: media.genres,
+      }}
+    />
+  );
+}
+
 export function SonarrMediaDisplay(props: any) {
   const { media }: { media: any } = props;
   // Find a poster CoverType
   const poster = media.series.images.find((image: any) => image.coverType === 'poster');
   // Return a movie poster containting the title and the description
   return (
-    <Group noWrap align="self-start">
+    <MediaDisplay
-      <Image src={poster.url} fit="cover" width={300} height={400} alt={media.series.title} />
+      media={{
-      <Stack
+        imdbId: media.series.imdbId,
-        justify="space-between"
+        title: media.series.title,
-        sx={(theme) => ({
+        overview: media.series.overview,
-          height: 400,
+        poster: poster.url,
-        })}
+        genres: media.series.genres,
-      >
+        seasonNumber: media.seasonNumber,
-        <Group direction="column">
+        episodeNumber: media.episodeNumber,
-          <Group>
-            <Title order={3}>{media.series.title}</Title>
-            <Anchor href={`https://www.imdb.com/title/${media.series.imdbId}`} target="_blank">
-              <ActionIcon>
-                <Link />
-              </ActionIcon>
-            </Anchor>
-          </Group>
-          <Text
-            style={{
-              textAlign: 'center',
-              color: '#a0aec0',
       }}
-          >
+    />
-            Season {media.seasonNumber} episode {media.episodeNumber}
-          </Text>
-          <Text>{media.series.overview}</Text>
-        </Group>
-        {/*Add the genres at the bottom of the poster*/}
-        <Group>
-          {media.series.genres.map((genre: string, i: number) => (
-            <Badge key={i}>{genre}</Badge>
-          ))}
-        </Group>
-      </Stack>
-    </Group>
   );
 }