re-arrange code

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="text-center py-6 mt-10">
-        <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">
+        {props.isRecording && <AudioVisualizer />}
 
-      <div className="flex flex-col items-center justify-center flex-grow -mt-10">
-        {!props.isRecording ? (
-          <button onClick={startRecording} data-color="blue">
-            Record
-          </button>
-        ) : (
+        {props.isRecording ? (
           <button onClick={stopRecording} data-color="red">
             Stop
           </button>
+        ) : (
+          <button onClick={startRecording} data-color="blue">
+            Record
+          </button>
         )}
       </div>
-    </div>
   );
 }