re-arrange code

app/components/audioVisualizer.js

@@ -56,10 +56,7 @@ function AudioVisualizer(props) {
   }, []);
 
   return (
-    <>
+    <canvas className="w-full h-16" ref={canvasRef} />
-      <p>Is recording: {props.isRecording ? "true" : "false"}</p>
-      <canvas className="w-full h-16" ref={canvasRef} />
-    </>
   );
 }
 

app/components/dashboard.js

@@ -1,13 +1,10 @@
 import { Mulberry32 } from "../utils.js";
 import React, { useState, useEffect } from "react";
-import AudioVisualizer from "./audioVisualizer.js";
 
 export function Dashboard(props) {
   const [openIndex, setOpenIndex] = useState(null);
   const [liveTranscript, setLiveTranscript] = useState("");
 
-  const [fakeTranscriptIndex, setFakeTranscriptIndex] = useState(0);
-
   const fakeTranscripts = [
     "This is the first transcript. We are discussing the current situation of our company. We are currently leading the market with a significant margin, and our future outlook is also very promising...",
     "Here is the second transcript. We are now moving to our next topic, which is the progress in our ongoing projects. Most of them are on schedule and the quality of work is up to our standard...",
@@ -104,11 +101,7 @@ export function Dashboard(props) {
 
   return (
     <>
-      <div className="w-3/4 py-4">
+      <div className="p-4">
-        <div className="text-center py-6">
-          <h1 className="text-4xl font-bold text-blue-500">Reflector</h1>
-          <p className="text-gray-500">Capture The Signal, Not The Noise</p>
-        </div>
         <div className="flex justify-between border-b-2">
           <div className="w-1/4">Timestamp</div>
           <div className="w-1/4">Topic</div>
@@ -136,11 +129,11 @@ export function Dashboard(props) {
               </div>
             </div>
             {openIndex === index && (
-              <div className="mt-2 p-2 bg-white">{item.transcript}</div>
+              <div className="mt-2 p-2">{item.transcript}</div>
             )}
           </div>
         ))}
-        <div className="border-b-2 py-2">
+        <div className="border-b-2 py-2 w-[90vw] max-w-[1280px]">
           <div className="flex justify-between">
             <div className="w-1/4">Live</div>
             <div className="w-1/4">Transcript</div>
@@ -148,21 +141,9 @@ export function Dashboard(props) {
               {generateDecibelGraph(generateDecibelData())}
             </div>
           </div>
-          <div className="mt-2 p-2 bg-white">{liveTranscript}</div>
+          <div className="mt-2 p-2">{liveTranscript}</div>
         </div>
-        <AudioVisualizer isRecording={props.isRecording} />
 
-        <button
-          className="mx-auto mt-6 mb-9"
-          onClick={() => props.onRecord(!props.isRecording)}
-          data-color={props.isRecording ? "red" : "blue"}
-        >
-          {props.isRecording ? "STOP" : "RESUME"}
-        </button>
-
-        <footer className="w-full bg-gray-800 text-center py-4 mt-4 text-white">
-          Reflector © 2023 Monadical
-        </footer>
       </div>
     </>
   );

app/components/record.js

@@ -1,4 +1,6 @@
-export default function Record(props) {
+import AudioVisualizer from "./audioVisualizer.js";
+
+export default function Recorder(props) {
   let mediaRecorder = null; // mediaRecorder instance
 
   const startRecording = () => {
@@ -17,23 +19,18 @@ export default function Record(props) {
   };
 
   return (
-    <div className="flex flex-col justify-center h-screen">
+      <div className="flex flex-col items-center justify-center">
-      <div className="text-center py-6 mt-10">
+        {props.isRecording && <AudioVisualizer />}
-        <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
-        <p className="text-gray-500">Capture The Signal, Not The Noise</p>
-      </div>
 
-      <div className="flex flex-col items-center justify-center flex-grow -mt-10">
+        {props.isRecording ? (
-        {!props.isRecording ? (
-          <button onClick={startRecording} data-color="blue">
-            Record
-          </button>
-        ) : (
           <button onClick={stopRecording} data-color="red">
             Stop
           </button>
+        ) : (
+          <button onClick={startRecording} data-color="blue">
+            Record
+          </button>
         )}
       </div>
-    </div>
   );
 }

app/page.js

@@ -1,6 +1,6 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import Record from "./components/record.js";
+import Recorder from "./components/record.js";
 import { Dashboard } from "./components/dashboard.js";
 import useWebRTC from "./components/webrtc.js";
 import "../public/button.css";
@@ -36,19 +36,27 @@ const App = () => {
   console.log(serverData);
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+    <div className="flex flex-col items-center h-[100svh]">
-      {splashScreen && (
+      <div className="text-center py-6 mt-10">
-        <Record
+        <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
-          isRecording={isRecording}
+        <p className="text-gray-500">Capture The Signal, Not The Noise</p>
-          onRecord={(recording) => handleRecord(recording)}
+      </div>
-        />
+
-      )}
+      <Recorder
+        isRecording={isRecording}
+        onRecord={(recording) => handleRecord(recording)}
+      />
+
       {!splashScreen && (
         <Dashboard
           isRecording={isRecording}
           onRecord={(recording) => handleRecord(recording)}
         />
       )}
+
+      <footer className="w-full bg-gray-800 text-center py-4 mt-auto text-white">
+        Reflector © 2023 Monadical
+      </footer>
     </div>
   );
 };