Feat: Create Header component and styles

carlosfrontend · Sep 29, 2024 · 4b5961f · 4b5961f
1 parent 11695a0
commit 4b5961f
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 4 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -33,6 +33,7 @@ export default [
         'warn',
         { allowConstantExport: true },
       ],
+      'react/props-types':'off'
     },
   },
 ]
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,11 @@
 import './App.css'
+import Header from './components/Header'
 
 function App() {
-
-
   return (
-   <></>
+  <div className="app">
+    <Header text='Memory Game' logoAltText= 'Pokemon logo' />
+  </div>
   )
 }
 

diff --git a/src/assets/256px-International_Pokémon_logo.svg.png b/src/assets/256px-International_Pokémon_logo.svg.png
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,18 @@
+import pokemonLogo from '../assets/256px-International_Pokémon_logo.svg.png';
+import '../styles/Header.css';
+
+export default function Header({ text, logoAltText }) {
+    return (
+        <header>
+            <img src={pokemonLogo} alt={logoAltText} /><h1>{text}</h1>
+            <div className="scores">
+                <div className="score">
+                    <strong>Score: </strong><span>20</span>
+                </div>
+                <div className="score">
+                    <strong>Highest Score: </strong><span>16</span>
+                </div>
+            </div>
+        </header>
+    )
+}
diff --git a/src/index.css b/src/index.css
@@ -1 +1,11 @@
-
+*{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+:root{
+  padding: 0;
+  margin: 0;
+  background-color: rgba(217, 241, 79, 0.754);
+}
diff --git a/src/styles/Header.css b/src/styles/Header.css
@@ -0,0 +1,58 @@
+header{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: "Press Start 2P", system-ui;
+    background-color: rgb(233, 7, 7);
+    padding: 1em 0;
+    gap:1em
+}
+
+header h1{
+    font-size: 1.4rem;
+}
+
+.scores{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: start;
+    gap: 2em;
+    padding: 1em;
+    text-align: left;
+
+}
+
+.score{
+    font-size: 1rem;
+}
+
+.score > strong {
+    color: wheat;
+    text-shadow:2px 3px 1px rgb(60, 6, 255);
+}
+
+.score span{
+    color: rgb(44, 103, 186);
+    background-color: white;
+    border-radius: 10%;
+    height: 50px;
+    width: 50px;
+    border: none;
+    padding: 10px;
+    font-weight: 900;
+}
+
+@media (max-width:600px) {
+    .scores{
+        justify-content: center;
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .score{
+        font-size: .8rem;
+        padding:.5em;
+    }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export default [ @@
             'warn',
             { allowConstantExport: true },
           ],
+          'react/props-types':'off'
         },
       },
     ]