66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
|
import Card from "../../UI/Card";
|
||
|
|
import CardHeader from "../../UI/CardHeader";
|
||
|
|
import { useState } from "react";
|
||
|
|
import FormGroup from "../components/FormGroup";
|
||
|
|
|
||
|
|
const WiFiCard = () => {
|
||
|
|
const [ssid, setSsid] = useState("");
|
||
|
|
const [password, setPassword] = useState("");
|
||
|
|
const [encryption, setEncryption] = useState("WPA2");
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="mb-4">
|
||
|
|
<CardHeader title={"WiFi"} />
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
<FormGroup>
|
||
|
|
<label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">SSID</label>
|
||
|
|
<input
|
||
|
|
id="ssid"
|
||
|
|
name="ssid"
|
||
|
|
type="text"
|
||
|
|
className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
|
||
|
|
placeholder="Enter SSID"
|
||
|
|
value={ssid}
|
||
|
|
onChange={e => setSsid(e.target.value)}
|
||
|
|
/>
|
||
|
|
</FormGroup>
|
||
|
|
<FormGroup>
|
||
|
|
<label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">Password</label>
|
||
|
|
<input
|
||
|
|
id="password"
|
||
|
|
name="password"
|
||
|
|
type="password"
|
||
|
|
className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
|
||
|
|
placeholder="Enter Password"
|
||
|
|
value={password}
|
||
|
|
onChange={e => setPassword(e.target.value)}
|
||
|
|
/>
|
||
|
|
</FormGroup>
|
||
|
|
<FormGroup>
|
||
|
|
<label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">WPA/Encryption Type</label>
|
||
|
|
<select
|
||
|
|
id="encryption"
|
||
|
|
name="encryption"
|
||
|
|
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
|
||
|
|
value={encryption}
|
||
|
|
onChange={e => setEncryption(e.target.value)}
|
||
|
|
>
|
||
|
|
<option value="WPA2">WPA2</option>
|
||
|
|
<option value="WPA3">WPA3</option>
|
||
|
|
<option value="WEP">WEP</option>
|
||
|
|
<option value="None">None</option>
|
||
|
|
</select>
|
||
|
|
</FormGroup>
|
||
|
|
<button
|
||
|
|
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
|
||
|
|
//onClick={() => handleWiFiSave(ssid, password, encryption)}
|
||
|
|
>
|
||
|
|
Save WiFi Settings
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default WiFiCard;
|