Added functionality to CreateStation Screen

This commit is contained in:
Noah Knapp 2025-08-01 22:16:33 +02:00
parent ea328d337a
commit 9dea570291
3 changed files with 35 additions and 34 deletions

View file

@ -1,12 +1,14 @@
import React, { useState } from 'react';
import { createStation } from '../utils/Stations';
// I UNDERSTAND THIS!! --Noah
function CreateStation() {
const [joinMethod, setJoinMethod] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const handleCreateStation = () => {
// Handle station creation logic here
console.log('Creating station with password:', password);
createStation(name, description);
};
return (
@ -16,40 +18,13 @@ function CreateStation() {
</header>
<main className="create-station-content">
<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)}
/>
Password
</label>
</div>
{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>
<textarea onChange={(e) => setName(e.target.value)} />
<textarea onChange={(e) => setDescription(e.target.value)} />
<button
className="create-station-final-btn"
onClick={handleCreateStation}
disabled={joinMethod !== 'password' || !password.trim()}
disabled={!name || !description}
>
Create Radio Station
</button>
@ -58,4 +33,5 @@ function CreateStation() {
);
}
export default CreateStation;