Hino_Thamrin/components/Common/new/NewsList.js

import Link from "next/link";
import * as Icon from 'react-feather';


const NewsList = ({company,news,pages,current})=>{
    if(news&&news.length>0){
        const pagination = ()=>{
            var paging = [];
            for(var i=1;i<=pages;i++){
                paging.push(
                    <li className={`page-item ${i==current?'active':''}`}>
                    <Link key={i} href={`/news?p=${i}`}>
                            <a className="page-link" >{i}</a>
                    </Link></li>
                );
            }
            return paging;
        };
        const listNews = news.map((data,idx)=>{
            return(
            <div key={idx} className="col-lg-4 col-md-6">
                <div className="single-blog-post">
                    <div className="blog-image">
                        <Link href={`/news/details/${data.id}`}>
                            <a>
                                <img src={(!data.attributes.Image.data)?'/images/blog-image/blog1.jpg':`/api/util?img=${encodeURIComponent(data.attributes.Image.data.attributes.url)}`} alt="image" />
                            </a>
                        </Link>

                        <div className="date">
                            <Icon.Calendar /> {new Date(data.attributes.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                        </div>
                    </div>

                    <div className="blog-post-content">
                        <h3>
                            <Link href={`/news/details/${data.id}`}>
                                <a>{data.attributes.Title}</a>
                            </Link>
                        </h3>

                        {/* <span>By <a >Admin</a></span> */}
                        <br/>
                        <Link href={`/news/details/${data.id}`}>
                            <a className="read-more-btn">
                                Read More <Icon.ArrowRight />
                            </a>
                        </Link>
                    </div>
                </div>
            </div>);
        });
        return(
            <div className="blog-area ptb-80">
                    <div className="container">
                        <div className="row justify-content-center">
                            {listNews}
                            {/* Pagination */}
                            <div className="col-lg-12 col-md-12">
                                <div className="pagination-area">
                                    <nav aria-label="Page navigation">
                                        <ul className="pagination justify-content-center">
                                            {(current!='1')?(<li className="page-item"><Link href={`./?p=${parseInt(current)-1}`}>
                                                <a className="page-link" >Prev</a>
                                            </Link></li>):""}
                                            {pagination()}
                                            {(current!=pages)?<li className="page-item"><Link href={`./?p=${parseInt(current)+1}`}>
                                                <a className="page-link" >Next</a>
                                            </Link></li>:""}
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="shape1">
                        <img src="/images/shape1.png" alt="shape" />
                    </div>
                    <div className="shape2 rotateme">
                        <img src="/images/shape2.svg" alt="shape" />
                    </div>
                    <div className="shape3">
                        <img src="/images/shape3.svg" alt="shape" />
                    </div>
                    <div className="shape4">
                        <img src="/images/shape4.svg" alt="shape" />
                    </div>
                    <div className="shape6 rotateme">
                        <img src="/images/shape4.svg" alt="shape" />
                    </div>
                    <div className="shape7">
                        <img src="/images/shape4.svg" alt="shape" />
                    </div>
                    <div className="shape8 rotateme">
                        <img src="/images/shape2.svg" alt="shape" />
                    </div>
                </div>
        );  
    }
    else{
        return (
            <div className="pt-80 pb-50 justify-content-center">
                <center><h5>Belum ada berita untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
            </div>
        );
    }
    

};

export default NewsList;