-
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.
Related Blogs - Update 10-01-2024 (#105)
* init blog formatting * format blogs page * add line-clamp to podCard title&desc * return categories * add blog search functionality * prevent blogWrapper.css styles affecting other components * add text-primary & bg in global.css * style code on blog body * wrap no result in a p tag * init pageNotFound * import 404 image * complete page not found page * import formatDistanceToNow (#100) * refactor service section * change param to title_slug * filter blogs by categories * make blog categories scrollable * span components on the landing page * add download attribute internship document * fix route * fetch related blogs on blog page * refetch on page change * add error img * add condition filtering to cat * add loader to blog page * build error500 mobile page * build error500 web page * remove img border * error 400 page build * error 400 page build * error 403 page build * reinsert 404 page * remove 403 route * removed unbuilt routes * Filter out recurring current blog on related blogs fetched. * Add error500 svg img * Dev resolve conflict (#106) * Update Dev (#96) * - * remove and refactor code * import useQuery * make navlinks active * delete NavLink component * set max-width on pages --------- Co-authored-by: felixNyalenda <[email protected]> Co-authored-by: Jimmy Oty <[email protected]> * Update 05-01-24 (#99) * init blog formatting * format blogs page * add line-clamp to podCard title&desc * return categories * add blog search functionality * prevent blogWrapper.css styles affecting other components * add text-primary & bg in global.css * style code on blog body * wrap no result in a p tag --------- Co-authored-by: felixNyalenda <[email protected]> * Update 05-01-24 Beta (#101) * init blog formatting * format blogs page * add line-clamp to podCard title&desc * return categories * add blog search functionality * prevent blogWrapper.css styles affecting other components * add text-primary & bg in global.css * style code on blog body * wrap no result in a p tag * import formatDistanceToNow (#100) --------- Co-authored-by: felixNyalenda <[email protected]> --------- Co-authored-by: SpaceYaTech <[email protected]> Co-authored-by: Jimmy Oty <[email protected]> --------- Co-authored-by: felixNyalenda <[email protected]> Co-authored-by: Collins Kasyoki <[email protected]> Co-authored-by: SpaceYaTech <[email protected]>
- Loading branch information
4 people
authored
Jan 10, 2024
1 parent
32503c3
commit f9513de
Showing
44 changed files
with
1,433 additions
and
895 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,15 @@ | ||
| const Loader = () => { | ||
| return ( | ||
| <div className="w-full flex items-center justify-center"> | ||
| <img | ||
| src="/loader.svg" | ||
| width={60} | ||
| height={60} | ||
| alt="loader" | ||
| className="object-contain" | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Loader; |
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
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,32 +1,52 @@ | ||
| import React from "react"; | ||
| import { useParams } from "react-router-dom"; | ||
|
|
||
| import BlogWrapper from "./sections/BlogWrapper"; | ||
| import useBlogData from "../../../hooks/Queries/blog/useBlogData"; | ||
|
|
||
| function Blog() { | ||
| const { id } = useParams(); | ||
| const { data: blogData, isLoading, isError, isSuccess } = useBlogData(id); | ||
|
|
||
| return ( | ||
| <div className="w-screen max-w-[1440px] mx-auto"> | ||
| {isError && <p>Error fetching blog details!</p>} | ||
| {isLoading && <p>Loading blog details...</p>} | ||
| {isSuccess && ( | ||
| <section className="flex flex-col p-4 md:p-8 lg:p-10"> | ||
| <img | ||
| src={blogData.image} | ||
| alt={blogData.title} | ||
| className="w-full h-60 md:h-72 object-cover rounded-lg mb-4 md:mb-8" | ||
| /> | ||
|
|
||
| <BlogWrapper blog={blogData} /> | ||
|
|
||
| {/* <RelatedBlogs /> */} | ||
| </section> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Blog; | ||
| import React from "react"; | ||
| import { useParams } from "react-router-dom"; | ||
|
|
||
| import BlogWrapper from "./sections/BlogWrapper"; | ||
| import RelatedBlogs from "./sections/RelatedBlogs"; | ||
| import { Loader } from "../../components"; | ||
| import useBlogData from "../../../hooks/Queries/blog/useBlogData"; | ||
|
|
||
| function Blog() { | ||
| const { title_slug } = useParams(); | ||
| const { | ||
| data: blogData, | ||
| isLoading, | ||
| isError, | ||
| isSuccess, | ||
| } = useBlogData(title_slug); | ||
|
|
||
| return ( | ||
| <div className="w-screen max-w-[1440px] mx-auto"> | ||
| {isError && <p>Error fetching blog details!</p>} | ||
| {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 && ( | ||
| <> | ||
| <section className="flex flex-col p-4 md:p-8 lg:p-10"> | ||
| <img | ||
| src={blogData.image} | ||
| alt={blogData.title} | ||
| className="w-full h-60 md:h-72 object-cover rounded-lg mb-4 md:mb-8" | ||
| /> | ||
|
|
||
| <BlogWrapper blog={blogData} /> | ||
|
|
||
| <RelatedBlogs | ||
| blogId={blogData?.id} | ||
| categoryId={blogData?.category?.id} | ||
| /> | ||
| </section> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Blog; | ||
|
|
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
Oops, something went wrong.