dros/src/pages/view/components/OperationPanel.tsx

import { Divider, Flex } from 'antd';
import { useSelector } from 'react-redux';
import FunctionArea from './FunctionArea';
import TransferArea from './TransferArea';
import SendPanelForView from '../../output/SendPanelForView';
import MeasurementPanel from './MeasurementPanel';
import MorePanel from './MorePanel';
import AdvancedProcessingPanel from './AdvancedProcessingPanel';
import RectCropPanel from './RectCropPanel';
import MarkPanel from './MarkPanel';
import ImageStateControl from './ImageStateControl';
import { RootState } from '../../../states/store';
import SliderAdjustmentPanel from './SliderAdjustmentPanel';

const OperationPanel = () => {
  const currentPanel = useSelector(
    (state: RootState) => state.panelSwitchForView.currentPanel
  );

  const renderPanel = () => {
    switch (currentPanel) {
      case 'OperationPanel':
        return (
          <Flex
            vertical
            gap="small"
            style={{
              height: '100%',
              overflowY: 'auto',
              //padding: '0.5rem' 
            }}
          >
            <FunctionArea />
            <Divider style={{ margin: 0 }} />
            <ImageStateControl />
            <Divider style={{ margin: 0 }} />
            <TransferArea />
          </Flex>
        );
      case 'SendPanel':
        return <SendPanelForView />;
      case 'MeasurementPanel':
        return <MeasurementPanel />;
      case 'MorePanel':
        return <MorePanel />;
      case 'AdvancedProcessingPanel':
        return <AdvancedProcessingPanel />;
      case 'RectCropPanel':
        return <RectCropPanel />;
      case 'MarkPanel':
        return <MarkPanel />;
      case 'SliderAdjustmentPanel':
        return <SliderAdjustmentPanel />
      default:
        return (
          <Flex
            vertical
            gap="small"
            style={{
              height: '100%',
              overflowY: 'auto',
              padding: '0.5rem'
            }}
          >
            <FunctionArea />
            <Divider style={{ margin: 0 }} />
            <ImageStateControl />
            <Divider style={{ margin: 0 }} />
            <TransferArea />
          </Flex>
        );
    }
  };

  return <div style={{ height: '100%' }}>{renderPanel()}</div>;
};

export default OperationPanel;