prop formatting

components/PromptEntry.tsx

@@ -5,14 +5,16 @@ interface PromptEntryProps {
     className: string
 }
 
-const PromptEntry = (props: PromptEntryProps) => {  
+export default function PromptEntry({
+    prompt,
+    className,
+}: PromptEntryProps) {  
+
     return (
       <>
-        <p className={props.className}>
-            {props.prompt}
+        <p className={className}>
+            {prompt}
         </p>
       </>
     )
   }
-  
-  export default PromptEntry

components/PromptPanel.tsx

@@ -1,22 +1,26 @@
 import PromptEntry from './PromptEntry'
 
 import { PromptInput } from "../types";
+
 interface PromptPanelProps {
     prompts: PromptInput[];
     addPrompt: (prompt: string) => void;
 }
 
-const PromptPanel = (props: PromptPanelProps) => {
-    const prompts = props.prompts;
-    const addPrompt = props.addPrompt;
+export default function PromptPanel({
+    prompts,
+    addPrompt,
+}: PromptPanelProps) {
 
     return (
         <>
             <main className="w-2/3 min-h-screen p-4">
                 <div className="pl-20 pt-10">
-                    {prompts.map((prompt, index) => (
-                        <PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} key={index} />
-                    ))}
+                    <div className="flex flex-column">
+                        {prompts.map((prompt, index) => (
+                            <PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} key={index} />
+                        ))}
+                    </div>
 
                     <form onSubmit={(e) => {
                         e.preventDefault();
@@ -38,13 +42,14 @@ const PromptPanel = (props: PromptPanelProps) => {
     )
 }
 
-export default PromptPanel
-
 // WIP manner of passing ideal font of each promptEntry based on where it is in the promptPanel. Could be done better with a map or something.
 // need not just order, but some context of where we are in time, and when that prompt will be primary (some global step state)
 const promptEntryClassNames = {
-    0: "pb-32 text-lg text-gray-400",
-    1: "pb-32 text-xl text-gray-300",
-    2: "pb-32 text-3xl text-white",
-    3: "pb-32 text-m text-gray-400",
+    0: "pb-12 text-lg text-gray-400",
+    1: "pb-1/6 text-xl text-gray-300",
+    2: "pb-1/6 text-3xl text-white",
+    3: "pb-1/6 text-m text-gray-400",
+    4: "pb-1/6 text-m text-gray-300",
+    5: "pb-1/6 text-m text-gray-400",
+    6: "pb-1/6 text-m text-gray-300",
 }