From df6ed9dc9b08065ec765f6b090de2867536b5c54 Mon Sep 17 00:00:00 2001 From: Prince-Kid Date: Fri, 29 Nov 2024 13:36:06 +0200 Subject: [PATCH 1/2] fix: Enhance landing page and implement navigations --- src/components/home/AboutUs.tsx | 36 ++++---- src/components/home/Blogs.tsx | 15 ++-- src/components/home/Header.tsx | 4 +- src/components/profileDropdown.tsx | 4 +- src/components/sidebar/navHeader.tsx | 4 +- src/pages/Blogs/Blogs.tsx | 118 +++++++++++++++------------ 6 files changed, 98 insertions(+), 83 deletions(-) diff --git a/src/components/home/AboutUs.tsx b/src/components/home/AboutUs.tsx index d9189ecb7..72f5cd632 100644 --- a/src/components/home/AboutUs.tsx +++ b/src/components/home/AboutUs.tsx @@ -34,31 +34,31 @@ const AboutUs = () => { -
-
- -

Guidance

-

- Get expert guidance every step of the way. From applying to tracking your progress, - our team is here to help you succeed and reach your full potential. +

+
+ +

Guidance

+

+ Get expert guidance every step of the way. From applying to tracking your progress, our team is here to help you succeed and reach your full potential.

-
- -

Community

-

- Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors. +

+ +

Community

+

+ Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.

-
- -

Tools and Resources

-

- Access real-time tracking tools and resources designed to support your learning and professional growth. Our commitment to cutting-edge technology means you stay on top

+
+ +

Tools and Resources

+

+ Access real-time tracking tools and resources designed to support your learning and professional growth. Our commitment to cutting-edge technology means you stay on top. +

-
+
) } diff --git a/src/components/home/Blogs.tsx b/src/components/home/Blogs.tsx index c16b02a4c..3439b0a88 100644 --- a/src/components/home/Blogs.tsx +++ b/src/components/home/Blogs.tsx @@ -5,6 +5,8 @@ import { Link } from 'react-router-dom'; import { fetchAllBlogs } from '../../redux/actions/blogsActions'; import { toast } from 'react-toastify'; + + interface Author { id: string; email: string; @@ -28,10 +30,14 @@ import { toast } from 'react-toastify'; } + const BlogCard = ({ blog }: { blog: Blog }) => ( -
+
+ {blog.title} +
+
@@ -51,14 +57,13 @@ const BlogCard = ({ blog }: { blog: Blog }) => (
- + +

{blog.title}

{blog.content}

- - Read More → - +
); diff --git a/src/components/home/Header.tsx b/src/components/home/Header.tsx index 838541c8c..100c43622 100644 --- a/src/components/home/Header.tsx +++ b/src/components/home/Header.tsx @@ -10,7 +10,7 @@ import { useNotifications } from "../../utils/Notifications"; import { useAdminNotifications } from "../../hooks/useAdminNotifications"; const logo = require("../../assets/logo.svg").default; const LogoWhite: string = require("../../assets/logoWhite.svg").default; -const profilePlaceholder = require("../../assets/avatar.png").default; +const profilePlaceholder = require("../../assets/default-image.jpg").default; const Header = () => { const [isNavOpen, setIsNavOpen] = useState(false); @@ -21,7 +21,7 @@ const Header = () => { const accessToken = localStorage.getItem("access_token"); const isLoggedIn = Boolean(accessToken); //@ts-ignore - const user = isLoggedIn ? jwtDecode(accessToken)?.profile || profilePlaceholder : profilePlaceholder; + const user = isLoggedIn ? jwtDecode(accessToken)?.data.picture || profilePlaceholder : profilePlaceholder; const roleName = localStorage.getItem("roleName"); diff --git a/src/components/profileDropdown.tsx b/src/components/profileDropdown.tsx index b181c9646..03e184183 100644 --- a/src/components/profileDropdown.tsx +++ b/src/components/profileDropdown.tsx @@ -44,13 +44,13 @@ function ProfileDropdown({ > <>{t("Preferences")} - {/* <>{t("Dashboard")} - */} +
diff --git a/src/components/sidebar/navHeader.tsx b/src/components/sidebar/navHeader.tsx index 7709e2e7d..438c2e520 100644 --- a/src/components/sidebar/navHeader.tsx +++ b/src/components/sidebar/navHeader.tsx @@ -12,7 +12,7 @@ import jwtDecode from "jwt-decode"; import { useNotifications } from "../../utils/Notifications"; import { useAdminNotifications } from "../../hooks/useAdminNotifications"; const logo: string = require("../../assets/logo.svg").default; -const profile: string = require("../../assets/avatar.png").default; +const profile: string = require("../../assets/default-image.jpg").default; const LogoWhite: string = require("../../assets/logoWhite.svg").default; import {destination} from '../../utils/utils' import SearchBar from "../../components/SearchBar"; @@ -85,7 +85,7 @@ function NavBar() { const userDestination = destination(); const access_token = localStorage.getItem("access_token"); //@ts-ignore - const user = access_token ? jwtDecode(access_token)?.profile || profile : profile; + const user = access_token ? jwtDecode(access_token)?.picture || profile : profile; const roleName = localStorage.getItem("roleName"); const [nav, setNav] = useState(false); diff --git a/src/pages/Blogs/Blogs.tsx b/src/pages/Blogs/Blogs.tsx index f7d40baa4..1dcf920e5 100644 --- a/src/pages/Blogs/Blogs.tsx +++ b/src/pages/Blogs/Blogs.tsx @@ -57,62 +57,71 @@ const Blogs: React.FC = () => {
) : blogs.length > 0 ? ( - <>
+ <> +
{blogs.map((blog) => ( -
- {blog.title} -
-
-
-
- - {blog.author.firstname} - - - - - {blog.created_at - ? new Date(Number(blog.created_at)).toLocaleDateString() - : "Unknown Date"} - - - - {blog.reactions.length || 0} - - - {blog.comments.length || 0} - -
-
-
-

{blog.title}

-

- {blog.content.substring(0, 150)}... -

-
- {blog.tags.map((tag) => ( - setSelectedTag(tag)} - className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200" - > - #{tag} - - ))} -
- - Read More → - -
-
+
+ + {blog.title} + +
+
+
+ +
+ + {blog.author.firstname} + + + + {blog.created_at + ? new Date(Number(blog.created_at)).toLocaleDateString() + : "Unknown Date"} + + + {blog.reactions.length || 0} + + + {blog.comments.length || 0} + +
+ +
+
+ +

{blog.title}

+

+ {blog.content.substring(0, 150)}... +

+ +
+ {blog.tags.map((tag) => ( + { + setSelectedTag(tag); + }} + className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200" + > + #{tag} + + ))} +
+
+ +
+ ))} -
+
+ + ) : (
{
)} +