Merge remote-tracking branch 'origin/main' into tobi-dev

frontend/src/screens/CreateStation.jsx

@@ -1,11 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
+import { createStation } from "../utils/StationsCreate";
+
+// I UNDERSTAND THIS!! --Noah
 
 function CreateStation() {
-  const [joinMethod, setJoinMethod] = useState('');
-  const [password, setPassword] = useState('');
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
 
   const handleCreateStation = () => {
-    console.log('Creating station with password:', password);
+    createStation(name, description);
   };
 
   return (
@@ -35,52 +38,18 @@ function CreateStation() {
               <h1>Create a Station on Serena</h1>
             </header>
 
-            <main className="create-station-form">
-              <div className="join-method-section">
-                <h2>How should people be able to join your station?</h2>
-                
-                <div className="radio-option">
-                  <label>
-                    <input
-                      type="radio"
-                      name="joinMethod"
-                      value="password"
-                      checked={joinMethod === 'password'}
-                      onChange={(e) => setJoinMethod(e.target.value)}
-                    />
-                    <span className="radio-custom"></span>
-                    Password
-                  </label>
-                </div>
+      <main className="create-station-content">
+        <textarea onChange={(e) => setName(e.target.value)} />
+        <textarea onChange={(e) => setDescription(e.target.value)} />
 
-                {joinMethod === 'password' && (
-                  <div className="password-input-section">
-                    <label htmlFor="station-password">Station Password:</label>
-                    <input
-                      type="password"
-                      id="station-password"
-                      value={password}
-                      onChange={(e) => setPassword(e.target.value)}
-                      placeholder="Enter station password"
-                    />
-                  </div>
-                )}
-              </div>
-
-              <button 
-                className="create-station-final-btn"
-                onClick={handleCreateStation}
-                disabled={joinMethod !== 'password' || !password.trim()}
-              >
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-                </svg>
-                Create Radio Station
-              </button>
-            </main>
-          </div>
-        </div>
-      </div>
+        <button
+          className="create-station-final-btn"
+          onClick={handleCreateStation}
+          disabled={!name || !description}
+        >
+          Create Radio Station
+        </button>
+      </main>
     </div>
   );
 }