Blog Detail Page Added #38
+1
-1
@@ -50,7 +50,7 @@ function Routes() {
|
||||
<Route exact path="/eoffer" component={HomeOne} />
|
||||
{/*<Route exact path="/news" component={News} />*/}
|
||||
<Route exact path="/blog" component={Blog} />
|
||||
<Route exact path="/blog/blogdetail" component={BlogDetail} />
|
||||
<Route exact path="/blog/blogdetail/:id" component={BlogDetail} />
|
||||
<Route exact path="/use-cases" component={UseCases} />
|
||||
{/*<Route exact path="/news/single-news" component={SingleNews} />*/}
|
||||
<Route exact path="/service" component={Service} />
|
||||
|
||||
+25
-62
@@ -1,67 +1,30 @@
|
||||
import React from 'react';
|
||||
import singlePost from '../../assets/images/single-post/1.jpg';
|
||||
import author from '../../assets/images/single-post/author.png';
|
||||
import cmnt1 from '../../assets/images/single-post/c1.png';
|
||||
import cmnt2 from '../../assets/images/single-post/c2.png';
|
||||
import cmnt3 from '../../assets/images/single-post/c3.png';
|
||||
import React from "react";
|
||||
import singlePost from "../../assets/images/single-post/1.jpg";
|
||||
|
||||
function Blog() {
|
||||
return (
|
||||
<>
|
||||
<div className="single-post-area">
|
||||
<div className="post-thumb">
|
||||
<img src={singlePost} alt="" />
|
||||
</div>
|
||||
<h4 className="article-title">Logotype Masterclass with Jessica Hische</h4>
|
||||
<p>
|
||||
Lost the plot morish bleeder absolutely bladdered my lady chinwag that bleeding
|
||||
Eaton blag, cheeky bugger burke matie boy brown bread say pukka off his nut
|
||||
sloshed mufty, squiffy show off show off pick your nose and blow off brolly bite
|
||||
your arm off bloke bubble and squeak hotpot happy days. Old spiffing cras bugger
|
||||
blimey chancer me old mucker vagabond you mug, amongst absolutely bladdered
|
||||
spend a penny ruddy wellies he lost his bottle hanky panky up the kyver bender,
|
||||
give us a bell my good sir car boot pear shaped young delinquent victoria sponge
|
||||
tomfoolery. Lavatory knackered pukka chip shop a blinding shot cor blimey guvnor
|
||||
bodge blower, barmy faff about cheeky nice one at public school. Have it down
|
||||
the pub posh matie boy wind up hunky-dory, he lost his bottle the full monty
|
||||
bugger all mate cheeky bugger cras chancer, absolutely bladdered amongst
|
||||
tomfoolery pukka. Knackered
|
||||
</p>
|
||||
<p>
|
||||
James Bond old happy days the wireless cracking goal bloke me old mucker, arse
|
||||
over tit blower mush the bee's knees chip shop the BBC, say lemon squeezy
|
||||
blatant what a load of rubbish bog-standard nancy boy. Mush spiffing good time
|
||||
brown bread cheeky bite your arm off chip shop bugger all mate, my lady down the
|
||||
pub is faff about pukka.
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
I don't want no agro brilliant are you taking the piss skive off super boot
|
||||
chancer don't get shirty.
|
||||
</p>
|
||||
<cite>Indigo Violet</cite>
|
||||
</blockquote>
|
||||
<p>
|
||||
That faff about the full monty blower bubble and squeak cheeky old matie boy
|
||||
burke, the bee's knees what a load of rubbish golly gosh mufty is Elizabeth
|
||||
squiffy, lurgy chimney pot Jeffrey Richard naff Queen's English cheesed off. Old
|
||||
bonnet cheesed off lurgy me old mucker a blinding shot bits and bobs lavatory
|
||||
barney, say no biggie jolly good mush chancer pukka what a load of rubbish,
|
||||
Harry don't get shirty with me arse over tit he lost his bottle spiffing good
|
||||
time bubble and squeak say. I bog Harry a load of old tosh quaint brown bread
|
||||
get stuffed mate bobby, lemon squeezy boot bum bag chimney pot codswallop
|
||||
amongst, lavatory twit bits and bobs pardon you daft ummm I'm telling. Blatant
|
||||
matie boy say bugger all mate butty gormless, you mug pukka happy days bobby.
|
||||
Down the pub what a load of rubbish geeza faff about chancer bits and bobs daft
|
||||
lavatory boot victoria sponge spend a penny grub ummm I'm telling, absolutely
|
||||
bladdered A bit of how's your father arse over tit do one chimney pot tomfoolery
|
||||
porkies owt to do with me spiffing good time zonked.
|
||||
</p>
|
||||
function Blog({ blogItem, imgUrl }) {
|
||||
const blogImg =
|
||||
blogItem?.meta_value != null
|
||||
? `${imgUrl}/${blogItem?.meta_value}`
|
||||
: singlePost;
|
||||
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="single-post-area">
|
||||
<div className="post-thumb">
|
||||
<img src={blogImg} alt="" />
|
||||
</div>
|
||||
<h4 className="article-title">{blogItem?.post_title}</h4>
|
||||
<div dangerouslySetInnerHTML={{ __html: blogItem?.post_content }}></div>
|
||||
</div>
|
||||
{/* <blockquote>
|
||||
<p>
|
||||
I don't want no agro brilliant are you taking the piss skive off super
|
||||
boot chancer don't get shirty.
|
||||
</p>
|
||||
<cite>Indigo Violet</cite>
|
||||
</blockquote> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Blog;
|
||||
|
||||
@@ -1,45 +1,83 @@
|
||||
import React from 'react';
|
||||
import useToggle from '../../Hooks/useToggle';
|
||||
import BackToTop from '../BackToTop';
|
||||
import FooterHomeOne from '../HomeOne/FooterHomeOne';
|
||||
import Drawer from '../Mobile/Drawer';
|
||||
import Blog from './Blog';
|
||||
import BlogSideBar from './BlogSideBar';
|
||||
import HeaderNews from './HeaderNews';
|
||||
import HeroNews from './HeroNews';
|
||||
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import useToggle from "../../Hooks/useToggle";
|
||||
import BackToTop from "../BackToTop";
|
||||
import FooterHomeOne from "../HomeOne/FooterHomeOne";
|
||||
import Drawer from "../Mobile/Drawer";
|
||||
import Blog from "./Blog";
|
||||
import BlogData from "../../Services/BlogData";
|
||||
import BlogSideBar from "./BlogSideBar";
|
||||
import HeaderNews from "./HeaderNews";
|
||||
import HeroNews from "./HeroNews";
|
||||
import StickyHeaderNav from "../StickyHeader/StickyHeaderNav";
|
||||
|
||||
/**
|
||||
* Renders the blog detail page.
|
||||
*/
|
||||
function BlogDetail() {
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
return (
|
||||
<>
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
{/* <StickyHeaderNav action={drawerAction.toggle} /> */}
|
||||
<HeaderNews action={drawerAction.toggle} />
|
||||
<HeroNews
|
||||
title="Blog"
|
||||
breadcrumb={[
|
||||
{ link: '/', title: 'home' },
|
||||
{ link: '/blog', title: 'Blogs' },
|
||||
{ link: '/blog/blogdetail', title: 'TITLE OF THE ARTICLE*****' },
|
||||
]}
|
||||
/>
|
||||
<section className="blogpage-section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-8 col-md-7">
|
||||
<Blog />
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-5">
|
||||
<BlogSideBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<FooterHomeOne />
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
const [drawer, drawerAction] = useToggle(false);
|
||||
const [blogs, setBlogs] = useState([]);
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchBlogs = async () => {
|
||||
try {
|
||||
const res = await BlogData();
|
||||
setBlogs(res.data);
|
||||
} catch (err) {
|
||||
console.log("Error loading blogdata", err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchBlogs();
|
||||
}, []);
|
||||
|
||||
const blogItem = useMemo(() => {
|
||||
return blogs.blogdata?.find((item) => +item.id === +id);
|
||||
}, [blogs, id]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Renders the drawer component */}
|
||||
<Drawer drawer={drawer} action={drawerAction.toggle} />
|
||||
|
||||
{/* Renders the header component */}
|
||||
<HeaderNews action={drawerAction.toggle} />
|
||||
|
||||
{/* Renders the hero section */}
|
||||
<HeroNews
|
||||
title="Blog"
|
||||
breadcrumb={[
|
||||
{ link: "/", title: "Home" },
|
||||
{ link: "/blog", title: "Blogs" },
|
||||
{
|
||||
link: "/blog/blogdetail",
|
||||
title: blogItem ? blogItem.post_title : "Post not found",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Renders the blog content and sidebar */}
|
||||
<section className="blogpage-section">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-8 col-md-7">
|
||||
<Blog blogItem={blogItem} imgUrl={blogs?.image_url} />
|
||||
</div>
|
||||
<div className="col-lg-4 col-md-5">
|
||||
<BlogSideBar blogs={blogs} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Renders the footer */}
|
||||
<FooterHomeOne />
|
||||
|
||||
{/* Renders the back-to-top button */}
|
||||
<BackToTop />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogDetail;
|
||||
|
||||
@@ -1,102 +1,88 @@
|
||||
import React from 'react';
|
||||
import BlogImg1 from '../../assets/images/blog/p1.jpg';
|
||||
import BlogImg2 from '../../assets/images/blog/p2.jpg';
|
||||
import BlogImg3 from '../../assets/images/blog/p3.jpg';
|
||||
import BlogImg4 from '../../assets/images/blog/p4.jpg';
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import BlogImg1 from "../../assets/images/blog/p1.jpg";
|
||||
|
||||
function BlogSideBar() {
|
||||
return (
|
||||
<div className="blog-sidebar">
|
||||
/**
|
||||
* Renders a sidebar for a blog.
|
||||
* @param {Object} blogs - An object containing the data for the blog posts.
|
||||
* @returns {JSX.Element} - JSX code that renders the blog sidebar.
|
||||
*/
|
||||
function BlogSideBar({ blogs }) {
|
||||
/**
|
||||
* Renders other blog posts.
|
||||
* This is an Array of JSX elements representing the other blog posts.
|
||||
*/
|
||||
const renderOtherBlogPosts = () => {
|
||||
return blogs?.blogdata?.slice(0, 4).map((post) => {
|
||||
const blogDate = new Date(post.post_date).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
|
||||
<aside className="widget widget-categories">
|
||||
{/*<h3 className="widget-title">Categories</h3>*/}
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">About</a>
|
||||
{/*<span>(24)</span>*/}
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sign up</a>
|
||||
{/*<span>(15)</span>*/}
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Login</a>
|
||||
<span>(8)</span>
|
||||
</li>
|
||||
{/*<li>*/}
|
||||
{/* <a href="#">IT & Software</a>*/}
|
||||
{/* <span>(13)</span>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li>*/}
|
||||
{/* <a href="#">Photography</a>*/}
|
||||
{/* <span>(4)</span>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li>*/}
|
||||
{/* <a href="#">Technology</a>*/}
|
||||
{/* <span>(16)</span>*/}
|
||||
{/*</li>*/}
|
||||
<li>
|
||||
<a href="https://blog.wrenchboard.com/">More Articles</a>
|
||||
{/*<span>(12)</span>*/}
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
<aside className="widget widget-trend-post">
|
||||
<h3 className="widget-title">Other Posts</h3>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg1} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Using creative problem Solving</a>
|
||||
</h5>
|
||||
<span>March 10, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg2} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Fundamentals of UI Design</a>
|
||||
</h5>
|
||||
<span>Jan 14, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg3} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Making music with Other people</a>
|
||||
</h5>
|
||||
<span>April 12, 2020</span>
|
||||
</div>
|
||||
<div className="popular-post">
|
||||
<a href="single-post.html">
|
||||
<img src={BlogImg4} alt="" />
|
||||
</a>
|
||||
<h5>
|
||||
<a href="single-post.html">Brush strokes energize Trees in paintings</a>
|
||||
</h5>
|
||||
<span>July 4, 2020</span>
|
||||
</div>
|
||||
</aside>
|
||||
{/*<aside className="widget">*/}
|
||||
{/* <h3 className="widget-title">Popular Tags</h3>*/}
|
||||
{/* <div className="tags">*/}
|
||||
{/* <a href="#">Bisy LMS</a>*/}
|
||||
{/* <a href="#">Design</a>*/}
|
||||
{/* <a href="#">General</a>*/}
|
||||
{/* <a href="#">Online</a>*/}
|
||||
{/* <a href="#">Prevention</a>*/}
|
||||
{/* <a href="#">Artist</a>*/}
|
||||
{/* <a href="#">Education</a>*/}
|
||||
{/* <a href="#">Motivation</a>*/}
|
||||
{/* <a href="#">Politico</a>*/}
|
||||
{/* <a href="#">Live Cases</a>*/}
|
||||
{/* </div>*/}
|
||||
{/*</aside>*/}
|
||||
const blogImg =
|
||||
post.meta_value != null
|
||||
? `${blogs?.image_url}/${post.meta_value}`
|
||||
: BlogImg1;
|
||||
|
||||
return (
|
||||
<div className="popular-post" key={post.id}>
|
||||
<Link to={`/blog/blogdetail/${post?.id}`}>
|
||||
<img src={blogImg} alt="blog-img" style={{top: "20px"}} loading="lazy" />
|
||||
</Link>
|
||||
<h5>
|
||||
<Link to={`/blog/blogdetail/${post?.id}`}>{post?.post_title}</Link>
|
||||
</h5>
|
||||
<span>{blogDate}</span>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="blog-sidebar">
|
||||
<aside className="widget widget-categories">
|
||||
{/*<h3 className="widget-title">Categories</h3>*/}
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">About</a>
|
||||
{/*<span>(24)</span>*/}
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Sign up</a>
|
||||
{/*<span>(15)</span>*/}
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Login</a>
|
||||
<span>(8)</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blog.wrenchboard.com/">More Articles</a>
|
||||
{/*<span>(12)</span>*/}
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
<aside className="widget widget-trend-post">
|
||||
<h3 className="widget-title">Other Posts</h3>
|
||||
{renderOtherBlogPosts()}
|
||||
</aside>
|
||||
{/*<aside className="widget">*/}
|
||||
{/* <h3 className="widget-title">Popular Tags</h3>*/}
|
||||
{/* <div className="tags">*/}
|
||||
{/* <a href="#">Bisy LMS</a>*/}
|
||||
{/* <a href="#">Design</a>*/}
|
||||
{/* <a href="#">General</a>*/}
|
||||
{/* <a href="#">Online</a>*/}
|
||||
{/* <a href="#">Prevention</a>*/}
|
||||
{/* <a href="#">Artist</a>*/}
|
||||
{/* <a href="#">Education</a>*/}
|
||||
{/* <a href="#">Motivation</a>*/}
|
||||
{/* <a href="#">Politico</a>*/}
|
||||
{/* <a href="#">Live Cases</a>*/}
|
||||
{/* </div>*/}
|
||||
{/*</aside>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogSideBar;
|
||||
|
||||
@@ -1,26 +1,20 @@
|
||||
import React, { useState } from 'react';
|
||||
import blogOne from '../../assets/images/blog-1.jpg';
|
||||
import blogTwo from '../../assets/images/blog-2.jpg';
|
||||
import blogThree from '../../assets/images/blog-3.jpg';
|
||||
import Blogs from '../News/Blogs';
|
||||
|
||||
|
||||
function BlogHomeOne() {
|
||||
return (
|
||||
<>
|
||||
<section className="appie-blog-area pt-45 pb-95">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Our latest blog posts</h3>
|
||||
</div>
|
||||
<section className="appie-blog-area pt-45 pb-95">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="appie-section-title text-center">
|
||||
<h3 className="appie-title">Our latest blog posts</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Blogs pathname='/' />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
<Blogs pathname='/' />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,96 +1,81 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import blogOne from '../../assets/images/blog/1.jpg';
|
||||
import BlogData from '../../Services/BlogData';
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import blogOne from "../../assets/images/blog/1.jpg";
|
||||
import BlogData from "../../Services/BlogData";
|
||||
|
||||
function Blogs({pathname}) {
|
||||
const [blogs, setBlogs] = useState([])
|
||||
/**
|
||||
* Fetches blog data from an API and renders the blogs on the page.
|
||||
* Displays a maximum of six blogs on the home page and all blogs on other pages.
|
||||
*/
|
||||
function Blogs({ pathname }) {
|
||||
const [blogs, setBlogs] = useState([]);
|
||||
|
||||
useEffect(()=>{
|
||||
BlogData().then(res => {
|
||||
setBlogs(res.data)
|
||||
}).catch(err => {
|
||||
console.log('Error loading blogdata', err)
|
||||
})
|
||||
},[])
|
||||
useEffect(() => {
|
||||
const fetchBlogs = async () => {
|
||||
try {
|
||||
const res = await BlogData();
|
||||
setBlogs(res.data);
|
||||
} catch (err) {
|
||||
console.log("Error loading blogdata", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
{ pathname == '/' ? // ON HOME PAGE LIMIT TO SIX(6) BLOGS
|
||||
blogs?.blogdata?.map((i, index)=> {
|
||||
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
||||
var postDt = new Date(i.post_date).toLocaleDateString("en-US", options);
|
||||
var blgImg = i.meta_value != null ? `${blogs?.blogconfig?.media_url}/${i.meta_value}` : blogOne;
|
||||
if(index < 6){
|
||||
return (
|
||||
<div key={i.id} className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-blog-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="3000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={blgImg} alt={i.post_title} />
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li>{postDt}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<a href={i.guid}>
|
||||
{i.post_title}
|
||||
</a>
|
||||
</h3>
|
||||
<a href={i.guid}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
: // ON OTHER PAGES SHOW ALL BLOG
|
||||
blogs?.blogdata?.map((i, index)=> {
|
||||
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
||||
var postDt = new Date(i.post_date).toLocaleDateString("en-US", options);
|
||||
var blgImg = i.meta_value != null ? `${blogs?.blogconfig?.media_url}/${i.meta_value}` : blogOne;
|
||||
return (
|
||||
<div key={i.id} className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-blog-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="3000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={blgImg} alt={i.post_title} />
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li>{postDt}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<a href={i.guid}>
|
||||
{i.post_title}
|
||||
</a>
|
||||
</h3>
|
||||
<a href={i.guid}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
fetchBlogs();
|
||||
}, []);
|
||||
|
||||
const renderBlogs = () => {
|
||||
return blogs?.blogdata?.map((blog, index) => {
|
||||
const options = {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
};
|
||||
const postDt = new Date(blog.post_date).toLocaleDateString(
|
||||
"en-US",
|
||||
options
|
||||
);
|
||||
const blgImg =
|
||||
blog.meta_value != null
|
||||
? `${blogs?.blogconfig?.media_url}/${blog.meta_value}`
|
||||
: blogOne;
|
||||
|
||||
return (
|
||||
<div key={blog.id} className="col-lg-4 col-md-6">
|
||||
<div
|
||||
className="appie-blog-item mt-30 wow animated fadeInUp"
|
||||
data-wow-duration="3000ms"
|
||||
data-wow-delay="200ms"
|
||||
>
|
||||
<div className="thumb">
|
||||
<img src={blgImg} alt={blog.post_title} />
|
||||
</div>
|
||||
<div className="content">
|
||||
<div className="blog-meta">
|
||||
<ul>
|
||||
<li>{postDt}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3 className="title">
|
||||
<Link to={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</Link>
|
||||
</h3>
|
||||
<a href={blog.guid}>
|
||||
Learn More <i className="fal fa-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
{pathname === "/" ? renderBlogs()?.slice(0, 6) : renderBlogs()}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Blogs;
|
||||
export default Blogs;
|
||||
Reference in New Issue
Block a user