feat: standard proxy and automatic proxy rotation tabs

src/components/organisms/ProxyForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { styled } from '@mui/system';
-import { TextField, Button, Switch, FormControlLabel, Box, Typography } from '@mui/material';
+import { TextField, Button, Switch, FormControlLabel, Box, Typography, Tabs, Tab } from '@mui/material';
 import { sendProxyConfig } from '../../api/proxy';
 import { useGlobalInfoStore } from '../../context/globalInfo';
 
@@ -27,6 +27,7 @@ const ProxyForm: React.FC = () => {
         username: '',
         password: '',
     });
+    const [tabIndex, setTabIndex] = useState(0);
 
     const { notify } = useGlobalInfoStore();
 
@@ -82,11 +83,20 @@ const ProxyForm: React.FC = () => {
         });
     };
 
+    const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+        setTabIndex(newValue);
+    };
+
     return (
         <FormContainer>
             <Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
                 Proxy Configuration
             </Typography>
+            <Tabs value={tabIndex} onChange={handleTabChange}>
+                <Tab label="Standard Proxy" />
+                <Tab label="Automatic Proxy Rotation" />
+            </Tabs>
+            {tabIndex === 0 && (
                 <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}>
                     <FormControl>
                         <TextField
@@ -147,6 +157,14 @@ const ProxyForm: React.FC = () => {
                         Add Proxy
                     </Button>
                 </Box>
+            )}
+            {tabIndex === 1 && (
+                <Box sx={{ maxWidth: 400, width: '100%', textAlign: 'center', marginTop: '20px' }}>
+                    <Button variant="contained" color="primary">
+                        Join Our Cloud Waitlist
+                    </Button>
+                </Box>
+            )}
         </FormContainer>
     );
 };