hard coded all, but added match history

src/App.svelte

@@ -2,25 +2,31 @@
 	import Navbar from './components/NavBar.svelte';
 	import Profile from './components/Profile.svelte';
 	import MatchHistory from './components/MatchHistory.svelte';
-	const matches = [
-		{ winner: 'Alice', loser: 'Bob', time: new Date('2023-02-13T15:30:00Z') },
-		{ winner: 'Charlie', loser: 'David', time: new Date('2023-02-12T18:45:00Z') },
-		{ winner: 'Alice', loser: 'Charlie', time: new Date('2023-02-11T21:15:00Z') },
-	]
 	let isProfileOpen = false; 
 	function clickProfile() {
 	  isProfileOpen = true;
 	}
+	let isHistoryOpen = false;
+	function clickHistory() {
+	  isHistoryOpen = true;
+	}
+	let matches = [
+		{winner : "Alice", loser : "Bob"},
+	]
 </script>
 
 <main>
-	<Navbar clickProfile={clickProfile} />
+	<Navbar clickProfile={clickProfile} clickHistory={clickHistory} />
+	{#if isHistoryOpen}
+	  <div on:click={() => isHistoryOpen = false} on:keydown={() => isHistoryOpen = false}>
+		<MatchHistory matches={matches} />
+	  </div>
+	{/if}
 	{#if isProfileOpen}
 	  <div on:click={() => isProfileOpen = false} on:keydown={() => isProfileOpen = false}>
 		<Profile username="Alice" wins={10} losses={5} is2faEnabled={false} />
 	  </div>
 	{/if}
-	<MatchHistory matches={matches} />
 </main>
 
 <style>

src/components/MatchHistory.svelte

@@ -1,24 +1,43 @@
-<script lang="ts">
+<script>
-    export let matches: Match[] = [];
+    export let matches = [];
-    interface Match {
-        winner: string;
-        loser: string;
-        time: Date;
-    }
 </script>
-  
+
-<main>
+<div class="overlay">
-    {#if matches.length > 0}
+    <div class="history">
-        <ul>
+        <div>
+            {#if matches.length > 0}
             {#each matches as match}
                 <li>
-                <span>{match.winner} vs {match.loser}</span>
+                    <span>{match.winner} vs {match.loser}</span>
-                <span>{match.winner} won 1-0</span>
+                    <span>{match.winner} won 1-0</span>
-                <span>{match.time.toLocaleString()}</span>
                 </li>
             {/each}
-        </ul>
+            {:else}
-    {:else}
+                <p>No matches to display</p>
-        <p>No matches to display</p>
+            {/if}
-    {/if}
+        </div>
-</main>
+    </div>
+</div>
+  
+<style>
+    .overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 9998;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .history {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        padding: 1rem;
+        width: 300px;
+    }
+</style>

src/components/NavBar.svelte

@@ -8,18 +8,28 @@
     { text: "Profile", url: "/Profile" }
   ];
   export let clickProfile;
+  export let clickHistory;
 </script>
 
 <nav class="navigation-bar">
   <ul>
     {#each links as link}
-      {#if link.text === "Profile"}
+      {#if link.text === "Profile" || link.text === "History"}
-        <li>
+        {#if link.text === "Profile"}
-          <button on:click={clickProfile}>
+          <li>
-            <img src="img/profileicon.png" alt="profile icon">
+            <button on:click={clickProfile}>
-          </button>
+              <img src="img/profileicon.png" alt="profile icon">
-        </li>
+            </button>
-        {:else}
+          </li>
+        {/if}
+        {#if link.text === "History"}
+          <li>
+            <button on:click={clickHistory}>
+              <p>History</p>
+            </button>
+          </li>
+        {/if}
+      {:else}
         <li>
           <a href={link.url}>{link.text}</a>
         </li>