feat(wip): proxy form

src/components/organisms/ProxyForm.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { TextField, Button, MenuItem, 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',
+  width: '400px',
+  margin: '0 auto',
+  padding: '20px',
+  backgroundColor: '#f9f9f9',
+  borderRadius: '8px',
+});
+
+const ProxyForm: React.FC = () => {
+  const [proxyConfig, setProxyConfig] = useState({
+    type: '',
+    server: '',
+    username: '',
+    password: '',
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setProxyConfig({ ...proxyConfig, [name]: value });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post('/api/proxy', proxyConfig);
+      alert(`Successfully added the proxy`);
+    } catch (error) {
+      alert('Error submitting proxy configuration');
+    }
+  };
+
+  return (
+    <FormContainer>
+      <form onSubmit={handleSubmit}>
+        <TextField
+          select
+          label="Proxy Type"
+          name="type"
+          value={proxyConfig.type}
+          onChange={handleChange}
+          fullWidth
+          required
+        >
+          {proxyTypes.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          label="Proxy Server URL"
+          name="server"
+          value={proxyConfig.server}
+          onChange={handleChange}
+          fullWidth
+          required
+          helperText="e.g., http://proxy-server.com:8080"
+        />
+
+        <TextField
+          label="Username (Optional)"
+          name="username"
+          value={proxyConfig.username}
+          onChange={handleChange}
+          fullWidth
+        />
+
+        <TextField
+          label="Password (Optional)"
+          name="password"
+          value={proxyConfig.password}
+          onChange={handleChange}
+          type="password"
+          fullWidth
+        />
+
+        <Button variant="contained" color="primary" type="submit" fullWidth>
+          Submit Proxy
+        </Button>
+      </form>
+    </FormContainer>
+  );
+};
+
+export default ProxyForm;