Routing of single blog from blog gallery.
This commit is contained in:
DESKTOP-QHP1O2H\MIKE
@@ -4,23 +4,25 @@ import BGImg from "../../../assets/images/bread_crumb_bg.png";
|
||||
import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png";
|
||||
import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png";
|
||||
import SiteService from "../../../vendors/service/siteService";
|
||||
|
||||
import Aos from "aos";
|
||||
const Main = ({ brdcum, bgimg }) => {
|
||||
const [firstBlog, setFirstBlog] = useState([]);
|
||||
// const [firstBlog, setFirstBlog] = useState([]);
|
||||
const [blogData, setBlogData] = useState([]);
|
||||
|
||||
const api = new SiteService();
|
||||
useEffect(() => {
|
||||
getBlogData();
|
||||
Aos.init();
|
||||
}, []);
|
||||
|
||||
const getBlogData = async () => {
|
||||
try {
|
||||
const res = await api.blogData();
|
||||
let firstBlogData = res.data.shift();
|
||||
// let firstBlogData = res.data.slice(0,1);
|
||||
|
||||
setBlogData(res.data);
|
||||
setFirstBlog([firstBlogData]);
|
||||
console.log(firstBlogData);
|
||||
// setFirstBlog(firstBlogData);
|
||||
|
||||
console.log(res.data);
|
||||
|
||||
|
||||
@@ -72,45 +74,54 @@ const Main = ({ brdcum, bgimg }) => {
|
||||
</div>
|
||||
|
||||
<section className="row_am blog_list_main">
|
||||
{firstBlog.length > 0 &&
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-lg-6"
|
||||
data-aos="fade-in"
|
||||
data-aos-duration="1500"
|
||||
>
|
||||
<div className="blog_img">
|
||||
<img
|
||||
src={firstBlog[0].meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
{/* <span>20 min ago</span> */}
|
||||
|
||||
<span>{new Date (firstBlog[0].post_date).toDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="blog_text">
|
||||
<div className="section_title">
|
||||
<h2>{firstBlog[0].post_title}</h2>
|
||||
<div dangerouslySetInnerHTML={{__html: firstBlog[0].post_content.substring(0,400)+' . . .'}}></div>
|
||||
<Link to={`/blog-single/${firstBlog[0].id}`} state={firstBlog[0]}>
|
||||
READ MORE
|
||||
</Link>
|
||||
{blogData.map((data,index) => {
|
||||
if (index == 0){
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div
|
||||
className="col-lg-6"
|
||||
data-aos="fade-in"
|
||||
data-aos-duration="1500"
|
||||
>
|
||||
<div className="blog_img">
|
||||
<img
|
||||
src={data.meta_value}
|
||||
alt="image"
|
||||
/>
|
||||
{/* <span>20 min ago</span> */}
|
||||
|
||||
<span>{new Date (data.post_date).toDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="blog_text">
|
||||
<div className="section_title">
|
||||
<h2>{data.post_title}</h2>
|
||||
<div dangerouslySetInnerHTML={{__html: data.post_content.substring(0,400)+' . . .'}}></div>
|
||||
<Link to={`/blog-single/${data.id}`} state={{data}}>
|
||||
READ MORE
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
|
||||
</section>
|
||||
<section className="row_am latest_story blog_list_story" id="blog">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{blogData.map((data) => (
|
||||
<div key={data.id} className="col-md-4">
|
||||
<div className="story_box" data-aos-duration="1500">
|
||||
{blogData.map((data, index) => {
|
||||
if (index > 0){
|
||||
return (
|
||||
<div key={data.id} className="col-md-4">
|
||||
<div className="story_box" data-aos="fade-up" data-aos-duration="1500">
|
||||
<div className="story_img">
|
||||
<img src={data.meta_value} alt="image" />
|
||||
<span>{new Date (data && data.post_date).toDateString()}</span>
|
||||
@@ -124,7 +135,11 @@ const Main = ({ brdcum, bgimg }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
)}
|
||||
|
||||
|
||||
})}
|
||||
</div>
|
||||
<div className="pagination_block">
|
||||
<ul>
|
||||
|
||||
@@ -56,6 +56,7 @@ const Main = ({brdcum}) => {
|
||||
<div className="blog_inner_pannel">
|
||||
<div className="review">
|
||||
<span>Review</span>
|
||||
{/* <span>45 min ago</span> */}
|
||||
<span>{new Date (data && data.post_modified).toDateString()}</span>
|
||||
|
||||
</div>
|
||||
@@ -67,19 +68,52 @@ const Main = ({brdcum}) => {
|
||||
</div>
|
||||
<div className="info">
|
||||
<h3>{data && data.post_name}</h3>
|
||||
<div dangerouslySetInnerHTML={{__html: data && data.post_content}}></div>
|
||||
|
||||
<div dangerouslySetInnerHTML={{__html: data && data.post_content}}></div>
|
||||
</div>
|
||||
|
||||
{/* <div className="info">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
|
||||
<p>Printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unnown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys centuries, but also the leap into electronic.</p>
|
||||
<h3>Why we are best</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
|
||||
<ul>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing and typesetting in </p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since the when</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only five centuries, but also the leap into electronic.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Lorem Ipsum is simply dummy text of the printing.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Dustry lorem Ipsum has been the industrys standard dummy text ev er since.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Unknown printer took a galley of type and scrambled it to make.</p></li>
|
||||
<li><p> <span className="icon"><i className="icofont-check-circled"></i></span> Type specimen book. It has survived not only.</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="two_img">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<img src="assets/images/blog_sub_01.png" alt="image" />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<img src="assets/images/blog_sub_02.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="info">
|
||||
<h3>Why we are best</h3>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic Lorem Ipsum is simply dummy text of the printing and typesettingindustry lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.</p>
|
||||
</div>
|
||||
<div className="quote_block">
|
||||
<span className="q_icon"><img src="assets/images/quote_icon.png" alt="image" /></span>
|
||||
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy.</h2>
|
||||
<p><span className="name">Mr. John Doe,</span> Apper Inc</p>
|
||||
</div> */}
|
||||
{/* <p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic industry.</p> */}
|
||||
<div className="blog_authore">
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
{/* <img src="assets/images/blog_d02.png" alt="image" /> */}
|
||||
</div>
|
||||
{/* <div className="avtar">
|
||||
<img src="assets/images/blog_d02.png" alt="image" />
|
||||
</div> */}
|
||||
<div className="text">
|
||||
{/* <h3>{data && data.post_author}</h3> */}
|
||||
<h3>{data && data.post_author}</h3>
|
||||
<span>{new Date (data && data.post_date).toDateString()}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="social_media">
|
||||
@@ -91,11 +125,70 @@ const Main = ({brdcum}) => {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="blog_tags">
|
||||
<ul>
|
||||
<li className="tags"><p>Tags:</p></li>
|
||||
<li><span>app,</span></li>
|
||||
<li><span>rating,</span></li>
|
||||
<li><span>development</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="row_am comment_section">
|
||||
<div className="container">
|
||||
<div className="section_title">
|
||||
<h2>3 Comments</h2>
|
||||
</div>
|
||||
<ul>
|
||||
{/* <li>
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d01.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>30 min ago</span>
|
||||
<h4>Dolly Shell</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in
|
||||
dustrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen. </p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="replay_comment">
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d02.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>15 min ago</span>
|
||||
<h4>Devil Joe</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the industrys standard dummy text ev er since the when.</p>
|
||||
</div>
|
||||
</li> */}
|
||||
<li>
|
||||
<div className="authore_info">
|
||||
<div className="avtar">
|
||||
<img src="assets/images/blog_d03.png" alt="image" />
|
||||
</div>
|
||||
<div className="text">
|
||||
<span>2 days ago</span>
|
||||
<h4>Sherly Shie</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting in dustry lorem Ipsum has been the in
|
||||
dustrys standard dummy text ev er since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen. </p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="row_am comment_form_section">
|
||||
<div className="container">
|
||||
|
||||
Reference in New Issue
Block a user