From fa65c41998f1a44e10ae55d758c9bfdd74f287b5 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Fri, 3 Jan 2020 00:01:16 +0100
Subject: [PATCH] Add canvas border

---
 src/App.js                   | 2 +-
 src/components.js/Canvas.css | 3 +++
 src/components.js/Canvas.js  | 8 +++++++-
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 src/components.js/Canvas.css

diff --git a/src/App.js b/src/App.js
index 4008728..7136813 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ export const App = () => {
       <main>
         <Canvas />
       </main>
-      <footer>Made by Alfred Melch</footer>
+      <footer>This is the footer</footer>
     </>
   )
 }
diff --git a/src/components.js/Canvas.css b/src/components.js/Canvas.css
new file mode 100644
index 0000000..444b09a
--- /dev/null
+++ b/src/components.js/Canvas.css
@@ -0,0 +1,3 @@
+.border {
+  border: 1px solid red;
+}
diff --git a/src/components.js/Canvas.js b/src/components.js/Canvas.js
index c8ae297..ff1452e 100644
--- a/src/components.js/Canvas.js
+++ b/src/components.js/Canvas.js
@@ -1,6 +1,8 @@
 import React, { useLayoutEffect, useRef } from 'react'
 import { main } from '../lib'
 
+import styles from './Canvas.css'
+
 export const Canvas = () => {
   const canvasRef = useRef(null)
 
@@ -8,5 +10,9 @@ export const Canvas = () => {
     main(canvasRef.current)
   })
 
-  return <canvas width={500} height={400} ref={canvasRef} />
+  return (
+    <div className={styles.border}>
+      <canvas width={500} height={400} ref={canvasRef} />
+    </div>
+  )
 }