working on presets

src/App.css

@@ -1,38 +1,104 @@
+/* Universal styles */
+
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+  width: 60vw;
+  height: 100vh;
+  margin: 0 15vw;
+}
+
+button {
+  background-color: rgb(33, 33, 245);
+  color: white;
+  border-radius: 3px;
+  border: none;
+  width: 20%;
+  height: 3rem;
+}
+
+button:hover {
+  background-color: white;
+  color: rgb(33, 33, 245);
+  border: 1px solid rgb(33, 33, 245);
+}
+
+button:active {
+  background-color: rgb(100, 33, 245);
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+/* Input section styles */
+
+#input-section {
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: center;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+#input-section form {
+  display: flex;
+  flex-direction: column;
 }
+
+#input-section label {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+#input-section textarea {
+  width: 60vw;
+  height: 15vh;
+}
+
+.submit {
+  display: flex;
+  justify-content: space-between;
+}
+
+.preset-box {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Response section styles */
+
+#responses {
+  margin-top: 2rem;
+}
+
+.single-response-block {
+  display: grid;
+  grid-template: "prompt-label prompt" 1fr
+                 "response-label response" 1fr
+                 / auto;
+  background-color: lightgray;
+  border-radius: 12px;
+  padding: 0 1rem;
+  margin: 1rem 0;
+}
+
+.response-component {
+  display: inline-block;
+}
+
+.label {
+  font-weight: bold;
+}
+
+.prompt-label {
+  grid-area: "prompt-label";
+}
+
+.prompt {
+  grid-area: "prompt";
+}
+
+.response-label {
+  grid-area: "response-label";
+}
+
+.response {
+  grid-area: "response";
+}

src/App.js

@@ -1,22 +1,24 @@
-import './App.css';
-import ResponseSection from './components/ResponseSection';
 import { useState } from "react";
+import ResponseSection from './components/ResponseSection';
+import './App.css';
 
 function App() {
   const [userInput, setUserInput] = useState('');
 
+  const userPrompt = null;
+
   return (
     <div className="App">
-      <h1>Fun with AI</h1>
+      <h1 id="page-title">Fun with AI</h1>
 
       <section id="input-section">
         <form>
           <label htmlFor='user-prompt'>Enter prompt</label>
-          <textarea id="user-prompt" onChange={(e) => setUserInput(e.target.value)}></textarea>
+          <textarea id="user-prompt" value={userPrompt} onChange={(e) => setUserInput(e.target.value)}></textarea>
         </form>
       </section>
 
-      <ResponseSection userInput={userInput} />
+      <ResponseSection userInput={userInput} prompt={userPrompt}/>
     </div>
   );
 }

src/components/ResponseSection.js

@@ -1,20 +1,15 @@
 import { useState } from "react";
 
-export default function ResponseSection({ userInput }) {
+export default function ResponseSection({ userPrompt, userInput }) {
     let secret = process.env.REACT_APP_API_SECRET;
 
     const [resCount, setResCount] = useState(1);
     const [contents, setContents] = useState([
         <div key="response-1" className="single-response-block">
-            <div className="response-line">
-                <p>Prompt:</p>
-                <p>User prompt here</p>
-            </div>
-
-            <div className="response-line">
-                <p>Response:</p>
-                <p>AI response here</p>
-            </div>
+            <p className="response-component label prompt-label">Prompt:</p>
+            <p className="response-component prompt">Your prompt will appear here...</p>
+            <p className="response-component label response-label">Response:</p>
+            <p className="response-component response">... and the AI response will appear here!</p>
         </div>
     ]);
 
@@ -36,15 +31,10 @@ export default function ResponseSection({ userInput }) {
         let newCount;
         AIresponse && (newCount = newState.unshift(
             <div key={`response-${resCount + 1}`} className="single-response-block">
-                <div className="response-line">
-                    <p>Prompt:</p>
-                    <p>{userInput}</p>
-                </div>
-
-                <div className="response-line">
-                    <p>Response:</p>
-                    <p>{AIresponse}</p>
-                </div>
+                <p className="response-component label prompt-label">Prompt:</p>
+                <p className="response-component prompt">{userInput}</p>
+                <p className="response-component label response-label">Response:</p>
+                <p className="response-component response">{AIresponse}</p>
             </div>
         ));
 
@@ -54,8 +44,21 @@ export default function ResponseSection({ userInput }) {
 
     return (
         <section>
-            <button onClick={addNewResponse}>Submit</button>
+            <div className="submit">
+                <div className="preset-box">
+                    <label htmlFor="presets">Feeling stuck? Choose from some pre-written prompts:</label>
+                    <select name="presets" id="presets" onChange={(e) => userPrompt = e.target.value}>
+                        <option value="preset-1">What's your favorite color?</option>
+                        <option value="preset-2">Tell me about your best friend.</option>
+                        <option value="preset-3">What do you dream about?</option>
+                        <option value="preset-4">Tell me a good joke.</option>
+                    </select>
+                </div>
+                <button onClick={addNewResponse}>Submit</button>
+            </div>
+
             <section id="responses">
+                <h2>Responses</h2>
                 {contents}
             </section>
         </section>