Hino_Thamrin/components/Common/new/NewsDetail.js

import React from 'react';
import Link from 'next/link';
import * as Icon from 'react-feather';
import util from '../../../lib/util';


const NewsDetails = ({news,navigation,id}) => {
    const nav = navigation.map((i,idx)=>{
        if(navigation.length > 1){
            if(i.id>id){
                return(<div key={idx} className="prev-link-wrapper">
                <div className="info-prev-link-wrapper">
                        <Link href={`/news/${i.id}`}>
                            <a >
                                <span className="image-prev">
                                    <img src={(i.thumbnail)?`/api/util?img=${encodeURIComponent(i.thumbnail)}`:"/images/blog-image/blog2.jpg"} alt="image" />
                                    <span className="post-nav-title">Show</span>
                                </span>
                                <span className="prev-link-info-wrapper">
                                    <span className="prev-title">{i.title||"Other News"}</span>
                                    <span className="meta-wrapper">
                                        <span className="date-post">{new Date(i.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
                                    </span>
                                </span>
                            </a>
                            
                        </Link>
                    </div>
                </div>);
            }
            else if(i.id<id){
                return (
                    <div key={idx} className="next-link-wrapper">
                        <div className="info-next-link-wrapper">
                        <Link href={`/news/${i.id}`}>
                                <a >
                                   <span className="next-link-info-wrapper">
                                        <span className="next-title">{i.title||"Other News"}</span>
                                        <span className="meta-wrapper">
                                            <span className="date-post">{new Date(i.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
                                        </span>
                                    </span>
                                    <span className="image-next">
                                        <img src={(i.thumbnail)?`/api/util?img=${encodeURIComponent(i.thumbnail)}`:"/images/blog-image/blog2.jpg"} alt="image" />
                                        <span className="post-nav-title">Show</span>
                                    </span> 
                                </a>
                            </Link>
                        </div>
                    </div>
                );
            }
            else return "";   
        }
        else{
            
            return(<div key={idx} className="prev-link-wrapper">
            <div className="info-prev-link-wrapper">
                    <Link href={`/news/${i.id}`}>
                        <a >
                            <span className="image-prev">
                                <img src={(i.thumbnail)?`/api/util?img=${encodeURIComponent(i.thumbnail)}`:"/images/blog-image/blog2.jpg"} alt="image" />
                                <span className="post-nav-title">Show</span>
                            </span>
                            <span className="prev-link-info-wrapper">
                                <span className="prev-title">{i.title||"Other News"}</span>
                                <span className="meta-wrapper">
                                    <span className="date-post">{new Date(i.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
                                </span>
                            </span>
                        </a>
                        
                    </Link>
                </div>
            </div>);
        }
    });
    return (
        <>
            {/* <PageBanner pageTitle="Berita Terbaru" />  */}
            <div style={{height:"50px"}}/>
            <div className="blog-details-area ptb-80">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12 col-md-12">
                            <div className="blog-details-desc">
                                <center className="article-image justify-content-center">
                                    <img className="newsThumbnail" src={(news.Image.data)?`/api/util?img=${encodeURIComponent(news.Image.data.attributes.url)}`:'/images/bigdata-analytics/main-banner.jpg'} alt="image" />
                                </center>
                                <div className="article-content">
                                    <div className="entry-meta">
                                        <ul>
                                            <li>
                                                <Icon.Clock /> {new Date(news.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
                                            </li>
                                        </ul>
                                    </div>
 
                                    <h2>{news.Title}</h2> 
                                    <p>
                                        {util.htmlParse(news.Description||'')}
                                    </p>
                                </div>
                                {(navigation.length>0)?(
                                    <div className="startp-post-navigation">
                                        {nav}
                                    </div>    
                                ):""
                                }
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/* <div className="blog-area pt-100 pb-50">
                <div className="container">
                    <div className="section-title">
                        <h2>{news.Title}</h2>
                        <img src={
                        (news.Image.data)?`/api/util?img=${encodeURIComponent(news.Image.data.attributes.url)}`:url('/images/bigdata-analytics/main-banner.jpg')
                        }/>
                    </div>
                    <div className="col-lg-4 col-md-6">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                    <div className="row justify-content-center">
                        <div className="col-lg-4 col-md-6">
                            <div className="single-blog-post-box bg-f4faff">
                                <div className="entry-thumbnail">
                                    <Link href="/blog-details">
                                        <a>
                                            <img src="/images/blog-image/blog1.jpg" alt="image" />
                                        </a>
                                    </Link>
                                </div>

                                <div className="entry-post-content">
                                    <div className="entry-meta">
                                        <ul>
                                            <li><a >Admin</a></li>
                                            <li>August 15, 2021</li>
                                        </ul>
                                    </div>

                                    <h3>
                                        <Link href="/blog-details">
                                            <a>Making Peace With The Feast Or Famine Of Freelancing</a>
                                        </Link>
                                    </h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>

                                    <Link href="/blog-details">
                                        <a className="learn-more-btn">
                                            Read Story <Icon.Plus />
                                        </a>
                                    </Link>
                                </div>
                            </div>
                        </div>

                        <div className="col-lg-4 col-md-6">
                            <div className="single-blog-post-box bg-f4faff">
                                <div className="entry-thumbnail">
                                    <Link href="/blog-details">
                                        <a><img src="/images/blog-image/blog2.jpg" alt="image" /></a>
                                    </Link>
                                </div>

                                <div className="entry-post-content">
                                    <div className="entry-meta">
                                        <ul>
                                            <li><a >Admin</a></li>
                                            <li>August 18, 2021</li>
                                        </ul>
                                    </div>

                                    <h3>
                                        <Link href="/blog-details">
                                            <a>I Used The Web For A Day On A 50 MB Budget</a>
                                        </Link>
                                    </h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
                                    
                                    <Link href="/blog-details">
                                        <a className="learn-more-btn">
                                            Read Story <Icon.Plus />
                                        </a>
                                    </Link>
                                </div>
                            </div>
                        </div>

                        <div className="col-lg-4 col-md-6">
                            <div className="single-blog-post-box bg-f4faff">
                                <div className="entry-thumbnail">
                                    <Link href="/blog-details">
                                        <a><img src="/images/blog-image/blog3.jpg" alt="image" /></a>
                                    </Link>
                                </div>

                                <div className="entry-post-content">
                                    <div className="entry-meta">
                                        <ul>
                                            <li><a >Admin</a></li>
                                            <li>August 15, 2021</li>
                                        </ul>
                                    </div>

                                    <h3>
                                        <Link href="/blog-details">
                                            <a>Here are the 5 most telling signs of micromanagement</a>
                                        </Link>
                                    </h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
                                    
                                    <Link href="/blog-details">
                                        <a className="learn-more-btn">
                                            Read Story <Icon.Plus />
                                        </a>
                                    </Link>
                                </div>
                            </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> */}
        </>
        
    )
}

export default NewsDetails;