Merge pull request #94 from SpaceyaTech/update-team

Update team
SpaceyaTech · Dec 30, 2023 · 45f9ae6 · 45f9ae6
2 parents 86ced69 + 43a76f6
commit 45f9ae6
Show file tree

Hide file tree

Showing 16 changed files with 712 additions and 840 deletions.
diff --git a/.github/workflows/update-dev.yaml b/.github/workflows/update-dev.yaml
diff --git a/src/ADMIN/pages/events/AddEventPage.jsx b/src/ADMIN/pages/events/AddEventPage.jsx
diff --git a/src/APP/components/Header2.jsx b/src/APP/components/Header2.jsx
@@ -63,15 +63,15 @@ const Header2 = () => {
           Products
         </Link>
 
+        {/*
         <Link
           className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
           to="/blogs"
           onClick={() => setShowNavlinks(false)}
         >
-          Blogs
+          Blog
         </Link>
 
-        {/*
         <Link
           className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
           to="/resources"
@@ -127,14 +127,14 @@ const Header2 = () => {
           Products
         </Link>
 
+        {/*
         <Link
           className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
           to="/blogs"
         >
-          Blogs
+          Blog
         </Link>
 
-        {/*
         <Link
           className="text-gray-900 hover:text-[#009975] hover:underline transition-all duration-300 cursor-pointer focus:text-[#009975] focus:underline"
           to="/resources"

diff --git a/src/APP/pages/blog/Blog.jsx b/src/APP/pages/blog/Blog.jsx
@@ -1,43 +1,44 @@
-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 (
-    <>
-      {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="blog"
-            className="w-full h-60 md:h-72 object-cover rounded-lg mb-4 md:mb-8"
-          />
-
-          {/* <div className="flex flex-row items-center justify-between">
-            <p className="text-[#4C4D4D] text-sm  md:text-base font-bold">
-              {new Date(blogData.created_at).toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "short",
-                day: "numeric",
-              })}
-            </p>
-
-            <BlogStats likes={blogData.likes} />
-          </div> */}
-
-          <BlogWrapper blog={blogData} />
-
-          {/* <RelatedBlogs /> */}
-        </section>
-      )}
-    </>
-  );
-}
-
-export default Blog;
+import React from "react";
+import { useParams } from "react-router-dom";
+import BlogStats from "../blogs/sections/BlogStats";
+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 (
+    <>
+      {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="blog"
+            className="w-full h-60 md:h-72 object-cover rounded-lg mb-4 md:mb-8"
+          />
+
+          <div className="flex flex-row items-center justify-between">
+            <p className="text-[#4C4D4D] text-sm  md:text-base font-bold">
+              {new Date(blogData.created_at).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
+            </p>
+
+            <BlogStats likes={blogData.likes} />
+          </div>
+
+          <BlogWrapper blog={blogData} />
+
+          {/* <RelatedBlogs /> */}
+        </section>
+      )}
+    </>
+  );
+}
+
+export default Blog;
diff --git a/src/APP/pages/blog/sections/BlogWrapper.jsx b/src/APP/pages/blog/sections/BlogWrapper.jsx
@@ -1,16 +1,12 @@
 import React from "react";
 import { formatDistanceToNow } from "date-fns";
