WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

blog components

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-09-12 08:32:55 -04:00
parent 093786c919
commit 216dbdf371
8 changed files with 444 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Blog/Blog.js
+67
View File
@@ -0,0 +1,67 @@
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';
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>
</div>
</>
);
}
export default Blog;
src/components/Blog/BlogDetail.js
+45
View File
@@ -0,0 +1,45 @@
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';
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 />
</>
);
}
export default BlogDetail;
src/components/Blog/BlogSideBar.js
+102
View File
@@ -0,0 +1,102 @@
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';
function BlogSideBar() {
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="#">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>*/}
</div>
);
}
export default BlogSideBar;
src/components/Blog/Blogs.js
+96
View File
@@ -0,0 +1,96 @@
import React, { useEffect, useState } from 'react';
import blogOne from '../../assets/images/blog/1.jpg';
import BlogData from '../../Services/BlogData';
function Blogs({pathname}) {
const [blogs, setBlogs] = useState([])
useEffect(()=>{
BlogData().then(res => {
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>
)
})
}
</div>
</>
);
}
export default Blogs;
src/components/Blog/HeaderNews.js
+54
View File
@@ -0,0 +1,54 @@
import React, { useEffect } from 'react';
import logo from '../../assets/images/wrenchboard-logo-text.png';
import StickyMenu from '../../lib/StickyMenu';
import Navigation from '../Navigation';
import getConfig from './../../Config/config'
function HeaderNews({ action }) {
var site = getConfig()[0];
useEffect(() => {
StickyMenu();
});
return (
<>
<header className="appie-header-area appie-header-page-area appie-sticky">
<div className="container">
<div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
<div className="row align-items-center">
<div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
<div className="wrench-logo-box">
<a href="/">
<img src={logo} alt="" />
</a>
</div>
</div>
<div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
<div className="appie-header-main-menu">
<Navigation />
</div>
</div>
<div className="col-lg-4 col-md-7 col-sm-6 col-6 order-2 order-sm-3">
<div className="appie-btn-box text-right">
<a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
<i className="fal fa-user"></i> Login
</a>
<a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
Get Started
</a>
<div
onClick={(e) => action(e)}
className="toggle-btn ml-30 canvas_open d-lg-none d-block"
>
<i className="fa fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</>
);
}
export default HeaderNews;
src/components/Blog/HeroNews.js
+31
View File
@@ -0,0 +1,31 @@
import React from 'react';
import { Link } from 'react-router-dom';
function HeroNews({ title, breadcrumb }) {
return (
<>
<div className="appie-page-title-area">
<div className="container">
<div className="row">
<div className="col-lg-12">
<div className="appie-page-title-item">
<h3 className="title">{title}</h3>
<nav aria-label="breadcrumb">
<ol className="breadcrumb">
{breadcrumb.map((value) => (
<li key={Math.random()} className="breadcrumb-item">
<Link to={value.link}>{value.title}</Link>
</li>
))}
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default HeroNews;
src/components/Blog/index.js
+42
View File
@@ -0,0 +1,42 @@
import React from 'react';
import useToggle from '../../Hooks/useToggle';
import BackToTop from '../BackToTop';
import FooterHomeOne from '../HomeOne/FooterHomeOne';
import Drawer from '../Mobile/Drawer';
import Blogs from './Blogs';
import BlogSideBar from './BlogSideBar';
import HeaderNews from './HeaderNews';
import HeroNews from './HeroNews';
import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
function Blog() {
const [drawer, drawerAction] = useToggle(false);
return (
<>
<Drawer drawer={drawer} action={drawerAction.toggle} />
{/* <StickyHeaderNav action={drawerAction.toggle} /> */}
<HeaderNews action={drawerAction.toggle} />
<HeroNews
title="Blogs"
breadcrumb={[
{ link: '/', title: 'home' },
{ link: '/news', title: 'Blogs' },
]}
/>
<section className="blogpage-section">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-7">
<Blogs />
</div>
</div>
</div>
</section>
<FooterHomeOne />
<BackToTop />
</>
);
}
export default Blog;