Finished minimal profile page

frontend/src/index.sass

@@ -57,6 +57,10 @@ button.green
   background-color: $c-green
   box-shadow: $shadow-width $c-green-shadow
 
+button.red
+  background-color: $c-red
+  box-shadow: $shadow-width $c-red-shadow
+
 button.white
   background-color: white
   color: $c-default-text

frontend/src/logic/sdk.ts

@@ -64,26 +64,6 @@ export function getUsername()
   return db.user
 }
 
-// export function recordAudio(callback: (audio: HTMLAudioElement) => void) {
-//   let chunks = [] as any;
-//   let mediaRecorder = null as any;
-
-//   navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
-//     mediaRecorder = new MediaRecorder(stream)
-//     mediaRecorder.ondataavailable = (e: any) => {
-//       chunks.push(e.data)
-//     }
-
-//     mediaRecorder.onstop = (e: any) => {
-//       const blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' })
-//       chunks = []
-//       const audioURL = window.URL.createObjectURL(blob)
-//       const audio = new Audio(audioURL)
-//       callback(audio);
-//     }
-//   })
-// }
-
 export interface CharacterChatCreationRequest 
 {
   character: string;

frontend/src/pages/Profile.tsx

@@ -1,11 +1,25 @@
 import NavBar from "../components/NavBar"
+import { getUsername, getLanguage, logout } from "../logic/sdk"
+import { useNavigate } from "react-router-dom"
 
 export default function Profile() {
 
+    const username = getUsername();
+    const navigate = useNavigate();
+
+    function handleLougout() {
+        logout();
+        console.log("Logged out");
+        navigate('/')
+    }
+
     return (
-        <div className="flex flex-col h-screen">
-            <div className="flex flex-col flex-1">
-                <h1>Profile Page</h1>
+        <div className="v-layout p-10">
+            <div className="flex flex-col flex-1 h-full">
+                <h1 className="text-center">Profile</h1>
+                <h2 className="text-center">Username: {username}</h2>
+                <h2 className="text-center">Currently Learning: {getLanguage(username)}</h2>
+                <button className="red mt-auto mb-12" onClick={() => handleLougout()}>Logout</button>
             </div>
             <NavBar />
         </div>