From c8fb9d56ddd53d63236e72c055acf93ea9f93863 Mon Sep 17 00:00:00 2001
From: Ola Vea <ola@olavea.com>
Date: Tue, 26 Nov 2019 10:57:21 +0100
Subject: [PATCH] QuoteUnit.js made to look like
 https://material-ui.com/getting-started/templates/album I did not use time to
 learn how to get two cards beside each other, but I totally will learn it if
 @Swizec wants that (-: #6

---
 src/components/QuotesUnit.js | 58 ++++++++++++++++++++++++++++++++++++
 src/pages/index.js           |  8 +++--
 2 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 src/components/QuotesUnit.js

diff --git a/src/components/QuotesUnit.js b/src/components/QuotesUnit.js
new file mode 100644
index 0000000..cc01082
--- /dev/null
+++ b/src/components/QuotesUnit.js
@@ -0,0 +1,58 @@
+import React from "react"
+import { Button } from "@material-ui/core"
+import Grid from "@material-ui/core/Grid"
+import Container from "@material-ui/core/Container"
+import Typography from "@material-ui/core/Typography"
+import Card from "@material-ui/core/Card"
+import CardActions from "@material-ui/core/CardActions"
+import CardContent from "@material-ui/core/CardContent"
+import CardMedia from "@material-ui/core/CardMedia"
+
+import { makeStyles } from "@material-ui/core/styles"
+const useStyles = makeStyles(theme => ({
+  cardGrid: {
+    paddingTop: theme.spacing(8),
+    paddingBottom: theme.spacing(8),
+  },
+}))
+
+const cards = [1, 2, 3]
+
+const QuotesUnit = () => {
+  const classes = useStyles()
+  return (
+    <div>
+      <Container className={classes.cardGrid} maxWidth="md">
+        <Grid container spacing={4}>
+          {cards.map(card => (
+            <Grid item key={card} xs={12} sm={6} md={4}>
+              <Card>
+                <CardMedia
+                  image="https://source.unsplash.com/random"
+                  title="Image title"
+                />
+                <CardContent>
+                  <Typography variant="h5" color="textSecondary" paragraph>
+                    "I use useauth. I use useauth. I use useauth. I use
+                    useauth."
+                  </Typography>
+                </CardContent>
+                <CardActions>
+                  <Button
+                    href="https://useauthdev2-2tpug1oos.now.sh/"
+                    size="small"
+                    color="primary"
+                  >
+                    View Batcat's useAuth
+                  </Button>
+                </CardActions>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </div>
+  )
+}
+
+export default QuotesUnit
diff --git a/src/pages/index.js b/src/pages/index.js
index 77276fc..481d5f9 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,6 +2,7 @@ import React from "react"
 import HeroUnit from "../components/HeroUnit"
 import AntiHeroUnit from "../components/AntiHeroUnit"
 import HowUnit from "../components/HowUnit"
+import QuotesUnit from "../components/QuotesUnit"
 
 const Index = () => {
   return (
@@ -13,9 +14,10 @@ const Index = () => {
         <HowUnit />
       </div>
       <div>
-        <div>
-          <AntiHeroUnit />
-        </div>
+        <AntiHeroUnit />
+      </div>
+      <div>
+        <QuotesUnit />
       </div>
     </div>
   )