mip-website/pages/News.js

import React from 'react'
import {
  MDBCard,
  MDBCardImage,
  MDBCardBody,
  MDBCardTitle,
  MDBCardText,
  MDBRow,
  MDBCol,
  MDBContainer,
  MDBCardHeader,
  MDBBtn,
  MDBIcon,
  MDBInputGroupText,
  MDBTypography
} from 'mdb-react-ui-kit'
import axios from 'axios'
import Link from 'next/link'
import AppContainer from './appContainer'
import { useRouter } from 'next/router'
import { AppUrl } from '../lib/api'
import { DownloadIcon } from '@chakra-ui/icons'

const News = ({ data, children }) => {
  const router = useRouter()
  const query = router.query.list

  const dataPage = (
    <div className='lg:mx-20 sm:mx-5'>
      <h5 style={{ marginTop: '2rem' }} className={'right-align font-weight-bold'}>
        اطلاعیه ها{' '}
      </h5>
      <hr />
      <div>
        <MDBTypography
          style={{ direction: 'rtl', borderRadius: '6px solid', borderRight: '6px  solid #1266f1', borderLeft: 'none' }}
          note
          noteColor='primary'
        >
          <DownloadIcon className={'ml-2'} />
          <a
            title={'دانلود دفترچه معرفی و فروش سهام عمومی بیمارستان تخصصی مهر ایرانیان پرند'}
            download
            href={'./take-stock.pdf'}
          >
            {' '}
            دانلود دفترچه معرفی و فروش سهام عمومی بیمارستان تخصصی مهر پرند
          </a>
        </MDBTypography>
        <MDBTypography
          style={{ direction: 'rtl', borderRadius: '6px solid', borderRight: '6px  solid #1266f1', borderLeft: 'none' }}
          note
          noteColor='primary'
        >
          <DownloadIcon className={'ml-2'} />
          <a
            title={'دانلود طرح توجیهی  بیمارستان تخصصی مهر ایرانیان پرند'}
            download
            href={'./Explanatory_plan_of_Mehr_ranian_Parand_Hospital.pdf'}
          >
            {' '}
            دانلود طرح توجیهی بیمارستان تخصصی مهر ایرانیان پرند
          </a>
        </MDBTypography>
      </div>
      <br />
      {/* <MDBRow dir={'rtl'} className='row-cols-1 row-cols-md-3 g-4'>
                {data && data.map(({ id, slug, title }) => (
                    <MDBCol key={id}>
                        <Link href={`page/news/${id}`} >
                        <MDBCard className='mb-3 h-3/12 new-card'>
                            <MDBCardHeader title={title} className={'right-align bk-med RTL  font-weight-bold border-bottom-1 border-white '}>{title} </MDBCardHeader>
                            <MDBCardBody>
                                <MDBCardText className={'right-align RTL text-summery'}>
                                    {slug}
                                </MDBCardText>
                                <div className={'flex justify-content-end'}>
                                    <MDBBtn rounded className=' RTL text-primary-teal    bg-white'>
                                        مشاهده 
                                    </MDBBtn>
                                </div>
                            </MDBCardBody>
                        </MDBCard>
                        </Link>
                    </MDBCol>
                ))}
            </MDBRow> */}
      {children}
    </div>
  )
  return <div>{/* {query ? <AppContainer children={dataPage} title={'اطلاعیه ها '} /> : dataPage} */}</div>
}

export default News

export const getServerSideProps = async context => {
//   const allPostsData = await axios.get(AppUrl('news'))
//   const data = await allPostsData.data
  return {
    props: {
      data: null,
      fallback: false
    } // will be passed to the page component as props
  }
}