mip-website/pages/components/service.js

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Autoplay } from 'swiper'

import Link from 'next/link'
import {
  MDBCard,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBCardHeader,
  MDBCardFooter,
  MDBBtn,
  MDBTypography,
  MDBContainer,
  MDBRow,
  MDBCol
} from 'mdb-react-ui-kit'
import { useRouter } from 'next/router'
import AppContainer from '../appContainer'
import Image from 'next/image'
import { Button, Center, Flex, Heading, Input, InputGroup, InputLeftAddon, InputRightAddon } from '@chakra-ui/react'
import { Step, Steps, useSteps } from 'chakra-ui-steps'

SwiperCore.use([Autoplay])

// Import Swiper styles

const Parallax = ({ quality }) => {
  return `https://image.freepik.com/free-photo/blur-hospital_1203-7957.jpg`
}

const dataServiceList = (
  <>
    <div className='parallax-container'>
      <h2 className={'center-align text-dark service-text dana font-weight-bold'}> کلینیک ها و بخش ها </h2>
      <Image
        loader={Parallax}
        src='Parallax.png'
        className={'responsive-img shadow-5'}
        alt='Picture of the author'
        width={3000}
        height={1500}
      />
    </div>
    <div style={{ marginTop: 10 }} className='lg:mx-20 sm:mx-5'>          
      <div>
        <MDBTypography
          style={{ direction: 'rtl', borderRadius: '6px solid', borderRight: '6px  solid #1266f1', borderLeft: 'none' }}
          note
          noteColor='primary'
        >
          برای رزرو وقت روی هر کلینیک کلیک کنید
        </MDBTypography>
      </div>
      <MDBRow className='row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 g-4'>
        <MDBCol>
          <MDBCard className={'color-top-card'} alignment='center' style={{ maxWidth: '22rem', height: '250px' }}>
            <MDBCardHeader className={'center d-flex justify-content-center'}>
              <img width={'50'} src='https://image.flaticon.com/icons/png/512/2044/2044708.png' alt='' />
            </MDBCardHeader>
            <MDBCardBody>
              <MDBCardTitle className={'dana'}> بخش گوارش </MDBCardTitle>
              <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>

        <MDBCol>
          <MDBCard className={'color-top-card'} alignment='center' style={{ maxWidth: '22rem', height: '250px' }}>
            <MDBCardHeader className={'center d-flex justify-content-center'}>
              <img width={'50'} src='https://image.flaticon.com/icons/png/512/1839/1839377.png' alt='' />
            </MDBCardHeader>
            <MDBCardBody>
              <MDBCardTitle className={'dana'}> بخش قلب و عروق </MDBCardTitle>
              <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
        <MDBCol>
          <MDBCard className={'color-top-card'} alignment='center' style={{ maxWidth: '22rem', height: '250px' }}>
            <MDBCardHeader className={'center d-flex justify-content-center'}>
              <img width={'50'} src='https://image.flaticon.com/icons/png/512/2847/2847982.png' alt='' />
            </MDBCardHeader>
            <MDBCardBody>
              <MDBCardTitle className={'dana'}> بخش مغز و اعصاب </MDBCardTitle>
              <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
        <MDBCol>
          <MDBCard className={'color-top-card'} alignment='center' style={{ maxWidth: '22rem', height: '250px' }}>
            <MDBCardHeader className={'center d-flex justify-content-center'}>
              <img width={'50'} src='https://image.flaticon.com/icons/png/512/1610/1610185.png' alt='' />
            </MDBCardHeader>
            <MDBCardBody>
              <MDBCardTitle className={'dana'}> بخش دندان پزشکی </MDBCardTitle>
              <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
        <MDBCol>
          <MDBCard
            className={'color-top-card'}
            alignment='center'
            style={{ cursor: 'pointer', maxWidth: '32rem', height: '250px' }}
          >
            <MDBCardHeader className={'center d-flex justify-content-center'}>
              <img width={'50'} src='https://image.flaticon.com/icons/png/512/2660/2660065.png' alt='' />
            </MDBCardHeader>
            <MDBCardBody>
              <MDBCardTitle className={'dana'}> بخش کلیه و مجاری ادارای </MDBCardTitle>
              <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </div>
    <br />
  </>
)
const steps = [
  { label: 'Step 1', description: 'Step 1 description' },
  { label: 'Step 2', description: 'Step 2 description' },
  { label: 'Step 3', description: 'Step 3 description' },
  { label: 'Step 3', description: 'Step 3 description' },
  { label: 'Step 3', description: 'Step 3 description' },
  { label: 'Step 3', description: 'Step 3 description' },
  { label: 'Step 3', description: 'Step 3 description' },
  { label: 'Step 3', description: 'Step 3 description' }
]
const Service = () => {
  const router = useRouter()
  const dataMipService = [
    { id: 1, title: 'بخش اورژانس', icon: './resource/icons/hospital-c.png', description: 'اورژانس' },
    { id: 2, title: 'درمانگاه', icon: './resource/icons/hospital.png', description: 'درمانگاه تخصصی' },
    { id: 3, title: 'بخش بستری داخلی', icon: './resource/icons/hospital-bed.png', description: 'بستری داخلی' },
    { id: 4, title: 'بخش اسکوپی', icon: './resource/icons/scope.png', description: 'اسکوپی' },
    { id: 5, title: 'بخش پوست', icon: './resource/icons/dermis.png', description: 'زیبایی و لیزر' },
    { id: 6, title: 'بخش جراحی', icon: './resource/icons/surgery.png', description: 'تخصصی و زیبایی' },
    { id: 7, title: 'بخش اتاق عمل', icon: './resource/icons/operating-room.png', description: 'اتاق عمل' },
    { id: 8, title: 'بخش  مراقبت های ویژه ICU', icon: './resource/icons/ICU.png', description: 'ICU' },
    { id: 9, title: 'بخش  مراقبت های ویژه قلب CCU', icon: './resource/icons/CCU.png', description: 'CCU' },
    { id: 10, title: 'بخش  مراقبت های ویژه نوزدان NICU', icon: './resource/icons/NICU.png', description: 'NICU' },
    { id: 11, title: 'بخش  زایمان LDR', icon: './resource/icons/baby.png', description: 'LDR' },
    { id: 12, title: 'بخش  تصویر برداری', icon: './resource/icons/x-rays.png', description: 'سونوگرافی و ...' },
    { id: 13, title: 'بخش آزمایشگاه', icon: './resource/icons/test-tubes.png', description: 'تخصصی ، سلامت سنجی' },
    { id: 14, title: 'بخش فیزیوتراپی', icon: './resource/icons/spinal-cord.png', description: 'تست قلب و ...' }
  ]
  const { nextStep, prevStep, reset, activeStep } = useSteps({
    initialStep: 0
  })
  return (
    <>
      {router.pathname === '/' ? (
        <div className={'mt-5'}>
        <div className='lg:mx-20 sm:mx-5'> 
        <h5 style={{ marginTop: '2rem' }} className={'right-align font-weight-bold'}>
              کلینیک و بخش ها{' '}
            </h5>
            <hr />
            <br />
            <Swiper
              spaceBetween={20}
              navigation={true}
              slidesPerView={4}
              watchSlidesProgress
              // onSlideChange={() => console.log('slide change')}
              // onSwiper={(swiper) => console.log(swiper)}
              autoplay={{
                delay: 2500,
                disableOnInteraction: false
              }}
              breakpoints={{
                640: {
                  slidesPerView: 2,
                  spaceBetween: 20
                },
                360: {
                  slidesPerView: 1,
                  spaceBetween: 20
                },
                320: {
                  slidesPerView: 1,
                  spaceBetween: 20
                },
                596: {
                  width: 1080,
                  slidesPerView: 2,
                  spaceBetween: 20
                },
                526: {
                  slidesPerView: 1,
                  spaceBetween: 2
                },

                996: {
                  slidesPerView: 2,
                  spaceBetween: 40
                },
                860: {
                  slidesPerView: 2,
                  spaceBetween: 40
                },
                768: {
                  slidesPerView: 3,
                  spaceBetween: 40
                },
                972: {
                  slidesPerView: 3,
                  spaceBetween: 40
                },
                1024: {
                  slidesPerView: 5,
                  spaceBetween: 50
                }
              }}
            >
              {dataMipService.map((item, index) => {
                return (
                  <SwiperSlide key={index}>
                    <Link href={'components/service'}>
                      <MDBCard
                        className={'color-top-card '}
                        alignment='center'
                        style={{ maxWidth: '22rem', height: '250px' }}
                      >
                        <MDBCardHeader className={'center d-flex justify-content-center'}>
                          <img width={'50'} src={item.icon} alt='' />
                        </MDBCardHeader>
                        <MDBCardBody className={'d-flex flex-column justify-content-between'}>
                          <MDBCardTitle className={'dana'}> {item.title} </MDBCardTitle>
                          <MDBCardText className={'bk RTL'}>{item.description}</MDBCardText>
                        </MDBCardBody>
                      </MDBCard>
                    </Link>
                    <br />
                    <br />
                  </SwiperSlide>
                )
              })}
              <SwiperSlide>
                <MDBCard
                  className={'color-top-card'}
                  alignment='center'
                  style={{ cursor: 'pointer', maxWidth: '22rem', height: '250px' }}
                >
                  <MDBCardBody style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Link href={'components/service'}>
                      <MDBCardText className={'bk'}>
                        <span className={'RTL dana'}>بیشتر ...</span>{' '}
                      </MDBCardText>
                    </Link>
                  </MDBCardBody>
                </MDBCard>
                <br />
                <br />
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      ) : (
        <AppContainer title={'کلینیک ها و بخش ها '}>
          <div className='parallax-container'>
            <h1 className={'center-align text-dark service-text dana font-weight-bold'}> کلینیک ها و بخش ها </h1>
            <Image
              loader={Parallax}
              src='Parallax.png'
              className={'responsive-img shadow-5'}
              alt='Picture of the author'
              width={3000}
              height={1500}
            />
          </div>
          <div style={{ marginTop: 10 }} className='lg:mx-20 sm:mx-5'> 
            <div>
              <MDBTypography
                style={{
                  direction: 'rtl',
                  borderRadius: '6px solid',
                  borderRight: '6px  solid #1266f1',
                  borderLeft: 'none'
                }}
                note
                noteColor='primary'
              >
                برای رزرو وقت روی هر کلینیک کلیک کنید
              </MDBTypography>
            </div>
            <MDBRow className='row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 g-4'>
              {dataMipService.map((item, index) => {
                return (
                  <MDBCol>
                    <MDBCard
                      key={index}
                      className={'color-top-card '}
                      alignment='center'
                      style={{ maxWidth: '22rem', height: '250px' }}
                    >
                      <MDBCardHeader className={'center d-flex justify-content-center'}>
                        <img width={'50'} src={item.icon} alt='' />
                      </MDBCardHeader>
                      <MDBCardBody className={'d-flex flex-column justify-content-between'}>
                        <MDBCardTitle className={'dana'}> {item.title} </MDBCardTitle>
                        <MDBCardText className={'bk RTL'}>{item.description}</MDBCardText>
                      </MDBCardBody>
                    </MDBCard>
                  </MDBCol>
                )
              })}
            </MDBRow>
          </div>
          <br />
        </AppContainer>
      )}
    </>
  )
}

export default Service