feat: use radio for proxy type + style improvements

src/components/organisms/ProxyForm.tsx

@@ -1,32 +1,24 @@
 import React, { useState } from 'react';
-import { TextField, Button, MenuItem, Box } from '@mui/material';
+import { TextField, Button, RadioGroup, FormControlLabel, Radio, Box } from '@mui/material';
 import { styled } from '@mui/system';
 import axios from 'axios';
 
-const proxyTypes = [
-  { label: 'HTTP', value: 'http' },
-  { label: 'HTTPS', value: 'https' },
-  { label: 'SOCKS5', value: 'socks5' },
-];
-
 const FormContainer = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
-  gap: '20px',
+  gap: '16px',
-  width: '400px',
-  margin: '0 auto',
   padding: '20px',
   backgroundColor: '#f9f9f9',
   borderRadius: '8px',
 });
 
 const FormControl = styled(Box)({
-    marginBottom: '10px',
+  marginBottom: '16px',
 });
 
 const ProxyForm: React.FC = () => {
   const [proxyConfig, setProxyConfig] = useState({
-    type: '',
+    type: 'http',
     server: '',
     username: '',
     password: '',
@@ -41,7 +33,7 @@ const ProxyForm: React.FC = () => {
     e.preventDefault();
     try {
       const response = await axios.post('/api/proxy', proxyConfig);
-      alert(`Successfully added the proxy`);
+      alert(`Success!`);
     } catch (error) {
       alert('Error submitting proxy configuration');
     }
@@ -50,22 +42,20 @@ const ProxyForm: React.FC = () => {
   return (
     <FormContainer>
       <form onSubmit={handleSubmit}>
-        <TextField
+        <FormControl>
-          select
+          <RadioGroup
-          label="Proxy Type"
             name="type"
             value={proxyConfig.type}
             onChange={handleChange}
-          fullWidth
+            row
-          required
           >
-          {proxyTypes.map((option) => (
+            <FormControlLabel value="http" control={<Radio />} label="HTTP" />
-            <MenuItem key={option.value} value={option.value}>
+            <FormControlLabel value="https" control={<Radio />} label="HTTPS" />
-              {option.label}
+            <FormControlLabel value="socks5" control={<Radio />} label="SOCKS5" />
-            </MenuItem>
+          </RadioGroup>
-          ))}
+        </FormControl>
-        </TextField>
 
+        <FormControl>
           <TextField
             label="Proxy Server URL"
             name="server"
@@ -75,7 +65,9 @@ const ProxyForm: React.FC = () => {
             required
             helperText="e.g., http://proxy-server.com:8080"
           />
+        </FormControl>
 
+        <FormControl>
           <TextField
             label="Username (Optional)"
             name="username"
@@ -83,7 +75,9 @@ const ProxyForm: React.FC = () => {
             onChange={handleChange}
             fullWidth
           />
+        </FormControl>
 
+        <FormControl>
           <TextField
             label="Password (Optional)"
             name="password"
@@ -92,6 +86,7 @@ const ProxyForm: React.FC = () => {
             type="password"
             fullWidth
           />
+        </FormControl>
 
         <Button variant="contained" color="primary" type="submit" fullWidth>
           Submit Proxy