feat: add config action pages

src/components/robot/pages/RobotConfigPage.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { 
+  Box, 
+  Typography, 
+  Button, 
+  IconButton,
+  Divider,
+  useTheme
+} from '@mui/material';
+import { ArrowBack } from '@mui/icons-material';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+interface RobotConfigPageProps {
+  title: string;
+  children: React.ReactNode;
+  onSave?: () => void;
+  onCancel?: () => void;
+  saveButtonText?: string;
+  cancelButtonText?: string;
+  showSaveButton?: boolean;
+  showCancelButton?: boolean;
+  isLoading?: boolean;
+  icon?: React.ReactNode;
+  onBackToSelection?: () => void;
+  backToSelectionText?: string;
+}
+
+export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
+  title,
+  children,
+  onSave,
+  onCancel,
+  saveButtonText = "Save",
+  cancelButtonText = "Cancel",
+  showSaveButton = true,
+  showCancelButton = true,
+  isLoading = false,
+  icon,
+  onBackToSelection,
+  backToSelectionText = "← Back"
+}) => {
+  const theme = useTheme();
+
+  const handleBack = () => {
+    if (onCancel) {
+      onCancel();
+    }
+  };
+
+  return (
+    <Box sx={{ 
+      maxWidth: 1000, 
+      margin: 'auto', 
+      px: 4,
+      py: 3,
+      minHeight: '80vh',
+      display: 'flex',
+      flexDirection: 'column',
+      width: '1000px',
+    }}>
+      <Box sx={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        minHeight: '64px',
+        mb: 2,
+        flexShrink: 0
+      }}>
+        <IconButton
+          onClick={handleBack}
+          sx={{
+            mr: 2,
+            color: theme.palette.text.primary,
+            '&:hover': {
+              bgcolor: theme.palette.action.hover
+            }
+          }}
+        >
+          <ArrowBack />
+        </IconButton>
+        {icon && (
+          <Box sx={{ mr: 2, color: theme.palette.text.primary }}>
+            {icon}
+          </Box>
+        )}
+        <Typography 
+          variant="h4" 
+          sx={{ 
+            fontWeight: 600,
+            color: theme.palette.text.primary,
+            lineHeight: 1.2
+          }}
+        >
+          {title}
+        </Typography>
+      </Box>
+      <Divider sx={{ mb: 4, flexShrink: 0 }} />
+
+      <Box sx={{ 
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0
+      }}>
+        {children}
+      </Box>
+
+      {(showSaveButton || showCancelButton || onBackToSelection) && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: onBackToSelection ? 'space-between' : 'flex-end',
+            gap: 2,
+            pt: 3,
+            mt: 2,
+            borderTop: `1px solid ${theme.palette.divider}`,
+            flexShrink: 0,
+            width: '100%',
+            px: 3
+          }}
+        >
+          {onBackToSelection && (
+            <Button
+              variant="outlined"
+              onClick={onBackToSelection}
+              disabled={isLoading}
+              sx={{
+                color: '#ff00c3',
+                borderColor: '#ff00c3',
+                bgcolor: 'whitesmoke',
+                '&:hover': {
+                  bgcolor: '#f0f0f0',
+                  borderColor: '#cc0099'
+                }
+              }}
+            >
+              {backToSelectionText}
+            </Button>
+          )}
+
+          <Box sx={{ display: 'flex', gap: 2 }}>
+          {showCancelButton && (
+            <Button
+              variant="outlined"
+              onClick={handleBack}
+              disabled={isLoading}
+              sx={{
+                color: '#ff00c3',
+                borderColor: '#ff00c3',
+                bgcolor: 'white',
+                '&:hover': {
+                  borderColor: '#cc0099',
+                  bgcolor: '#fff5fc',
+                },
+                textTransform: 'none',
+                fontWeight: 500,
+                px: 3
+              }}
+            >
+              {cancelButtonText}
+            </Button>
+          )}
+          {showSaveButton && onSave && (
+            <Button
+              variant="contained"
+              onClick={onSave}
+              disabled={isLoading}
+              sx={{
+                bgcolor: '#ff00c3',
+                '&:hover': {
+                  bgcolor: '#cc0099',
+                  boxShadow: 'none',
+                },
+                textTransform: 'none',
+                fontWeight: 500,
+                px: 3,
+                boxShadow: 'none',
+              }}
+            >
+              {isLoading ? 'Saving...' : saveButtonText}
+            </Button>
+          )}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};