101 lines
4.1 KiB
JavaScript

import React, { Fragment } from 'react';
import Navbar2 from '../../components/Navbar2/Navbar2';
import PageTitle from '../../components/pagetitle/PageTitle';
import Scrollbar from '../../components/scrollbar/scrollbar';
import { useRouter } from 'next/router';
import Campaign from '../../api/campaign';
import Footer from '../../components/footer/Footer';
import Image from 'next/image';
import Link from 'next/link';
const ServiceDetailsPage = () => {
const router = useRouter();
const { slug } = router.query;
const service = Campaign.find(item => item.slug === slug);
if (!service) {
return (
<Fragment>
<Navbar2 />
<div className="container text-center py-5">
<h2>Service not found!</h2>
<Link href="/">Back to Home</Link>
</div>
<Footer />
<Scrollbar />
</Fragment>
);
}
return (
<Fragment>
<Navbar2 />
<PageTitle pageTitle={service.sTitle} pagesub={'Services Details'} />
<section className="wpo-blog-single-section section-padding">
<div className="container">
<div className="row">
<div className="col-12">
<div className="wpo-blog-content">
<div className="post format-standard-image">
<div className="entry-media">
<div style={{ width: "100%", height: "400px", position: "relative" }}>
<Image
src={service.sImgS}
alt={service.sTitle}
fill
style={{ objectFit: "cover" }}
/>
</div>
</div>
<div className="entry-meta">
<ul>
<li>
<i className="fi flaticon-user"></i>{' '}
<span>{service.author || 'Admin'}</span>
</li>
{/* <li>
<i className="fi flaticon-calendar"></i> {service.date}
</li> */}
</ul>
</div>
<h2>{service.sTitle}</h2>
<div dangerouslySetInnerHTML={{ __html: service.descriptiondetail }} />
{service.blockquotes && service.blockquotes.map((quote, idx) => (
<blockquote key={idx}>{quote}</blockquote>
))}
{service.gallery && (
<div className="gallery">
{service.gallery.map((img, i) => (
<div key={i}>
<Image src={img} alt={`Gallery ${i}`} width={400} height={300} />
</div>
))}
</div>
)}
{/* {service.extraText && <p className="mt-4">{service.extraText}</p>} */}
</div>
</div>
</div>
</div>
</div>
</section>
<Footer />
<Scrollbar />
</Fragment>
);
};
export default ServiceDetailsPage;