From fba845bb8c7ade942274d0297a03fd9179c709f4 Mon Sep 17 00:00:00 2001
From: astumpff2 <astumpff2@huskers.unl.edu>
Date: Sun, 30 Aug 2020 11:17:36 -0500
Subject: [PATCH] Added custom component to app and created element properties
---
minimal-app/src/app.js | 3 +-
.../features/invisibleMaze/invisibleMaze.js | 30 +++++++++++--------
.../invisibleMaze/invisibleMaze.module.css | 20 +++++++++++++
3 files changed, 39 insertions(+), 14 deletions(-)
create mode 100644 minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
diff --git a/minimal-app/src/app.js b/minimal-app/src/app.js
index 3414241..b40a50c 100644
--- a/minimal-app/src/app.js
+++ b/minimal-app/src/app.js
@@ -1,12 +1,13 @@
import React from 'react';
import { Route } from 'react-router-dom';
-import { Maze } from './features/invisibleMaze/invisibleMaze.js';
+import { InvisibleMaze } from './features/invisibleMaze/invisibleMaze.js';
export function App() {
return (
<>
<Route exact path={'/'}>
+ <InvisibleMaze/>
</Route>
</>
);
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.js b/minimal-app/src/features/invisibleMaze/invisibleMaze.js
index c4e68ed..a203532 100644
--- a/minimal-app/src/features/invisibleMaze/invisibleMaze.js
+++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.js
@@ -1,32 +1,36 @@
import React from 'react';
-
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import styles from './invisibleMaze.module.css';
export function InvisibleMaze() {
+
return (
<main>
<label>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.panel}>
</button>
- <button>
+ <button className={styles.create}>
+ {"Create Maze"}
</button>
- <button>
+ <button className={styles.reset}>
</button>
- <button>
+ <button className={styles.play}>
</button>
</label>
</main>
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
new file mode 100644
index 0000000..4ade51c
--- /dev/null
+++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
@@ -0,0 +1,20 @@
+.panel {
+ width: 50px;
+ height: 50px;
+}
+.create {
+ width: 50px;
+ height: 50px;
+}
+.reset {
+ width: 50px;
+ height: 50px;
+}
+.play {
+ width: 50px;
+ height: 50px;
+}
+.maze {
+ width: 50px;
+ height: 50px;
+}
--
GitLab