componentizing promptPanel

components/PromptEntry.tsx

@@ -0,0 +1,17 @@
+import { NextComponentType } from 'next'
+
+interface PromptEntryProps {
+    prompt: string
+}
+
+const PromptEntry = (props: PromptEntryProps) => {  
+    return (
+      <>
+        <p className="pb-32 text-lg text-gray-400">
+            {props.prompt}
+        </p>
+      </>
+    )
+  }
+  
+  export default PromptEntry

components/PromptPanel.tsx

@@ -0,0 +1,33 @@
+import { NextComponentType } from 'next'
+import PromptEntry from './PromptEntry'
+
+const PromptPanel: NextComponentType = () => {
+
+    return (
+        <>
+            <main className="w-2/3 min-h-screen p-4">
+                <div className="pl-20 pt-10">
+                    <PromptEntry prompt={"yo"}/>
+                    <p className="pb-32 text-xl text-gray-300">
+                        Taylor Swift singing with a tropical beat
+                    </p>
+                    <p className="pb-32 text-3xl text-white">Justin Bieber Anger Rap</p>
+                    <p className="pb-32 text-m text-gray-400">
+                        new york city rap, with a dust storm, cinematic score, dramatic,
+                        composition, tons of energy, brutalistic
+                    </p>
+                </div>
+            </main>
+
+            <input
+                className="fixed z-90 bottom-20 right-40 w-1/2 h-12 pl-3 text-xl text-black"
+                type="text"
+                id="prompt"
+                name="prompt"
+                placeholder="What do you want to hear?"
+            />
+        </>
+    )
+}
+
+export default PromptPanel

components/Settings.tsx

@@ -10,13 +10,13 @@ const Modal: NextComponentType = () => {
   return (
     <>
       <button
-          title="Settings"
-          className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
+        title="Settings"
+        className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
           flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
-          onClick={() => setOpen(true)}
-        >
-          <FiSliders />
-        </button>
+        onClick={() => setOpen(true)}
+      >
+        <FiSliders />
+      </button>
 
       <Transition appear show={open} as={Fragment}>
         <Dialog

pages/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 
 import ThreeCanvas from "../components/ThreeCanvas";
-import { FiPause } from "react-icons/fi";
+import PromptPanel from "../components/PromptPanel";
 import Settings from '../components/Settings'
 import Pause from '../components/Pause'
 
@@ -22,34 +22,10 @@ export default function Home() {
           <ThreeCanvas />
         </div>
 
-        <main className="w-2/3 min-h-screen p-4">
-          <div className="pl-20 pt-10">
-            <p className="pb-32 text-lg text-gray-400">
-              A jazz pianist playing a classical concerto
-            </p>
-            <p className="pb-32 text-xl text-gray-300">
-              Taylor Swift singing with a tropical beat
-            </p>
-            <p className="pb-32 text-3xl text-white">Justin Bieber Anger Rap</p>
-            <p className="pb-32 text-m text-gray-400">
-              new york city rap, with a dust storm, cinematic score, dramatic,
-              composition, tons of energy, brutalistic
-            </p>
-          </div>
-        </main>
-
-        {/* TODO(hayk): Convert into components. */}
+        <PromptPanel />
 
         <Settings />
         <Pause />
-
-        <input
-          className="fixed z-90 bottom-20 right-40 w-1/2 h-12 pl-3 text-xl text-black"
-          type="text"
-          id="prompt"
-          name="prompt"
-          placeholder="What do you want to hear?"
-        />
       </div>
     </>
   );