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 = (
        <MDBContainer>
            <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}
        </MDBContainer>
    )
    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,
            fallback:false
        }, // will be passed to the page component as props
    }
}