Merge pull request #12 from techswitch-learners/mm-401-add-logo-to-he…

…ader added logo to the header
techswitch-learners · Jul 31, 2024 · 8f7dfc6 · 8f7dfc6
2 parents 692231c + 61f9900
commit 8f7dfc6
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Marsio Kart</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/marsiokartlogo.png b/public/marsiokartlogo.png
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -3,7 +3,7 @@ import { render, screen, fireEvent  } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import App from './App';
 import "@testing-library/jest-dom";
-import Hamburger from './Hamburgerbutton';
+import Hamburger from './Hamburgerbutton/Hamburgerbutton';
 
 // remove this test when real tests are added
 test('renders header', () => {

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.scss';
 import Home from './Home/Home';
-import Header from './header';
+import Header from './Header/Header';
 import { Quiz } from './Quiz/Quiz';
 import Footer from './Footer/Footer';
 
@@ -12,7 +12,6 @@ function App() {
   return (
     <div className="App">
       <Router>
-        <h1>MarsioKart</h1>
         <Header/>
         <Routes>
           <Route path='/'

diff --git a/src/Hamburgerbutton.scss → src/Hamburgerbutton/Hamburgerbutton.scss b/src/Hamburgerbutton.scss → src/Hamburgerbutton/Hamburgerbutton.scss
diff --git a/src/Hamburgerbutton.tsx → src/Hamburgerbutton/Hamburgerbutton.tsx b/src/Hamburgerbutton.tsx → src/Hamburgerbutton/Hamburgerbutton.tsx
diff --git a/src/header.tsx → src/Header/Header.tsx b/src/header.tsx → src/Header/Header.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import Hamburger from './Hamburgerbutton';
+import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
+
+const logo = require('../ImageAssets/marsiokartlogo.jpg')
 
 const Header: React.FC = () => {
   const handleHamburgerClick = () => {
@@ -9,6 +11,7 @@ const Header: React.FC = () => {
   return (
     <div className="App">
       <Hamburger onClick={handleHamburgerClick} label={""}/>
+      <img src={logo} alt="Marsio Kart Logo" />
     </div>
   );
 };

diff --git a/src/ImageAssets/marsiokartlogo.jpg b/src/ImageAssets/marsiokartlogo.jpg
diff --git a/src/QuestionDisplay/QuestionDisplay.scss b/src/QuestionDisplay/QuestionDisplay.scss
diff --git a/src/QuestionDisplay/QuestionDisplay.tsx b/src/QuestionDisplay/QuestionDisplay.tsx
@@ -0,0 +1,22 @@
+// questions = [{"Where is Mars in the solar system?" : [{"Fourth planet from the sun" : true}, {"Next to Pluto" : false}, {"Closer to the sun than Earth" : false}]},
+// {"What is a rover?": [{"A dog" : false}, {"A robotic space vehicle" : true}, {"A type of car" : false}]},
+// {"How many rovers have NASA sent to Mars?": [{"5": true}, {"4": false}, {"20": false}]},
+// {"Which of these lists real Mars rover names?": [{"Resilience, Curiosity, Perseverance": false}, {"Sojourner, Oppertunity, Perseverance" : true}, {"Discovery, Searcher, Pioneer" : false}]},
+// {"What are the Mars rovers looking for?": [{"Ares God of War": false}, {"Dead rovers": false}, {"Water": true}]}]
+// import getQuestions from './somewhere';
+
+export function QuestionDisplay() {
+    // const questions = getQuestions();
+    const questions = [{"Where is Mars in the solar system?" : [{"Fourth planet from the sun" : true}, {"Next to Pluto" : false}, {"Closer to the sun than Earth" : false}]},
+    {"What is a rover?": [{"A dog" : false}, {"A robotic space vehicle" : true}, {"A type of car" : false}]},
+    {"How many rovers have NASA sent to Mars?": [{"5": true}, {"4": false}, {"20": false}]},
+    {"Which of these lists real Mars rover names?": [{"Resilience, Curiosity, Perseverance": false}, {"Sojourner, Opportunity, Perseverance" : true}, {"Discovery, Searcher, Pioneer" : false}]},
+    {"What are the Mars rovers looking for?": [{"Ares God of War": false}, {"Dead rovers": false}, {"Water": true}]}];
+
+    const question = questions[Math.floor(Math.random() * questions.length)];
+
+    return (
+        <></>
+    )
+
+}