diff --git a/package.json b/package.json index 02ed4264..87c09389 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "knip": "knip" }, "dependencies": { + "@coreui/react": "^4.11.1", "@emailjs/browser": "^3.11.0", "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", @@ -34,6 +35,7 @@ "react-hook-form": "^7.48.2", "react-photo-album": "^2.3.0", "react-router-dom": "^6.11.2", + "react-share": "^5.1.0", "react-simple-wysiwyg": "^2.2.5", "tailwind-scrollbar-hide": "^1.1.7", "yet-another-react-lightbox": "^3.15.6", diff --git a/src/APP/index.js b/src/APP/index.js index bc5d243f..7a238f88 100644 --- a/src/APP/index.js +++ b/src/APP/index.js @@ -1,73 +1,75 @@ -import AboutUs from "./pages/aboutUs/AboutUs"; -import AllBlogsPage from "./pages/admin/blogs/AllBlogsPage"; -import AddChapterPage from "./pages/admin/chapters/AddChapterPage"; -import AllChaptersPage from "./pages/admin/chapters/AllChaptersPage"; -import AddEventPage from "./pages/admin/events/AddEventPage"; -import AllEventsPage from "./pages/admin/events/AllEventsPage"; -import UpdateEventPage from "./pages/admin/events/UpdateEventPage"; -import ForgotPassword from "./pages/auth/ForgotPassword"; -import LogIn from "./pages/auth/LogIn"; -import ResetPassword from "./pages/auth/ResetPassword"; -import SignUp from "./pages/auth/SignUp"; -import Blog from "./pages/blog/Blog"; -import Blogs from "./pages/blogs/Blogs"; -import IndividualChapter from "./pages/chapter/pages/IndividualChapter"; -import CommunityPage from "./pages/community/CommunityPage"; -import SingleEvent from "./pages/community/sections/eventsSection/SingleEvents/SingleEvent"; -import DonatePage from "./pages/donate/DonatePage"; -import SingleProductDonation from "./pages/donate/pages/SingleProductDonatePage"; -import Error400 from "./pages/errorPages/Error400"; -import Error403 from "./pages/errorPages/Error403"; -import Error404 from "./pages/errorPages/Error404"; -import Error500 from "./pages/errorPages/Error500"; -import ErrorBoundary from "./pages/errorPages/ErrorBoundary"; -import EventsPage from "./pages/events/pages/EventsPage"; -import EventsSection from "./pages/events/sections/eventsSection/EventsSection"; -import GalleryPage from "./pages/gallery/GalleryPage"; -import LandingPage from "./pages/landingPage/LandingPage"; -import Layout from "./pages/Layout"; -import Products from "./pages/products2/Products"; -import Resources from "./pages/resources2/Resources"; -import Homepage from "./pages/shop/Homepage"; -import Checkout from "./pages/shop/OrderSummaryPage"; -import ProductDisplay from "./pages/shop/ProductDisplayPage"; -import CategoriesProducts from "./pages/shop/sections/CategoriesProducts"; -import SingleItemPage from "./pages/shop/SingleItemPage"; - -export { - AddChapterPage, - AddEventPage, - AllBlogsPage, - AllChaptersPage, - AllEventsPage, - UpdateEventPage, - LandingPage, - Homepage, - Checkout, - CategoriesProducts, - SingleItemPage, - Layout, - Products, - Resources, - AboutUs, - CommunityPage, - DonatePage, - SingleEvent, - Blogs, - Blog, - EventsPage, - EventsSection, - SingleProductDonation, - IndividualChapter, - Error400, - Error403, - Error404, - Error500, - ErrorBoundary, - ProductDisplay, - ForgotPassword, - LogIn, - ResetPassword, - SignUp, - GalleryPage, -}; +import AboutUs from "./pages/aboutUs/AboutUs"; +import AllBlogsPage from "./pages/admin/blogs/AllBlogsPage"; +import AddChapterPage from "./pages/admin/chapters/AddChapterPage"; +import AllChaptersPage from "./pages/admin/chapters/AllChaptersPage"; +import AddEventPage from "./pages/admin/events/AddEventPage"; +import AllEventsPage from "./pages/admin/events/AllEventsPage"; +import UpdateEventPage from "./pages/admin/events/UpdateEventPage"; +import ForgotPassword from "./pages/auth/ForgotPassword"; +import LogIn from "./pages/auth/LogIn"; +import ResetPassword from "./pages/auth/ResetPassword"; +import SignUp from "./pages/auth/SignUp"; +import Blog from "./pages/blog/Blog"; +import Blog2 from "./pages/blog2/Blog2"; +import Blogs from "./pages/blogs/Blogs"; +import IndividualChapter from "./pages/chapter/pages/IndividualChapter"; +import CommunityPage from "./pages/community/CommunityPage"; +import SingleEvent from "./pages/community/sections/eventsSection/SingleEvents/SingleEvent"; +import DonatePage from "./pages/donate/DonatePage"; +import SingleProductDonation from "./pages/donate/pages/SingleProductDonatePage"; +import Error400 from "./pages/errorPages/Error400"; +import Error403 from "./pages/errorPages/Error403"; +import Error404 from "./pages/errorPages/Error404"; +import Error500 from "./pages/errorPages/Error500"; +import ErrorBoundary from "./pages/errorPages/ErrorBoundary"; +import EventsPage from "./pages/events/pages/EventsPage"; +import EventsSection from "./pages/events/sections/eventsSection/EventsSection"; +import GalleryPage from "./pages/gallery/GalleryPage"; +import LandingPage from "./pages/landingPage/LandingPage"; +import Layout from "./pages/Layout"; +import Products from "./pages/products2/Products"; +import Resources from "./pages/resources2/Resources"; +import Homepage from "./pages/shop/Homepage"; +import Checkout from "./pages/shop/OrderSummaryPage"; +import ProductDisplay from "./pages/shop/ProductDisplayPage"; +import CategoriesProducts from "./pages/shop/sections/CategoriesProducts"; +import SingleItemPage from "./pages/shop/SingleItemPage"; + +export { + AddChapterPage, + AddEventPage, + AllBlogsPage, + AllChaptersPage, + AllEventsPage, + UpdateEventPage, + LandingPage, + Homepage, + Checkout, + CategoriesProducts, + SingleItemPage, + Layout, + Products, + Resources, + AboutUs, + CommunityPage, + DonatePage, + SingleEvent, + Blogs, + Blog, + Blog2, + EventsPage, + EventsSection, + SingleProductDonation, + IndividualChapter, + Error400, + Error403, + Error404, + Error500, + ErrorBoundary, + ProductDisplay, + ForgotPassword, + LogIn, + ResetPassword, + SignUp, + GalleryPage, +}; diff --git a/src/APP/pages/aboutUs/sections/HeroSection.jsx b/src/APP/pages/aboutUs/sections/HeroSection.jsx index 1fa05214..addbd150 100644 --- a/src/APP/pages/aboutUs/sections/HeroSection.jsx +++ b/src/APP/pages/aboutUs/sections/HeroSection.jsx @@ -28,7 +28,7 @@ function HeroSection() { className="absolute -top-8 md:-top-24 lg:-top-8 xl:-top-28 right-0 md:-right-36 lg:-right-48 xl:-right-48 w-2/6 md:w-auto lg:w-[70%]" /> -
+
space ya tech
diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx index 09ebd142..f977468d 100644 --- a/src/APP/pages/blog/sections/RelatedBlogs.jsx +++ b/src/APP/pages/blog/sections/RelatedBlogs.jsx @@ -47,6 +47,7 @@ function RelatedBlogs({ blogId, categoryId }) { } return true; }) + .map((blog) => ) ) : (

No related blogs found!

diff --git a/src/APP/pages/blog2/Blog2.jsx b/src/APP/pages/blog2/Blog2.jsx new file mode 100644 index 00000000..7d3a7451 --- /dev/null +++ b/src/APP/pages/blog2/Blog2.jsx @@ -0,0 +1,60 @@ +import React, { useEffect } from "react"; +import { useNavigate, useParams } from "react-router-dom"; + +import { Advert, BlogHeader, BlogBody } from "./sections"; +import useBlogData from "../../../hooks/Queries/blog/useBlogData"; +import { Loader } from "../../components"; + +function Blog2() { + const { titleSlug } = useParams(); + const navigate = useNavigate(); + + const { + data: blogData, + refetch: refetchBlogData, + isLoading, + isError, + isSuccess, + } = useBlogData(titleSlug); + + useEffect(() => { + refetchBlogData(); + }, [titleSlug]); + + return ( +
+ {isError && navigate("/error-500")} + + {isLoading && ( +
+ +

+ Loading blog details... +

+
+ )} + {isSuccess && ( + <> + + + + + )} +
+ ); +} + +export default Blog2; diff --git a/src/APP/pages/blog2/sections/Advert.jsx b/src/APP/pages/blog2/sections/Advert.jsx new file mode 100644 index 00000000..43503e0d --- /dev/null +++ b/src/APP/pages/blog2/sections/Advert.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import { advert } from "../../../../assets/images/blogs-page"; + +function Advert() { + return ( +
+ advert +
+ ); +} + +export default Advert; diff --git a/src/APP/pages/blog2/sections/BlogBody.jsx b/src/APP/pages/blog2/sections/BlogBody.jsx new file mode 100644 index 00000000..54dae875 --- /dev/null +++ b/src/APP/pages/blog2/sections/BlogBody.jsx @@ -0,0 +1,44 @@ +/* eslint-disable react/prop-types */ +import React from "react"; + +import { glovo } from "../../../../assets/images/blogs-page"; + +import RelatedBlogs from "./RelatedBlogs"; +import NextRead from "./NextRead"; + +import "./blogBody.css"; + +function BlogBody({ id, categoryId, blogBody }) { + return ( +
+
+
+
+ + {/* */} +
+ {/* read next */} + +
+ +
+ +
+ +
+ + + glovo +
+
+ ); +} + +export default BlogBody; diff --git a/src/APP/pages/blog2/sections/BlogHeader.jsx b/src/APP/pages/blog2/sections/BlogHeader.jsx new file mode 100644 index 00000000..6cdfa948 --- /dev/null +++ b/src/APP/pages/blog2/sections/BlogHeader.jsx @@ -0,0 +1,69 @@ +/* eslint-disable react/prop-types */ +import { formatDistanceToNow } from "date-fns"; +import React from "react"; + +import logo from "../../../../assets/images/sytLogo.png"; +import BlogStats from "../../blogs/sections/BlogStats"; +import ShareBlog from "./ShareBlog"; + +function BlogHeader({ + id, + likes, + title, + description, + image, + author, + createdAt, + titleSlug, +}) { + const timeAgo = formatDistanceToNow(new Date(createdAt), { + addSuffix: true, + }); + + return ( +
+
+

+ {title} +

+ +

+ {description} +

+ +
+ {author} + + + {author} + + + {timeAgo} +
+
+ +
+ {title} + +
+ + + +
+
+
+ ); +} + +export default BlogHeader; diff --git a/src/APP/pages/blog2/sections/BlogUMightLike.jsx b/src/APP/pages/blog2/sections/BlogUMightLike.jsx new file mode 100644 index 00000000..894fd40a --- /dev/null +++ b/src/APP/pages/blog2/sections/BlogUMightLike.jsx @@ -0,0 +1,59 @@ +/* eslint-disable react/prop-types */ +import { formatDistanceToNow } from "date-fns"; +import React from "react"; +import { Link } from "react-router-dom"; + +import logo from "../../../../assets/images/sytLogo.png"; +import BlogStats from "../../blogs/sections/BlogStats"; + +function BlogUMightLike({ blog, block }) { + const timeAgo = formatDistanceToNow(new Date(blog.created_at), { + addSuffix: true, + }); + return ( + + {blog.title} + +
+
+

+ {blog.title} +

+ + +
+ +

+ {blog.description} +

+ +
+ ellipse + +
+ + {blog.author} + + + {timeAgo} +
+
+
+ + ); +} + +export default BlogUMightLike; diff --git a/src/APP/pages/blog2/sections/NextRead.jsx b/src/APP/pages/blog2/sections/NextRead.jsx new file mode 100644 index 00000000..d3e09a0f --- /dev/null +++ b/src/APP/pages/blog2/sections/NextRead.jsx @@ -0,0 +1,92 @@ +import React, { useState } from "react"; +import { useParams } from "react-router-dom"; + +import BlogsUMightLike from "./BlogUMightLike"; +import { useBlogsData } from "../../../../hooks/Queries/blogs/useAllBlogsData"; +import { filteredReadNextBlogs } from "../../../../utilities/FilterBlogs"; + +function NextRead() { + const [currentIndex, setCurrentIndex] = useState(0); + const { titleSlug } = useParams(); + + const { data: blogsData } = useBlogsData(1); + + const readNextBlogs = filteredReadNextBlogs(blogsData?.results, titleSlug); + + const handlePrev = () => { + setCurrentIndex((prevIndex) => + prevIndex === 0 ? readNextBlogs.length - 1 : prevIndex - 1 + ); + }; + + const handleNext = () => { + setCurrentIndex((prevIndex) => + prevIndex === readNextBlogs.length - 1 ? 0 : prevIndex + 1 + ); + }; + + return ( +
+

+ You might like these +

+ +
+ {/* left */} + + + {/* Cards */} +
+ {readNextBlogs.map((blog, index) => ( + + ))} +
+ + {/* right */} + +
+
+ ); +} + +export default NextRead; diff --git a/src/APP/pages/blog2/sections/RelatedBlogCard.jsx b/src/APP/pages/blog2/sections/RelatedBlogCard.jsx new file mode 100644 index 00000000..f2f80bb7 --- /dev/null +++ b/src/APP/pages/blog2/sections/RelatedBlogCard.jsx @@ -0,0 +1,32 @@ +/* eslint-disable react/prop-types */ +import { formatDistanceToNow } from "date-fns"; +import React from "react"; +import { Link } from "react-router-dom"; + +function RelatedBlogCard({ blog }) { + const timeAgo = formatDistanceToNow(new Date(blog.created_at), { + addSuffix: true, + }); + return ( + + {blog.title} + +
+

{blog.title}

+

+ {blog.author} +

+ {timeAgo} +
+ + ); +} + +export default RelatedBlogCard; diff --git a/src/APP/pages/blog2/sections/RelatedBlogs.jsx b/src/APP/pages/blog2/sections/RelatedBlogs.jsx new file mode 100644 index 00000000..85096a6f --- /dev/null +++ b/src/APP/pages/blog2/sections/RelatedBlogs.jsx @@ -0,0 +1,62 @@ +import React, { useEffect } from "react"; +import { useParams } from "react-router-dom"; + +import { useRelatedBlogsData } from "../../../../hooks/Queries/blog/useBlogData"; +import { filterRelatedBlogs } from "../../../../utilities/FilterBlogs"; + +import RelatedBlogCard from "./RelatedBlogCard"; + +function RelatedBlogs({ blogId, categoryId }) { + const { titleSlug } = useParams(); + + const { + data: relatedBlogsData, + refetch: refetchRelatedBlogsData, + isLoading, + isError, + isSuccess, + } = useRelatedBlogsData(categoryId); + + useEffect(() => { + refetchRelatedBlogsData(); + }, [titleSlug]); + + const filteredRelatedBlogs = filterRelatedBlogs( + relatedBlogsData?.blogs, + titleSlug + ); + + return ( + <> + {isError &&

Error loading blogs!

} + {isLoading &&

Loading blogs...

} + + {isSuccess && filteredRelatedBlogs.length > 0 && ( +
+

+ {filteredRelatedBlogs.length > 1 + ? "Related Articles" + : "Related Article"} +

+
+ {Array.isArray(filteredRelatedBlogs) && + filteredRelatedBlogs.length > 0 ? ( + filteredRelatedBlogs + .filter(function (blog) { + if (blog.id === blogId) { + return false; + } + return true; + }) + .map((blog) => ) + ) : ( +

No related blogs found!

+ )} +
+
+ )} + + ); +} + +export default RelatedBlogs; diff --git a/src/APP/pages/blog2/sections/ShareBlog.jsx b/src/APP/pages/blog2/sections/ShareBlog.jsx new file mode 100644 index 00000000..2dd934fd --- /dev/null +++ b/src/APP/pages/blog2/sections/ShareBlog.jsx @@ -0,0 +1,58 @@ +/* eslint-disable react/prop-types */ +/* eslint-disable import/no-extraneous-dependencies */ +import React from "react"; + +import { + FacebookIcon, + FacebookShareButton, + LinkedinIcon, + LinkedinShareButton, + TwitterShareButton, + WhatsappIcon, + WhatsappShareButton, + XIcon, +} from "react-share"; + +function ShareBlog({ url, title }) { + return ( +
+

share it

+ + + + + + + + + + + + + + + + +
+ ); +} + +export default ShareBlog; diff --git a/src/APP/pages/blog2/sections/blogBody.css b/src/APP/pages/blog2/sections/blogBody.css new file mode 100644 index 00000000..cc1b265c --- /dev/null +++ b/src/APP/pages/blog2/sections/blogBody.css @@ -0,0 +1,65 @@ +.blog-content h1 { + font-size: 18px; + font-weight: 700; +} + +.blog-content h2 { + padding: 8px 0; + font-weight: 600; +} + +.blog-content p, +.blog-content span { + line-height: 24px; + margin-top: 6px; + margin-bottom: 12px; + font-weight: 400; + text-align: left; + font-size: 15px; +} + +.blog-content strong { + font-weight: 600; +} + +.blog-content a { + color: #009975; + cursor: pointer; +} + +.blog-content ul, +.blog-content ol { + margin-left: 28px; +} + +.blog-content ol { + list-style: lower-roman; +} + +.blog-content ul { + list-style: disc; +} + +.blog-content li { + text-transform: capitalize; +} + +.blog-content pre { + border-radius: 6px; + background: #e9e8e8; + padding: 8px; + overflow: scroll; + font-size: 14px; +} + +.blog-content code { + background: #e9e8e8; + border-radius: 6px; + padding: 4px; + width: 100%; + font-size: 14px; +} + +.blog-content pre code em { + font-size: 12px; +} diff --git a/src/APP/pages/blog2/sections/index.js b/src/APP/pages/blog2/sections/index.js new file mode 100644 index 00000000..90380f10 --- /dev/null +++ b/src/APP/pages/blog2/sections/index.js @@ -0,0 +1,5 @@ +export { default as Advert } from "./Advert"; +export { default as BlogHeader } from "./BlogHeader"; +export { default as BlogBody } from "./BlogBody"; +export { default as NextRead } from "./NextRead"; +export { default as BlogUMightLike } from "./BlogUMightLike"; diff --git a/src/assets/images/blogs-page/Frame.png b/src/assets/images/blogs-page/Frame.png new file mode 100644 index 00000000..b02941a4 Binary files /dev/null and b/src/assets/images/blogs-page/Frame.png differ diff --git a/src/assets/images/blogs-page/blog1.png b/src/assets/images/blogs-page/blog1.png index 87c09da0..91f3eab8 100644 Binary files a/src/assets/images/blogs-page/blog1.png and b/src/assets/images/blogs-page/blog1.png differ diff --git a/src/assets/images/blogs-page/blog2.png b/src/assets/images/blogs-page/blog2.png deleted file mode 100644 index 2cce03cf..00000000 Binary files a/src/assets/images/blogs-page/blog2.png and /dev/null differ diff --git a/src/assets/images/blogs-page/blog3.png b/src/assets/images/blogs-page/blog3.png deleted file mode 100644 index 3b06a733..00000000 Binary files a/src/assets/images/blogs-page/blog3.png and /dev/null differ diff --git a/src/assets/images/blogs-page/blog4.png b/src/assets/images/blogs-page/blog4.png deleted file mode 100644 index ce553f43..00000000 Binary files a/src/assets/images/blogs-page/blog4.png and /dev/null differ diff --git a/src/assets/images/blogs-page/glovo.png b/src/assets/images/blogs-page/glovo.png new file mode 100644 index 00000000..ce1168d0 Binary files /dev/null and b/src/assets/images/blogs-page/glovo.png differ diff --git a/src/assets/images/blogs-page/index.js b/src/assets/images/blogs-page/index.js index fa85fb91..c9146141 100644 --- a/src/assets/images/blogs-page/index.js +++ b/src/assets/images/blogs-page/index.js @@ -1,25 +1,25 @@ -import search from "./search.png"; -import blog1 from "./blog1.png"; -import blog2 from "./blog2.png"; -import blog3 from "./blog3.png"; -import blog4 from "./blog4.png"; -import arrowRight from "./arrow-right.png"; -import chatText from "./chatText.svg"; -import Ellipse30 from "./Ellipse30.png"; -import eye from "./eye.svg"; -import thumbsUp from "./thumbsUp.svg"; -import reply from "./reply.svg"; - -export { - search, - blog1, - blog2, - blog3, - blog4, - arrowRight, - chatText, - Ellipse30, - thumbsUp, - eye, - reply, -}; +import search from "./search.png"; +import blog1 from "./blog1.png"; +import advert from "./Frame.png"; +import glovo from "./glovo.png"; +import iphone from "./iphone.png"; +import arrowRight from "./arrow-right.png"; +import chatText from "./chatText.svg"; +import Ellipse30 from "./Ellipse30.png"; +import eye from "./eye.svg"; +import thumbsUp from "./thumbsUp.svg"; +import reply from "./reply.svg"; + +export { + search, + blog1, + advert, + glovo, + iphone, + arrowRight, + chatText, + Ellipse30, + thumbsUp, + eye, + reply, +}; diff --git a/src/assets/images/blogs-page/iphone.png b/src/assets/images/blogs-page/iphone.png new file mode 100644 index 00000000..ce520e43 Binary files /dev/null and b/src/assets/images/blogs-page/iphone.png differ diff --git a/src/assets/images/socials/index.js b/src/assets/images/socials/index.js index ead41ecf..e8425238 100644 --- a/src/assets/images/socials/index.js +++ b/src/assets/images/socials/index.js @@ -1,9 +1,19 @@ -import { default as linkedin } from "./linkedIn.svg"; -import { default as facebook } from "./facebook.svg"; -import { default as twitter } from "./twitter.svg"; -import { default as instagram } from "./instagram.svg"; -import { default as spotify } from "./spotify.png"; -import { default as discord } from "./discord.svg"; -import { default as youtube } from "./youtube.svg"; - -export { linkedin, facebook, twitter, instagram, spotify, discord, youtube }; +import linkedin from "./linkedIn.svg"; +import facebook from "./facebook.svg"; +import twitter from "./twitter.svg"; +import instagram from "./instagram.svg"; +import spotify from "./spotify.png"; +import discord from "./discord.svg"; +import youtube from "./youtube.svg"; +import whatsapp from "./whatsapp.svg"; + +export { + linkedin, + facebook, + twitter, + instagram, + spotify, + discord, + youtube, + whatsapp, +}; diff --git a/src/assets/images/socials/whatsapp.svg b/src/assets/images/socials/whatsapp.svg new file mode 100644 index 00000000..61b9f5e3 --- /dev/null +++ b/src/assets/images/socials/whatsapp.svg @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/src/index.css b/src/index.css index 25b4caad..95a782b6 100644 --- a/src/index.css +++ b/src/index.css @@ -144,6 +144,11 @@ flex: 1; } + .first-letter::first-letter { + font-weight: bold; + font-size: 3rem; + } + /* blog bgImg */ .bg-blog-image { background-image: url("../src/assets/images/blogs-page/blogBg.png"); diff --git a/src/router/index.jsx b/src/router/index.jsx index d37d8a35..8b8c7a19 100644 --- a/src/router/index.jsx +++ b/src/router/index.jsx @@ -7,6 +7,7 @@ import { Layout, Products, Blog, + Blog2, Blogs, EventsPage, IndividualChapter, @@ -60,6 +61,10 @@ const router = createBrowserRouter([ path: "/blogs/:titleSlug", element: , }, + { + path: "/blogs2/:titleSlug", + element: , + }, { path: "/allevents", element: , diff --git a/src/utilities/FilterBlogs.jsx b/src/utilities/FilterBlogs.jsx index 9e4555db..d4aaa51e 100644 --- a/src/utilities/FilterBlogs.jsx +++ b/src/utilities/FilterBlogs.jsx @@ -17,3 +17,14 @@ export const filterRelatedBlogs = (relatedBlogs, titleSlug) => { .slice(0, 2); return filteredBlogs; }; + +export const filteredReadNextBlogs = (blogsArray, titleSlug) => { + if (!Array.isArray(blogsArray)) { + return []; + } + + const filteredBlogs = blogsArray.filter( + (blog) => blog.title_slug !== titleSlug + ); + return filteredBlogs; +};