Add basic structure to textboxes

Author: rmen527

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource/fira-code": "^5.2.7",
     "@tailwindcss/vite": "^4.2.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

package.json

@@ -9,8 +9,14 @@ interface TextboxProps {
 
 export default function Textbox(props: TextboxProps) {
     return (
-        <div style={{ backgroundColor: "red" }}>
-            {props.text}
+        <div style={{ backgroundColor: props.lightcol }}>
+            <div>
+                <img src={"/" + props.headerimage} alt={props.headerimage} />
+            </div>
+            <div style={{ backgroundColor: props.darkcol }}>
+                <p style={{ fontFamily: "'Fira Code', Arial"}}>{props.text}</p>
+            </div>
+            
         </div>
     )
 }

src/components/Textbox.tsx

@@ -1 +1,2 @@
+@import "@fontsource/fira-code/400.css";
 @import "tailwindcss";

src/index.css

@@ -10,26 +10,50 @@ function Home() {
         <div className="flex-1 flex flex-col">
 
           {/* logo */}
-          <div>Logo</div>
+          <div><img src="logo.png" alt="Logo" /></div>
 
           {/* python and alien code */}
           <div className="flex">
             <div className="flex-1">
-              Python Code
+              <Textbox
+                lightcol="#005DA9"
+                darkcol="#002E53"
+                text="Python Code"
+                headerimage="pythoncode.png"
+              />
             </div>
             <div className="flex-1">
-              Alien Code
+              <Textbox
+                lightcol="#00A93D"
+                darkcol="#00531F"
+                text="Alien Code"
+                headerimage="aliencode.png"
+              />
             </div>
           </div>
 
           {/* task */}
-          <div>task</div>
+          <div>
+            <Textbox
+                lightcol="#5E5E5E"
+                darkcol="#2E2E2E"
+                text="Task"
+                headerimage="task.png"
+              />
+          </div>
         </div>
 
         {/* right */}
         <div className="flex-1">
           <div>Code</div>
-          <div>Output</div>
+          <div>
+            <Textbox
+                lightcol="#5E5E5E"
+                darkcol="#2E2E2E"
+                text="Output"
+                headerimage="output.png"
+              />
+          </div>
         </div>