Enhancement : Decouple the UI by using conditional rendering for each module

components/modules/calendar/MediaDisplay.tsx

@@ -0,0 +1,91 @@
+import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@mantine/core';
+import { Link } from 'tabler-icons-react';
+
+export interface IMedia {
+  id: string;
+  title: string;
+  description: string;
+  poster: string;
+  type: string;
+  genres: string[];
+}
+
+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 (
+    <Group noWrap align="self-start">
+      <Image fit="cover" src={poster.url} alt={media.title} width={300} height={400} />
+      <Stack
+        justify="space-between"
+        sx={(theme) => ({
+          height: 400,
+        })}
+      >
+        <Group direction="column">
+          <Group>
+            <Title order={3}>{media.title}</Title>
+            <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
+              <ActionIcon>
+                <Link />
+              </ActionIcon>
+            </Anchor>
+          </Group>
+          <Text>{media.overview}</Text>
+        </Group>
+        {/*Add the genres at the bottom of the poster*/}
+        <Group>
+          {media.genres.map((genre: string, i: number) => (
+            <Badge key={i}>{genre}</Badge>
+          ))}
+        </Group>
+      </Stack>
+    </Group>
+  );
+}
+
+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">
+      <Image src={poster.url} fit="cover" width={300} height={400} alt={media.series.title} />
+      <Stack
+        justify="space-between"
+        sx={(theme) => ({
+          height: 400,
+        })}
+      >
+        <Group direction="column">
+          <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>
+  );
+}