From dca1f9982e50b5f346198cc25aedeb0001e57a67 Mon Sep 17 00:00:00 2001
From: "Thomas \"ajnart\" Camlong" <thomascamlong@gmail.com>
Date: Sat, 30 Apr 2022 21:36:53 +0200
Subject: [PATCH] Add media display component

---
 components/calendar/MediaDisplay.tsx | 43 ++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 components/calendar/MediaDisplay.tsx

diff --git a/components/calendar/MediaDisplay.tsx b/components/calendar/MediaDisplay.tsx
new file mode 100644
index 000000000..7fc11db29
--- /dev/null
+++ b/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>
+  );
+}