temp: add resources

packages/resources/src/pages/settings/index.tsx

@@ -0,0 +1,104 @@
+import { useSettingsStore, Settings as SettingsType } from '@/pages/store/settings';
+import { Box, Typography, TextField, useTheme, Button } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Settings as SettingsIcon } from 'lucide-react';
+export const FormText = ({
+  label,
+  name,
+  value,
+  onChange,
+  disabled,
+  focused,
+}: {
+  label?: string;
+  name?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  focused?: boolean;
+}) => {
+  const theme = useTheme();
+  return (
+    <TextField
+      label={label}
+      variant='outlined'
+      id={label}
+      name={name || label}
+      value={value || ''}
+      onChange={onChange}
+      fullWidth
+      disabled={disabled}
+      focused={focused}
+    />
+  );
+};
+export const Settings = () => {
+  const { settings, updateSettings } = useSettingsStore();
+  const [config, setConfig] = useState<SettingsType>({});
+  useEffect(() => {
+    setConfig(settings);
+  }, [settings]);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let { name, value } = e.target;
+    console.log(name, value, e.target);
+    name = name.toLowerCase();
+    setConfig({ ...config, [name]: value });
+  };
+  const theme = useTheme();
+  const handleSave = async () => {
+    updateSettings(config);
+  };
+  return (
+    <Box
+      sx={{
+        padding: 2,
+        backgroundColor: 'white',
+        borderRadius: 2,
+        boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
+        width: '80%',
+        // maxWidth: '600px',
+        margin: '0 auto',
+        marginTop: 4,
+        [theme.breakpoints.down('sm')]: {
+          width: '90%',
+        },
+      }}>
+      <div className='flex items-center gap-3 mb-8'>
+        <SettingsIcon className='w-8 h-8 text-amber-600' />
+        <Typography
+          variant='h1'
+          className='text-amber-900'
+          sx={{
+            fontSize: { xs: '1.3rem', sm: '2rem' },
+            fontWeight: 'bold',
+          }}>
+          Upload Settings
+        </Typography>
+      </div>
+      <form>
+        <Box mb={2}>
+          <FormText label='Key' value={config.key} onChange={handleChange} focused={true} />
+        </Box>
+        <Box mb={2}>
+          <FormText label='Version' value={config.version} onChange={handleChange} disabled={true} />
+        </Box>
+        <Box mb={2}>
+          <FormText label='Username' value={config.username} onChange={handleChange} disabled={true} />
+        </Box>
+        <Box mb={2}>
+          <FormText label='Prefix' value={config.prefix} onChange={handleChange} disabled={true} />
+        </Box>
+        <Box mb={2}>
+          <Button
+            variant='contained'
+            sx={{
+              color: 'white',
+            }}
+            onClick={handleSave}>
+            保存
+          </Button>
+        </Box>
+      </form>
+    </Box>
+  );
+};