Add media display component

components/calendar/MediaDisplay.tsx

@@ -0,0 +1,43 @@
+import { Stack, Paper, Image, Group, Title, Badge, Text } from '@mantine/core';
+
+export interface IMedia {
+  id: string;
+  title: string;
+  description: string;
+  poster: string;
+  type: string;
+  genres: string[];
+}
+
+export default function MediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  // Return a movie poster containting the title and the description
+  return (
+    <Group noWrap align="self-start">
+      <Image
+        src={media.images[0].url}
+        alt={media.title}
+        style={{
+          maxWidth: 300,
+        }}
+      />
+      <Stack
+        justify="space-between"
+        sx={(theme) => ({
+          height: 400,
+        })}
+      >
+        <Group direction="column">
+          <Title order={3}>{media.title}</Title>
+          <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>
+  );
+}