mip-website/pages/page/news/[slug].js

import React, { useEffect } from 'react'
import parse from 'html-react-parser'
import axios from 'axios'
import AppContainer from '../../appContainer'
import { FiChevronLeft, FiUser } from 'react-icons/fi'
import Link from 'next/link'
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCardImage,
  MDBCardText,
  MDBCardTitle,
  MDBCol,
  MDBContainer,
  MDBListGroupItem,
  MDBRow,
  MDBTypography
} from 'mdb-react-ui-kit'
import Image from 'next/image'
import { AppFile, AppUrl } from '../../../lib/api'
import { Tag, TagLabel, HStack } from '@chakra-ui/react'

const moment = require('moment-jalaali')

const News = ({ post }) => {
  const Parallax = ({ quality }) => {
    return AppFile(`panel-public/uploads/${post.cover}`)
  }
  return (
    <AppContainer title={post.title}>
      <div className='parallax-container'>
        <h1
          style={{ width: '95%', lineHeight: '2' }}
          className={'center-align text-white service-text font-weight-bold header_back'}
        >
          {post.title}{' '}
        </h1>
        <Image
          loader={Parallax}
          src='Parallax.png'
          className={'responsive-img shadow-5'}
          alt='Picture of the author'
          width={2050}
          height={1050}
          priority
        />
      </div>
      <br />
      <MDBContainer>
        <div className={'RTL bk image_center responsive-img'}>
          <style jsx>
            {`
              * {
                font-weight: 800;
                font-family: yekanBakh !important;
              }
              * span span span {
                background-color: red;
                color: red;
              }

              img {
                max-width: 100% !important;
                height: auto !important;
              }
            `}
          </style>
          <MDBRow className='row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 g-4'>
            <MDBCol xs={12} md={12} lg={9}>
              <MDBCard style={{ borderTop: '4px solid #39a2a5', borderRadius: 0 }}>
                <MDBCardBody>
                  <MDBCardTitle className={'flex align-items-center justify-content-between'}>
                    <div>{post.title}</div>
                  </MDBCardTitle>
                  <hr />
                  <br />
                  <MDBCardText
                    className='text-right news-content right !bk-light right-align'
                    style={{ direction: 'rtl', lineHeight: '2.3' }}
                  >
                    {parse(post.text.replace('/n', ' '))}
                    <hr />
                    <HStack className='flex sm:flex-col' spacing={4}>
                      <Tag size='md' className='flex gap-x-10' borderRadius='full'>
                        <TagLabel className='text-sm p-2'>سرمایه گذاری</TagLabel>
                      </Tag>
                      <Tag size='md' className='flex gap-x-10' borderRadius='full'>
                        <TagLabel className='text-sm p-2'>بیمارستان پرند </TagLabel>
                      </Tag>
                      <Tag size='md' className='flex gap-x-10' borderRadius='full'>
                        <TagLabel className='text-sm p-2'>شهر پرند </TagLabel>
                      </Tag>
                      
                    </HStack>
                  </MDBCardText>
                </MDBCardBody>
              </MDBCard>
            </MDBCol>
            <MDBCol xs={12} md={12} lg={3}>
              {/* <Link href={'https://panel.mehriranianco.ir/welcome'}>
                <MDBCardImage
                  className={'rounded-6 cursor-pointer'}
                  style={{ width: 512, height: 275 }}
                  src={'/resource/images/price-anim.gif'}
                />
              </Link> */}
              {/* <Link href={'https://panel.mehriranianco.ir/welcome'}>
                <MDBCardImage
                  className={'rounded-6 cursor-pointer mt-3'}
                  style={{ width: 512, height: 275 }}
                  src={'/resource/images/SequenceyEKTANET.gif'}
                />
              </Link> */}
              <MDBCard shadow='5' border='info' className={'border mt-4'}>
                <MDBCardBody>
                  <MDBCardTitle>مطالب اخیر </MDBCardTitle>
                  <hr />
                  <MDBCardText className={'mt-4'}>
                    {/* <Link href={'https://panel.mehriranianco.ir/welcome'}>
                      <MDBListGroupItem style={{ cursor: 'pointer' }} className={'border-none bk-light p-1'}>
                        <FiChevronLeft />
                        خرید سهام
                      </MDBListGroupItem>
                    </Link> */}
                    <Link href={'/page/news/34'}>
                      <MDBListGroupItem style={{ cursor: 'pointer' }} className={'border-none bk-light p-1'}>
                        <FiChevronLeft />
                        انتقال سهام
                      </MDBListGroupItem>
                    </Link>
                    {/* <Link href={'/page/news/29'}>
                      <MDBListGroupItem className={'border-none bk-light p-1'}>
                        <FiChevronLeft />
                        سرمایه گذاری بدون ریسک
                      </MDBListGroupItem>
                    </Link> */}
                    <MDBListGroupItem className={'border-none bk-light p-1'}>
                      <FiChevronLeft />
                      <a className={'bk-light text-black'} download href={'./take-stock.pdf'}>
                        دفترچه سهام
                      </a>
                    </MDBListGroupItem>
                    <MDBListGroupItem className={'border-none bk-light p-1'}>
                      <FiChevronLeft />
                      <a
                        className={'bk-light text-black'}
                        download
                        href={'./Explanatory_plan_of_Mehr_ranian_Parand_Hospital.pdf'}
                      >
                        دانلود طرح توجیهی
                      </a>
                    </MDBListGroupItem>
                  </MDBCardText>
                </MDBCardBody>
              </MDBCard>
            </MDBCol>
          </MDBRow>
          <br />
          <hr />
          <MDBTypography className='dana font-light'>
            تاریخ انتشار :{moment(post.created_at, 'YYYY-M-D HH:mm:ss').format('HH:mm - jYYYY/jM/jD')}
          </MDBTypography>
        </div>
      </MDBContainer>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </AppContainer>
  )
}

export default News

export const getServerSideProps = async context => {
  const { query } = context
  const posData = await axios.get(AppUrl(`news/${query.slug}`))
  const post = await posData.data

  return {
    props: { post, fallback: false } // will be passed to the page component as props
  }
}