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 1/2] 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 00000000..5ece2bcd
--- /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 9e0b07bc..32393584 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
+}

From f0f7be4e19eb195a7d3ff82a377de3e569b8754a Mon Sep 17 00:00:00 2001
From: she11sh0cked <22623152+she11sh0cked@users.noreply.github.com>
Date: Fri, 25 Dec 2020 17:47:33 +0100
Subject: [PATCH 2/2] Begin implementing MangaPage

---
 webUI/react/src/App.tsx | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/webUI/react/src/App.tsx b/webUI/react/src/App.tsx
index 1680c2d5..80db9b81 100644
--- a/webUI/react/src/App.tsx
+++ b/webUI/react/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
     BrowserRouter as Router,
     Switch,
@@ -8,6 +8,34 @@ import Button from '@material-ui/core/Button';
 import NavBar from './components/NavBar';
 import ExtensionCard from './components/ExtensionCard';
 import SourceCard from './components/SourceCard';
+import MangaCard from './components/MangaCard';
+
+function MangaPage() {
+    let mapped;
+    const [mangas, setMangas] = useState<IManga[]>([]);
+
+    useEffect(() => {
+        fetch('https://picsum.photos/v2/list')
+            .then((response) => response.json())
+            .then((data: { author: string, download_url: string }[]) => setMangas(
+                data.map((it) => ({ name: it.author, imageUrl: it.download_url })),
+            ));
+    });
+
+    if (mangas.length === 0) {
+        mapped = <h3>wait</h3>;
+    } else {
+        mapped = (
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, auto)', gridGap: '1em' }}>
+                {mangas.map((it) => (
+                    <MangaCard manga={it} />
+                ))}
+            </div>
+        );
+    }
+
+    return mapped;
+}
 
 function Extensions() {
     let mapped;
@@ -56,6 +84,9 @@ export default function App() {
             <NavBar />
 
             <Switch>
+                <Route path="/mangapage">
+                    <MangaPage />
+                </Route>
                 <Route path="/extensions">
                     <Extensions />
                 </Route>