-import BlogStats from "../../blogs/sections/BlogStats";
-
-import logo from "../../../../assets/images/sytLogo.png";
-
-import "./blogWrapper.css";
+import { Ellipse30 } from "../../../../assets/images/blogs-page";
 
 const BlogWrapper = ({ blog }) => {
+  const paragraph = blog.body.split("\n");
   const timeAgo = formatDistanceToNow(new Date(blog.created_at), {
     addSuffix: true,
   });
-
   return (
     <div className="flex flex-row">
       <div className="w-full md:w-3/5 flex flex-col">
@@ -19,34 +15,31 @@ const BlogWrapper = ({ blog }) => {
             {blog.title}
           </h3>
 
-          <div className="flex items-center justify-between">
-            <div className="flex gap-2">
-              <img
-                src={logo}
-                alt="icon"
-                className="w-10 h-10 object-cover rounded-full bg-gray-200 flex items-center justify-center p-1"
-              />
-
-              <div className="flex flex-col text-sm">
-                <h4 className="font-medium text-[#323433] capitalize">
-                  {blog.author}
-                </h4>
-
-                <span className="text-[#656767] text-xs">{timeAgo}</span>
-              </div>
-            </div>
+          <div className="flex gap-[10px]">
+            <img
+              src={Ellipse30}
+              alt="icon"
+              className="w-10 h-10 object-cover rounded-full"
+            />
 
-            <BlogStats likes={blog.likes} />
+            <div className="flex flex-col gap-1 text-sm">
+              <h4 className=" font-medium text-[#323433]">{blog.author}</h4>
+
+              <span className="text-[#656767]">{timeAgo}</span>
+            </div>
           </div>
         </div>
 
         <div className="pb-8 pt-6 md:pt-8">
-          <div
-            className="container text-[13px] md:text-base font-normal text-[##323433]"
-            dangerouslySetInnerHTML={{ __html: blog.body }}
-          >
-            {/* {htmlParser(blog.body)} */}
-          </div>
+          <p className="text-[13px] md:text-base font-normal text-[##323433]">
+            {paragraph.map((par, i) => (
+              <React.Fragment key={i}>
+                {par}
+                <br />
+                <br />
+              </React.Fragment>
+            ))}
+          </p>
         </div>
 
         {/* <Comments /> */}

diff --git a/src/APP/pages/blog/sections/blogWrapper.css b/src/APP/pages/blog/sections/blogWrapper.css
diff --git a/src/APP/pages/blogs/Blogs.jsx b/src/APP/pages/blogs/Blogs.jsx
@@ -7,7 +7,7 @@ const Blogs = () => {
   const [searchText, setSearchText] = useState("");
 
   return (
-    <section className="flex flex-col items-center gap-4 max-w-[1440px] mx-auto">
+    <section className="flex flex-col items-center gap-4">
       <Banner searchText={searchText} setSearchText={setSearchText} />
       <BlogsWrapper searchText={searchText} />
     </section>

diff --git a/src/APP/pages/blogs/sections/Banner.jsx b/src/APP/pages/blogs/sections/Banner.jsx
@@ -10,7 +10,7 @@ const Banner = ({ searchText, setSearchText }) => {
       <div className="absolute inset-0 flex flex-col gap-4 md:gap-8 items-center justify-center w-[80%] mx-auto md:w-[716px]">
         <h2 className="text-3xl font-normal text-white">Blogs</h2>
 
-        {/* <form
+        <form
           className="flex items-center border-2 border-white px-4 py-2 md:py-3 rounded-full w-full gap-1"
           onSubmit={handleSearch}
         >
@@ -24,7 +24,7 @@ const Banner = ({ searchText, setSearchText }) => {
           <button type="submit" className="w-1/10 p-2">
             <img src={search} alt="search" className="w-6 h-6" />
           </button>
-        </form> */}
+        </form>
       </div>
     </div>
   );

diff --git a/src/APP/pages/blogs/sections/BlogCard.jsx b/src/APP/pages/blogs/sections/BlogCard.jsx
@@ -1,27 +1,26 @@
-import { formatDistanceToNow } from "date-fns";
 import { useNavigate } from "react-router-dom";
-import { arrowRight } from "../../../../assets/images/blogs-page";
-import logo from "../../../../assets/images/sytLogo.png";
+import { Ellipse30, arrowRight } from "../../../../assets/images/blogs-page";
 import BlogStats from "./BlogStats";
+import { formatDistanceToNow } from "date-fns";
 
 const BlogCard = ({ blog }) => {
   const navigate = useNavigate();
   const timeAgo = formatDistanceToNow(new Date(blog.created_at), {
     addSuffix: true,
   });
   return (
-    <div className="flex flex-col items-start w-full mb-6">
+    <div className="flex flex-col items-start w-full">
       <img
         src={blog.image}
         alt="blog"
-        className="w-full h-60 object-cover rounded-lg"
+        className="flex-1 w-full h-60 object-cover rounded-lg"
       />
 
-      <div className="py-[6px] flex flex-col gap-[10px] w-full">
+      <div className="flex-1 py-[6px] flex flex-col gap-[10px] w-full">
         <div className="flex flex-col lg:flex-row justify-between items-start gap-2">
           <h3 className="text-xl text-[#323433] font-semibold">{blog.title}</h3>
 
-          <BlogStats likes={blog.likes <= 1 ? "" : blog.likes} />
+          <BlogStats likes={blog.likes} />
         </div>
 
         <p className="text-base font-normal leading-6 flex flex-wrap text-[#4C4D4D] line-clamp-2">
@@ -31,9 +30,9 @@ const BlogCard = ({ blog }) => {
         <div className="flex flex-row items-start justify-between">
           <div className="flex gap-[10px]">
             <img
-              src={logo}
+              src={Ellipse30}
               alt="icon"
-              className="w-10 h-10 object-cover bg-gray-200 flex items-center justify-center p-1 rounded-full"
+              className="w-10 h-10 object-cover rounded-full"
             />
 
             <div className="flex flex-col gap-1 text-sm">
@@ -44,12 +43,12 @@ const BlogCard = ({ blog }) => {
           </div>
 
           <button
-            className="flex gap-2 items-center justify-between"
+            className="flex gap-2 items-center"
             onClick={() => {
               navigate(`/blogs/${blog.id}`);
             }}
           >
-            <span className="uppercase text-[#009975] text-sm font-medium m-0">
+            <span className="uppercase text-[#009975] text-sm font-medium">
               read more
             </span>
             <img src={arrowRight} alt="arrow-right" className="w-5 h-5" />

diff --git a/src/APP/pages/blogs/sections/BlogStats.jsx b/src/APP/pages/blogs/sections/BlogStats.jsx
@@ -1,25 +1,16 @@
-import { thumbsUp } from "../../../../assets/images/blogs-page";
+import { chatText, eye, thumbsUp } from "../../../../assets/images/blogs-page";
 
 const BlogStats = ({ likes }) => {
-  const handleLike = () => {
-    console.log("Clicked");
-  };
-
   return (
     <div className="flex flex-row items-center gap-2">
       {/* <div className="flex flex-row items-center gap-1">
         <img src={eye} alt="eye" className="w-5 h-5 object-cover" />
         <span className="text-base text-[#00664E]">240</span>
       </div> */}
 
-      <div className="flex flex-row items-center gap-x-1">
-        <img
-          src={thumbsUp}
-          alt="eye"
-          className="w-5 h-5 object-cover cursor-pointer"
-          onClick={handleLike}
-        />
-        <span className="text-sm text-[#00664E] m-0">{likes}</span>
+      <div className="flex flex-row items-center gap-1">
+        <img src={thumbsUp} alt="eye" className="w-5 h-5 object-cover" />
+        <span className="text-base text-[#00664E]">{likes}</span>
       </div>
 
       {/* <div className="flex flex-row items-center gap-1">