From 8d689a749b48da94bd53f917518b460a01c80236 Mon Sep 17 00:00:00 2001
From: she11sh0cked <22623152+she11sh0cked@users.noreply.github.com>
Date: Fri, 25 Dec 2020 17:42:22 +0100
Subject: [PATCH] Implement MangaCard

---
 webUI/react/src/components/MangaCard.tsx | 66 ++++++++++++++++++++++++
 webUI/react/src/typings.d.ts             |  5 ++
 2 files changed, 71 insertions(+)
 create mode 100644 webUI/react/src/components/MangaCard.tsx

diff --git a/webUI/react/src/components/MangaCard.tsx b/webUI/react/src/components/MangaCard.tsx
new file mode 100644
index 0000000..5ece2bc
--- /dev/null
+++ b/webUI/react/src/components/MangaCard.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardMedia from '@material-ui/core/CardMedia';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles({
+    root: {
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+    },
+    wrapper: {
+        position: 'relative',
+        height: '100%',
+    },
+    gradient: {
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        height: '100%',
+        background: 'linear-gradient(to bottom, transparent, #000000)',
+        opacity: 0.5,
+    },
+    title: {
+        position: 'absolute',
+        bottom: 0,
+        padding: '0.5em',
+        color: 'white',
+    },
+    image: {
+        height: '100%',
+        width: '100%',
+    },
+});
+
+interface IProps {
+    manga: IManga
+}
+export default function MangaCard(props: IProps) {
+    const {
+        manga: {
+            name, imageUrl,
+        },
+    } = props;
+    const classes = useStyles();
+
+    return (
+        <Card className={classes.root}>
+            <CardActionArea>
+                <div className={classes.wrapper}>
+                    <CardMedia
+                        className={classes.image}
+                        component="img"
+                        alt="Nagatoro"
+                        image={imageUrl}
+                        title="Nagatoro"
+                    />
+                    <div className={classes.gradient} />
+                    <Typography className={classes.title} variant="h5" component="h2">{name}</Typography>
+                </div>
+            </CardActionArea>
+        </Card>
+    );
+}
diff --git a/webUI/react/src/typings.d.ts b/webUI/react/src/typings.d.ts
index 9e0b07b..3239358 100644
--- a/webUI/react/src/typings.d.ts
+++ b/webUI/react/src/typings.d.ts
@@ -14,3 +14,8 @@ interface ISource {
     iconUrl: string
     supportsLatest: boolean
 }
+
+interface IManga {
+    name: string
+    imageUrl: string
+}