From f3f9447b56565c6f8f780328de209a6cfc96f81d Mon Sep 17 00:00:00 2001
From: Seth Forsgren <forsgren.seth@gmail.com>
Date: Wed, 23 Nov 2022 21:47:18 -0800
Subject: [PATCH] componentizing promptPanel

---
 components/PromptEntry.tsx | 17 +++++++++++++++++
 components/PromptPanel.tsx | 33 +++++++++++++++++++++++++++++++++
 components/Settings.tsx    | 12 ++++++------
 pages/index.tsx            | 28 ++--------------------------
 4 files changed, 58 insertions(+), 32 deletions(-)
 create mode 100644 components/PromptEntry.tsx
 create mode 100644 components/PromptPanel.tsx

diff --git a/components/PromptEntry.tsx b/components/PromptEntry.tsx
new file mode 100644
index 0000000..f6f5d92
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/components/PromptPanel.tsx b/components/PromptPanel.tsx
new file mode 100644
index 0000000..71d0d24
--- /dev/null
+++ b/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
diff --git a/components/Settings.tsx b/components/Settings.tsx
index 567a81f..d001823 100644
--- a/components/Settings.tsx
+++ b/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
diff --git a/pages/index.tsx b/pages/index.tsx
index 6976a97..f298251 100644
--- a/pages/index.tsx
+++ b/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>
     </>
   );