Add background image, title, and filter bar

src/App.tsx

@@ -1,24 +1,13 @@
 import React from 'react';
-import logo from './assets/poke_logo.png';
 import './App.css';
+import { Header } from './Header';
+import { Filters } from './Filters';
 
 function App() {
   return (
-    <div className="App">
+    <div className="App app_container">
-      <header className="App-header">
+      <Header />
-        <img src={logo} className="App-logo" alt="logo" />
+      <Filters />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
     </div>
   );
 }

src/Filters.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export function Filters() {
+  return (
+    <>
+      <div className="filter__container">
+        <div className="filter__items">
+          <div>
+            <div>REGION</div>
+            <select name="regionSelect">
+              <option value="Johto (152-251)">Johto (152-251)</option>
+            </select>
+          </div>
+        </div>
+        <div className="filter__items">
+          <div>
+            <div>TYPE</div>
+            <select name="typeSelect">
+              <option value="all">all types</option>
+            </select>
+          </div>
+        </div>
+        <div className="filter__items">
+          <div>
+            <div>SORT BY</div>
+            <select name="sortSelect">
+              <option value="name">Name</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export {};

src/Header.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import logo from './assets/poke_logo.png';
+
+export function Header() {
+  return (
+    <div>
+      <div className="poke__logos">
+        <img src={logo} />
+      </div>
+    </div>
+  );
+}

src/index.css

@@ -1,13 +1,39 @@
+.app_container {
+    display: flex;
+    flex-direction: column;;
+    align-items: center;
+    justify-items: center;
+    min-height: 100vh;
+}
+
 body {
-  margin: 0;
+    margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
+    background-image: url("./assets/bg.png");
+    background-size: initial;
+    background-repeat: repeat;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.filter__container {
+    display: flex;
+    flex-direction: row;
+    margin: 7vh 0 5vh 0;
+    gap: 0 2vw;
+}
+
+.filter__items {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: 'barcadebrawl';
+    font-size: 12px;
+}