dros/src/pages/view/ImageProcessingPage.tsx

import React from 'react';
import ImageProcessingPageLarge from './ImageProcessingPageLarge';
import ImageProcessingPageMedium from './ImageProcessingPageMedium';
import ImageProcessingPageSmall from './ImageProcessingPageSmall';
import useEffectiveBreakpoint from '../../hooks/useEffectiveBreakpoint';

const ImageProcessingPage = () => {
  const screens = useEffectiveBreakpoint();

  return (
    <>
      {screens.xxl && <ImageProcessingPageLarge />}
      {screens.xl && !screens.xxl && <ImageProcessingPageMedium />}
      {screens.lg && !screens.xl && <ImageProcessingPageMedium />}
      {screens.sm && !screens.lg && <ImageProcessingPageSmall />}
      {screens.xs && !screens.sm && <ImageProcessingPageSmall />}
    </>
  );
};

export default ImageProcessingPage;