Adding header

cake-game/src/App.jsx

@@ -1,17 +1,19 @@
 /*import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'*/
-import './App.css'
-import Hero from './components/hero/Hero'
+import "./App.css";
+import Header from "./components/header/Header";
+import Hero from "./components/hero/Hero";
 
 function App() {
   //const [count, setCount] = useState(0)
 
   return (
     <>
+      <Header />
       <Hero />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

cake-game/src/components/header/Header.css

@@ -0,0 +1,52 @@
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  display: inline-block;
+  width: 150px; 
+}
+.logo a {
+  display: block;
+}
+.logo img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.header ul {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 3rem;
+
+  list-style: none;
+  display: flex;
+  gap: 30px;
+}
+
+.header li {
+  display: none;
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+}
+
+.header li a {
+  color: white;
+  display: inline-block;
+  padding: 0;
+  text-decoration: none;
+}
+
+.header li a:hover {
+  color: var(--qwik-light-blue);
+}
+
+@media (min-width: 450px) {
+  .header li {
+    display: inline-block;
+  }
+}

cake-game/src/components/header/Header.jsx

@@ -0,0 +1,43 @@
+import'./Header.css';
+import elasticLogo from '../../assets/elastic-logo.png'
+
+function Header() {
+  return (
+    <>
+      <header className="header">
+      <div className="header-container">
+        <div className="logo">
+          <a href="/" title="Elastic">
+          <img src={elasticLogo} alt="Elastic logo" />
+          </a>
+        </div>
+        <ul>
+        <li>
+            <a
+              href="/play"
+              target="_blank">
+              Play
+            </a>
+          </li>
+          <li>
+            <a
+              href="/rules"
+              target="_blank">
+              Rules
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/carlyrichmond/is-it-fake"
+              target="_blank">
+              GitHub
+            </a>
+          </li>
+        </ul>
+      </div>
+    </header>
+    </>
+  )
+}
+
+export default Header

cake-game/src/components/header/Header.test.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import Header from './Header';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('should work', async ({ mount }) => {
+  const component = await mount(<Header />);
+  await expect(component).toContainText('Play');
+});

cake-game/src/components/hero/Hero.test.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import Hero from './Hero';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('should work', async ({ mount }) => {
+  const component = await mount(<Hero />);
+  await expect(component).toContainText('Is it (F)ake?!');
+});