mip-website/pages/components/doctors.js

import React from 'react';
import {
    MDBCard,
    MDBCardBody,
    MDBCardTitle,
    MDBCardText,
    MDBCardImage,
    MDBBtn,
    MDBContainer,
    MDBRow, MDBCol
} from 'mdb-react-ui-kit';
import {useRouter} from "next/router";
import AppContainer from "../appContainer";

const Doctors = ({children}) => {
    const router = useRouter();

    const dataPageDoctors = (
        <MDBContainer>
            <h5 style={{ marginTop: '2rem' }} className={'right-align font-weight-bold'}>
                کادر درمان بیمارستان مهر ایرانیان
                <hr />
            </h5>
            <br/>
            <MDBRow className='row-cols-1 row-cols-md-4 g-6'>
                <MDBCol>
                    <MDBCard className='h-80'>
                        <MDBCardImage
                            src='https://zendegionline.ir/zendegionline/8cc3/files/1139429.jpg'
                            alt='...'
                            position='top'
                        />
                        <MDBCardBody>
                            <MDBCardTitle className={'text-center'}> دکتر محمود علیزاده</MDBCardTitle>
                            <MDBCardText className={'text-center mt-3'}>
                                متخصص قلب و عروق
                            </MDBCardText>
                        </MDBCardBody>
                    </MDBCard>
                </MDBCol>
                <MDBCol>
                    <MDBCard className='h-80'>
                        <MDBCardImage
                            src='https://zendegionline.ir/zendegionline/8cc3/files/1139429.jpg'
                            alt='...'
                            position='top'
                        />
                        <MDBCardBody>
                            <MDBCardTitle className={'text-center'}> دکتر محمود علیزاده</MDBCardTitle>
                            <MDBCardText className={'text-center mt-3'}>
                                متخصص قلب و عروق
                            </MDBCardText>
                        </MDBCardBody>
                    </MDBCard>
                </MDBCol>
                <MDBCol>
                    <MDBCard className='h-80'>
                        <MDBCardImage
                            src='https://zendegionline.ir/zendegionline/8cc3/files/1139429.jpg'
                            alt='...'
                            position='top'
                        />
                        <MDBCardBody>
                            <MDBCardTitle className={'text-center'}> دکتر محمود علیزاده</MDBCardTitle>
                            <MDBCardText className={'text-center mt-3'}>
                                متخصص قلب و عروق
                            </MDBCardText>
                        </MDBCardBody>
                    </MDBCard>
                </MDBCol>
                <MDBCol>
                    <MDBCard className='h-80'>
                        <MDBCardImage
                            src='https://zendegionline.ir/zendegionline/8cc3/files/1139429.jpg'
                            alt='...'
                            position='top'
                        />
                        <MDBCardBody>
                            <MDBCardTitle className={'text-center'}> دکتر محمود علیزاده</MDBCardTitle>
                            <MDBCardText className={'text-center mt-3'}>
                                متخصص قلب و عروق
                            </MDBCardText>
                        </MDBCardBody>
                    </MDBCard>
                </MDBCol>
            </MDBRow>
            {children}
        </MDBContainer>
    )
    return (
        <div>
            {router.pathname === '/' ? dataPageDoctors :   <AppContainer children={dataPageDoctors} />}
        </div>
    );
};

export default Doctors;