From 83e664eab4dc0f8a79f0e2c39934906704d2b6cb Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 3 Aug 2024 20:20:08 +0100 Subject: [PATCH] blog details page added --- app/blog/blogdetail/Blog.jsx | 64 +++++++++++++++++++ app/blog/blogdetail/BlogSideBar.js | 69 ++++++++++++++++++++ app/blog/blogdetail/[id]/page.js | 84 +++++++++++++++++++++++++ app/blog/blogdetail/[id]/page.tsx | 24 ------- app/blog/blogdetail/page.tsx | 24 ------- app/components/FooterHomeOne.js | 2 +- app/components/News/Blogs.js | 1 + app/lib/LazyImage.js | 1 + public/assets/images/single-post/1.jpg | Bin 0 -> 4408 bytes 9 files changed, 220 insertions(+), 49 deletions(-) create mode 100644 app/blog/blogdetail/Blog.jsx create mode 100644 app/blog/blogdetail/BlogSideBar.js create mode 100644 app/blog/blogdetail/[id]/page.js delete mode 100644 app/blog/blogdetail/[id]/page.tsx delete mode 100644 app/blog/blogdetail/page.tsx create mode 100644 public/assets/images/single-post/1.jpg diff --git a/app/blog/blogdetail/Blog.jsx b/app/blog/blogdetail/Blog.jsx new file mode 100644 index 0000000..6c19afe --- /dev/null +++ b/app/blog/blogdetail/Blog.jsx @@ -0,0 +1,64 @@ +import singlePost from "../../assets/images/single-post/1.jpg"; +import { BlogLoader, ImageLoader } from "../../lib/SkeletonLoaders"; +// import Image from "next/image"; +// import LazyImage from "../../lib/LazyImage"; + +/** + * Renders a blog post component. + * @returns {JSX.Element} The rendered blog post component. + */ +function Blog({ blogItem, imgUrl, loader }) { + // Generate a unique ID + const uniqueId = `element_${Math.random().toString(36).substr(2, 9)}`; + + const blogImg = `${imgUrl}/${blogItem?.meta_value || singlePost}`; + + const imgLoaderStyles = { + "--loader-width": "750px", + "--loader-height": "550px", + }; + + const headerLoaderStyles = { + "--text-container-width": "300px", + "--text-container-height": "18px", + }; + + const bodyTextLoaderStyles = { + "--text-container-width": "770px", + "--text-container-height": "15px", + }; + + return ( + <> +
+
+ {loader ? ( +
+ +
+ ) : ( + {blogItem?.meta_value + )} +
+ {loader ? ( +
+ +
+ ) : ( +

{blogItem?.post_title}

+ )} + {loader ? ( +
+ +
+ ) : ( +
+ )} +
+ + ); +} + +export default Blog; diff --git a/app/blog/blogdetail/BlogSideBar.js b/app/blog/blogdetail/BlogSideBar.js new file mode 100644 index 0000000..520a049 --- /dev/null +++ b/app/blog/blogdetail/BlogSideBar.js @@ -0,0 +1,69 @@ +import React from "react"; +import Link from "next/link"; +import BlogImg1 from "../../assets/images/blog/p1.jpg"; + +/** + * 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", + }); + + const blogImg = + post.meta_value != null + ? `${blogs?.image_url}/${post.meta_value}` + : BlogImg1; + + return ( +
+ + blog-img + +
+ {post?.post_title} +
+ {blogDate} +
+ ); + }); + }; + + return ( +
+ + +
+ ); +} + +export default BlogSideBar; diff --git a/app/blog/blogdetail/[id]/page.js b/app/blog/blogdetail/[id]/page.js new file mode 100644 index 0000000..a42cf9d --- /dev/null +++ b/app/blog/blogdetail/[id]/page.js @@ -0,0 +1,84 @@ +"use client" +import React, { useEffect, useMemo, useState } from 'react' +import { useParams } from 'next/navigation'; +import ServiceNav from '@/app/components/navigation/ServiceNav'; +import HeroNews from '@/app/components/News/HeroNews'; +import FooterHomeOne from '../../../components/FooterHomeOne'; +import BackToTop from '@/app/components/BackToTop'; +import BlogData from '@/app/Services/BlogData'; + +import Blog from '../Blog' +import BlogSideBar from '../BlogSideBar' + +// must be a better way to centralize the style = TEMPORARY USE +import '../../../assets/css/bootstrap.min.css'; +import '../../../assets/css/custom-animated.css'; +import '../../../assets/css/default.css'; +import '../../../assets/css/font-awesome.min.css'; +import '../../../assets/css/magnific-popup.css'; +import '../../../assets/css/main.css'; +import '../../../assets/css/style.css'; + + +function page() { + const [isLoading, setIsLoading] = useState(false); + const [blogs, setBlogs] = useState([]); + const { id } = useParams(); + + useEffect(() => { + const fetchBlogs = async () => { + setIsLoading(true); + try { + const res = await BlogData(); + setBlogs(res.data); + setIsLoading(false) + } catch (err) { + console.log("Error loading blogdata", err); + setIsLoading(false) + } + }; + + fetchBlogs(); + }, []); + + const blogItem = useMemo(() => { + return blogs?.blogdata?.find((item) => item.id == id); + }, [blogs, id]); + return ( + <> + + + {/* Renders the hero section */} + + + {/* Renders the blog content and sidebar */} +
+
+
+
+ +
+
+ +
+
+
+
+ + + + + ) +} + +export default page \ No newline at end of file diff --git a/app/blog/blogdetail/[id]/page.tsx b/app/blog/blogdetail/[id]/page.tsx deleted file mode 100644 index 3038944..0000000 --- a/app/blog/blogdetail/[id]/page.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import FooterHomeOne from '../../../components/FooterHomeOne'; - -// must be a better way to centralize the style = TEMPORARY USE -import '../../../assets/css/bootstrap.min.css'; -import '../../../assets/css/custom-animated.css'; -import '../../../assets/css/default.css'; -import '../../../assets/css/font-awesome.min.css'; -import '../../../assets/css/magnific-popup.css'; -import '../../../assets/css/main.css'; -import '../../../assets/css/style.css'; - - -function page() { - return ( - <> -
Bog Detail Here
- - - - ) -} - -export default page \ No newline at end of file diff --git a/app/blog/blogdetail/page.tsx b/app/blog/blogdetail/page.tsx deleted file mode 100644 index 543d84c..0000000 --- a/app/blog/blogdetail/page.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import FooterHomeOne from '../../components/FooterHomeOne'; - -// must be a better way to centralize the style = TEMPORARY USE -import '../../assets/css/bootstrap.min.css'; -import '../../assets/css/custom-animated.css'; -import '../../assets/css/default.css'; -import '../../assets/css/font-awesome.min.css'; -import '../../assets/css/magnific-popup.css'; -import '../../assets/css/main.css'; -import '../../assets/css/style.css'; - - -function page() { - return ( - <> -
Bog Detail Here
- - - - ) -} - -export default page \ No newline at end of file diff --git a/app/components/FooterHomeOne.js b/app/components/FooterHomeOne.js index c759fec..a6f1ab8 100644 --- a/app/components/FooterHomeOne.js +++ b/app/components/FooterHomeOne.js @@ -118,7 +118,7 @@ function FooterHomeOne({ className }) {
-
+
  • diff --git a/app/components/News/Blogs.js b/app/components/News/Blogs.js index ce1ff24..f2b7dda 100644 --- a/app/components/News/Blogs.js +++ b/app/components/News/Blogs.js @@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react"; import Link from "next/link"; import blogOne from "../../assets/images/blog/1.jpg"; import BlogData from "../../Services/BlogData"; +// import Image from "next/image"; /** * Fetches blog data from an API and renders the blogs on the page. diff --git a/app/lib/LazyImage.js b/app/lib/LazyImage.js index 0d3770c..6df62bd 100644 --- a/app/lib/LazyImage.js +++ b/app/lib/LazyImage.js @@ -1,3 +1,4 @@ +"use client" import React, { useEffect, useRef, useState } from 'react'; /** diff --git a/public/assets/images/single-post/1.jpg b/public/assets/images/single-post/1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c2a5e4f5e8d43db068bfe7234707ff4117ffd3f4 GIT binary patch literal 4408 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 p-s&}%EL_0Y% literal 0 HcmV?d00001 -- 2.34.1