-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #133 from SpaceyaTech/blog-page-redesign
Blog page redesign
- Loading branch information
Showing
28 changed files
with
720 additions
and
108 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="max-w-[1024px] mx-auto"> | ||
| {isError && navigate("/error-500")} | ||
|
|
||
| {isLoading && ( | ||
| <div className="flex flex-col items-center justify-center gap-4 py-10"> | ||
| <Loader /> | ||
| <p className="text-lg font-medium text-primary"> | ||
| Loading blog details... | ||
| </p> | ||
| </div> | ||
| )} | ||
| {isSuccess && ( | ||
| <> | ||
| <Advert /> | ||
| <BlogHeader | ||
| title={blogData?.title} | ||
| description={blogData?.description} | ||
| image={blogData?.image} | ||
| author={blogData?.author} | ||
| createdAt={blogData?.created_at} | ||
| id={blogData?.id} | ||
| likes={blogData?.likes} | ||
| titleSlug={blogData?.title_slug} | ||
| /> | ||
| <BlogBody | ||
| id={blogData?.id} | ||
| categoryId={blogData?.category.id} | ||
| blogBody={blogData?.body} | ||
| /> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Blog2; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from "react"; | ||
| import { advert } from "../../../../assets/images/blogs-page"; | ||
|
|
||
| function Advert() { | ||
| return ( | ||
| <div className="hidden md:flex h-32 w-full"> | ||
| <img src={advert} alt="advert" className="h-full w-full" /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Advert; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="flex flex-col md:flex-row gap-5 w-full pb-8 px-3"> | ||
| <div className="w-full md:w-[70%] flex flex-col gap-5"> | ||
| <div className="container text-[13px] md:text-base font-normal text-[#323433]"> | ||
| <div | ||
| className="blog-content" | ||
| dangerouslySetInnerHTML={{ __html: blogBody }} | ||
| /> | ||
|
|
||
| {/* <Advert /> */} | ||
| </div> | ||
| {/* read next */} | ||
|
|
||
| <div className="flex md:hidden"> | ||
| <RelatedBlogs blogId={id} categoryId={categoryId} /> | ||
| </div> | ||
| <NextRead /> | ||
| </div> | ||
|
|
||
| <div className="w-full md:w-[30%] hidden md:flex flex-col pt-20 gap-10 md:gap-64"> | ||
| <RelatedBlogs blogId={id} categoryId={categoryId} /> | ||
|
|
||
| <img | ||
| src={glovo} | ||
| alt="glovo" | ||
| className="object-cover w-full aspect-auto" | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default BlogBody; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="flex flex-col relative"> | ||
| <div className="md:w-[864px] px-3 "> | ||
| <h1 className="py-3 text-2xl md:text-4xl font-bold leading-normal text-center md:text-left"> | ||
| {title} | ||
| </h1> | ||
|
|
||
| <p className="text-base md:text-lg leading-normal text-center md:text-left"> | ||
| {description} | ||
| </p> | ||
|
|
||
| <div className="flex items-center gap-2 mt-5 md:my-3"> | ||
| <img | ||
| src={logo} | ||
| alt={author} | ||
| className="w-10 h-10 object-cover rounded-full flex items-center justify-center" | ||
| /> | ||
|
|
||
| <span className="text-sm md:text-base font-medium text-[#323433] capitalize"> | ||
| {author} | ||
| </span> | ||
|
|
||
| <small className="text-[#656767] text-xs">{timeAgo}</small> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-4 py-5"> | ||
| <img | ||
| src={image} | ||
| alt={title} | ||
| className="object-contain overflow-hidden w-full lg:rounded-xl px-4 md:px-0" | ||
| /> | ||
|
|
||
| <div className="flex flex-row items-center justify-between px-3 "> | ||
| <ShareBlog | ||
| url={`https://spaceyatech.com/blogs/${titleSlug}`} | ||
| title={title} | ||
| /> | ||
|
|
||
| <BlogStats likes={likes} blogId={id} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default BlogHeader; |
Oops, something went wrong.