From 00dc3728970332ee49acbdc63303100c37ae0c2f Mon Sep 17 00:00:00 2001
From: rockyeverlast <rockyeverlast@gmail.com>
Date: Fri, 24 May 2024 19:51:33 +0530
Subject: [PATCH] Updates and fixes

---
 src/components/ArticlePage/ArticlePage.jsx    |  2 --
 src/components/BlogPost/BlogPost.jsx          |  4 +--
 src/components/Card/HomeCard.jsx              | 13 +++----
 src/components/Card/MobileHomeCard.jsx        | 21 ++++++++----
 src/components/Chip/Chip.jsx                  |  2 ++
 .../MobileComponent/ResourcesMobile.jsx       | 14 +++++---
 src/components/NavBar/NavBar.jsx              |  2 +-
 src/components/NewsPage/NewsHeader.jsx        |  2 +-
 src/components/ResourcesPage/NewestEvents.jsx |  2 +-
 .../tabInsideContent/TabsArticles.jsx         |  7 ++--
 .../tabInsideContent/TabsVideo.jsx            |  5 +--
 .../tableContent/ArticlesTable.jsx            | 12 ++++++-
 .../ResourcesPage/tableContent/VideoTable.jsx | 12 ++++++-
 .../VideoInternal/VideoInternal.jsx           |  5 ++-
 src/index.css                                 | 10 ++++--
 src/routes/_routes.jsx                        | 34 +------------------
 16 files changed, 75 insertions(+), 72 deletions(-)

diff --git a/src/components/ArticlePage/ArticlePage.jsx b/src/components/ArticlePage/ArticlePage.jsx
index 43c191d..64c2a0a 100644
--- a/src/components/ArticlePage/ArticlePage.jsx
+++ b/src/components/ArticlePage/ArticlePage.jsx
@@ -39,8 +39,6 @@ const ArticlePage = () => {
     ? blogPosts.find((item) => item.title_slug === title_slug)
     : null;
 
-  console.log(matchingArticles);
-  console.log(matchingArticles.content);
   return (
     <>
       {matchingArticles ? (
diff --git a/src/components/BlogPost/BlogPost.jsx b/src/components/BlogPost/BlogPost.jsx
index 0e90d1e..e98272d 100644
--- a/src/components/BlogPost/BlogPost.jsx
+++ b/src/components/BlogPost/BlogPost.jsx
@@ -40,8 +40,8 @@ const BlogPost = () => {
     ? blogPosts.find((item) => item.title_slug === title_slug)
     : null;
 
-  console.log(matchingBlogPost);
-  console.log(matchingBlogPost.content);
+  // console.log(matchingBlogPost);
+  // console.log(matchingBlogPost.content);
 
   return (
     <>
diff --git a/src/components/Card/HomeCard.jsx b/src/components/Card/HomeCard.jsx
index c2ebdc2..a2d925c 100644
--- a/src/components/Card/HomeCard.jsx
+++ b/src/components/Card/HomeCard.jsx
@@ -6,6 +6,7 @@ import cardimg from "../../assets/images/CardImg.png";
 import { Badge } from "@chakra-ui/react";
 import { Link, useParams } from "react-router-dom";
 import { useGetBlogQuery } from "../../Redux/slice/blogsSlice";
+import Chip from "../Chip/Chip";
 
 const HomeCard = ({ cardkey, date, text, link }) => {
   const { data } = useGetBlogQuery();
@@ -51,15 +52,9 @@ const HomeCard = ({ cardkey, date, text, link }) => {
               src={`https://rubix.betadelivery.com/${card.content_image_large}`}
             />
             <Box padding={"1rem"}>
-              <Badge
-                backgroundColor={"#565263"}
-                color={"#fff"}
-                fontWeight={"400"}
-                borderRadius={"20px"}
-                padding={"3px 16px"}
-              >
-                INSIGHT
-              </Badge>
+              {blogCards.tags.map((tag, index) => (
+                <Chip key={index} title={tag.tag} />
+              ))}
 
               {(function () {
                 const createdAtDate = new Date(card.createdAt);
diff --git a/src/components/Card/MobileHomeCard.jsx b/src/components/Card/MobileHomeCard.jsx
index 4ce591b..6a731cf 100644
--- a/src/components/Card/MobileHomeCard.jsx
+++ b/src/components/Card/MobileHomeCard.jsx
@@ -10,10 +10,12 @@ import { Link } from "react-router-dom";
 
 import { Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
+import Chip from "../Chip/Chip";
 
-const MobileHomeCard = ({ key, date, text, link }) => {
+const MobileHomeCard = ({ key, date, title, link, img, tags }) => {
   return (
     <Box
+      key={key}
       backgroundImage={
         "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
       }
@@ -43,9 +45,12 @@ const MobileHomeCard = ({ key, date, text, link }) => {
           },
         }}
       >
-        <Image src={cardimg} borderRadius={"10px"} />
+        <Image
+          src={`https://rubix.betadelivery.com/${img}`}
+          borderRadius={"10px"}
+        />
         <Box padding={"1rem"}>
-          <Badge
+          {/* <Badge
             backgroundColor={"#565263"}
             color={"#fff"}
             fontWeight={"400"}
@@ -54,8 +59,10 @@ const MobileHomeCard = ({ key, date, text, link }) => {
             marginBottom={"20px"}
           >
             INSIGHT
-          </Badge>
-
+          </Badge> */}
+          {tags.map((tag, index) => (
+            <Chip key={index} title={tag.tag} />
+          ))}
           {/* <Text
             fontSize={"12px"}
             color={"#979797"}
@@ -81,7 +88,7 @@ const MobileHomeCard = ({ key, date, text, link }) => {
               },
             }}
           >
-            {text}
+            {title}
           </Text>
           <Box
             display={"flex"}
@@ -104,7 +111,7 @@ const MobileHomeCard = ({ key, date, text, link }) => {
                 zIndex: "2",
               }}
             ></Box>
-            <Link to={link}>
+            <Link to={`/blogs/${link}`}>
               <Button
                 position={"relative"}
                 backgroundColor={"transparent"}
diff --git a/src/components/Chip/Chip.jsx b/src/components/Chip/Chip.jsx
index 82bae3c..ceb0e5c 100644
--- a/src/components/Chip/Chip.jsx
+++ b/src/components/Chip/Chip.jsx
@@ -9,6 +9,8 @@ const Chip = ({ title }) => {
         display: "inline-block", // Ensure the span takes up the necessary space
         padding: "2px 18px", // Add padding for better visibility
         borderRadius: "18px",
+        marginBottom: "20px",
+        marginRight: "10px",
       }}
     >
       {title}
diff --git a/src/components/MobileComponent/ResourcesMobile.jsx b/src/components/MobileComponent/ResourcesMobile.jsx
index b2cd930..c17bca8 100644
--- a/src/components/MobileComponent/ResourcesMobile.jsx
+++ b/src/components/MobileComponent/ResourcesMobile.jsx
@@ -8,6 +8,7 @@ import "swiper/css/navigation";
 import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import MobileHomeCard from "../Card/MobileHomeCard";
+import { useGetBlogQuery } from "../../Redux/slice/blogsSlice";
 
 const content = [
   {
@@ -60,6 +61,9 @@ const Content = {
 };
 
 const ResourcesMobile = () => {
+  const { data } = useGetBlogQuery();
+  const blogCards = data?.data?.rows;
+
   return (
     <Box backgroundColor={"#101015"} padding={"2rem 1rem 3rem"}>
       <Text
@@ -91,14 +95,16 @@ const ResourcesMobile = () => {
           disableOnInteraction: false,
         }}
       >
-        {content.map((item) => (
+        {blogCards.map((item) => (
           <>
             <SwiperSlide>
               <MobileHomeCard
                 key={item.id}
-                date={item.date}
-                text={item.text}
-                link={item.link}
+                date={item.createdAt}
+                title={item.title}
+                link={item.title_slug}
+                img={item.content_image_large}
+                tags={item.tags}
               />
             </SwiperSlide>
           </>
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index 0d177c3..f58a1cc 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -45,7 +45,7 @@ const NavBar = () => {
   const { data } = useGetUseCaseQuery();
   // console.log(data);
   const useCase = data?.data?.rows;
-  console.log(useCase);
+  // console.log(useCase);
   const location = useLocation();
 
   const linkStyle = {
diff --git a/src/components/NewsPage/NewsHeader.jsx b/src/components/NewsPage/NewsHeader.jsx
index 45989e6..c2a7ec9 100644
--- a/src/components/NewsPage/NewsHeader.jsx
+++ b/src/components/NewsPage/NewsHeader.jsx
@@ -40,7 +40,7 @@ const NewsHeader = () => {
           fontSize={"20px"}
           marginBottom={"1.5rem"}
         >
-          NEWS & ARTICLES
+          NEWS
         </Badge>
         <Text
           as={"h2"}
diff --git a/src/components/ResourcesPage/NewestEvents.jsx b/src/components/ResourcesPage/NewestEvents.jsx
index 6c2d008..6921298 100644
--- a/src/components/ResourcesPage/NewestEvents.jsx
+++ b/src/components/ResourcesPage/NewestEvents.jsx
@@ -52,7 +52,7 @@ const NewestEvents = () => {
       height={"auto"}
       sx={{
         "@media (max-width: 1024px)": {
-          height: "70vh",
+          height: "auto",
         },
         "@media (max-width: 600px)": {
           height: "auto",
diff --git a/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx b/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx
index f337440..2a392d7 100644
--- a/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx
+++ b/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx
@@ -63,8 +63,9 @@ const TabsArticles = () => {
                 justifyContent={"start"}
                 gap={"2rem"}
                 sx={{
-                  "@media (max-width: 600px)": {
+                  "@media (max-width: 820px)": {
                     flexDirection: "column",
+                    alignItems: "center",
                   },
                 }}
               >
@@ -75,7 +76,7 @@ const TabsArticles = () => {
                     minH={"280px"}
                     objectFit={"cover"}
                     sx={{
-                      "@media (max-width: 600px)": {
+                      "@media (max-width: 820px)": {
                         maxW: "100%",
                         minH: "auto",
                       },
@@ -91,7 +92,7 @@ const TabsArticles = () => {
                     fontSize={"14px"}
                     marginBottom={"1rem"}
                   >
-                    Video : {item.read_time}
+                    Article : {item.read_time}
                   </Badge>
                   <Text
                     as={"h2"}
diff --git a/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx b/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx
index 86ad027..0c34d84 100644
--- a/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx
+++ b/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx
@@ -118,9 +118,10 @@ const TabsVideo = () => {
                 justifyContent={"start"}
                 gap={"2rem"}
                 sx={{
-                  "@media (max-width: 600px)": {
+                  "@media (max-width: 820px)": {
                     flexDirection: "column",
                     minHeight: "472px",
+                    alignItems: "center",
                   },
                 }}
               >
@@ -131,7 +132,7 @@ const TabsVideo = () => {
                     minH={"280px"}
                     objectFit={"cover"}
                     sx={{
-                      "@media (max-width: 600px)": {
+                      "@media (max-width: 820px)": {
                         maxW: "100%",
                         minH: "auto",
                       },
diff --git a/src/components/ResourcesPage/tableContent/ArticlesTable.jsx b/src/components/ResourcesPage/tableContent/ArticlesTable.jsx
index e766558..d07e6ea 100644
--- a/src/components/ResourcesPage/tableContent/ArticlesTable.jsx
+++ b/src/components/ResourcesPage/tableContent/ArticlesTable.jsx
@@ -116,6 +116,16 @@ const ArticlesTable = () => {
         rowGap={"2rem"}
         justifyContent={"space-between"}
         alignItems={"center"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            justifyContent: "space-between",
+            rowGap: "5rem",
+          },
+          "@media (max-width: 820px)": {
+            rowGap: "2rem",
+            justifyContent: "center",
+          },
+        }}
       >
         {articles?.map((content) => (
           <>
@@ -126,7 +136,7 @@ const ArticlesTable = () => {
               minHeight={"340px"}
               padding={"15px"}
               sx={{
-                "@media (max-width: 600px)": {
+                "@media (max-width: 820px)": {
                   width: "100%",
                   minHeight: "0",
                 },
diff --git a/src/components/ResourcesPage/tableContent/VideoTable.jsx b/src/components/ResourcesPage/tableContent/VideoTable.jsx
index f5a5a63..81a3000 100644
--- a/src/components/ResourcesPage/tableContent/VideoTable.jsx
+++ b/src/components/ResourcesPage/tableContent/VideoTable.jsx
@@ -103,6 +103,16 @@ const VideoTable = () => {
         gap={"2rem"}
         justifyContent={"start"}
         alignItems={"center"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            justifyContent: "space-between",
+            rowGap: "5rem",
+          },
+          "@media (max-width: 820px)": {
+            rowGap: "2rem",
+            justifyContent: "center",
+          },
+        }}
       >
         {videos.map((content) => (
           <>
@@ -113,7 +123,7 @@ const VideoTable = () => {
               minHeight={"340px"}
               padding={"15px"}
               sx={{
-                "@media (max-width: 600px)": {
+                "@media (max-width: 820px)": {
                   width: "100%",
                   minHeight: "0",
                 },
diff --git a/src/components/VideoInternal/VideoInternal.jsx b/src/components/VideoInternal/VideoInternal.jsx
index 9f47ba4..f6cb3ae 100644
--- a/src/components/VideoInternal/VideoInternal.jsx
+++ b/src/components/VideoInternal/VideoInternal.jsx
@@ -15,7 +15,7 @@ const VideoInternal = () => {
     pageSize,
   });
 
-  console.log(data);
+  // console.log(data);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   useEffect(() => {
@@ -49,7 +49,6 @@ const VideoInternal = () => {
   }
 
   const videos = data?.data?.data?.rows;
-  // console.log(videos);
 
   const matchingvideos = videos
     ? videos.find((item) => item.title_slug === title_slug)
@@ -83,7 +82,7 @@ const VideoInternal = () => {
           color="white"
           marginBottom={"2rem"}
           sx={{
-            "@media (max-width: 600px)": {
+            "@media (max-width: 820px)": {
               minHeight: "inherit",
               width: "100vw",
               marginTop: "6rem",
diff --git a/src/index.css b/src/index.css
index 2a524c9..515532f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -203,6 +203,12 @@ span.swiper-pagination-bullet {
   font-size: 2em;
 }
 
+@media only screen and (max-width: 820px) {
+  .tabspagination .swiper-button-next {
+    left: auto;
+  }
+}
+
 @media only screen and (max-width: 600px) {
   .tabspagination .swiper-button-prev,
   .tabspagination .swiper-button-next {
@@ -231,11 +237,11 @@ span.swiper-pagination-bullet {
   }
 
   .swiper-button-next {
-    right: -8px;
+    right: 0px;
   }
 
   .swiper-button-prev {
-    left: -8px;
+    left: 0px;
   }
   .team-slider .swiper-button-prev {
     left: 28px;
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index 73f04fa..7421099 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -61,38 +61,6 @@ export const route = [
     element: <Community />,
   },
 
-  {
-    path: "bring-your-own-blockspace",
-    element: <ArticleInternalOne />,
-  },
-  {
-    path: "rubix-the-sustainable-blockchain-solution-a-green-initiative",
-    element: <ArticleInternalTwo />,
-  },
-  {
-    path: "mining-rubix-tokens-what-you-need-to-know",
-    element: <ArticleInternalThree />,
-  },
-  {
-    path: "securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently",
-    element: <ArticleInternalFour />,
-  },
-  {
-    path: "enterprise-blockchains-on-a-public-chain",
-    element: <ArticleInternalfive />,
-  },
-  {
-    path: "multichain-over-blockchain-a-reality-check-on-security-threat",
-    element: <ArticleInternalSix />,
-  },
-  {
-    path: "building-blocks-of-next-gen-blockchain",
-    element: <ArticleInternalSeven />,
-  },
-  {
-    path: "driving-sustainable-innovations",
-    element: <ArticleInternalEight />,
-  },
   {
     path: "Contact",
     element: <Form />,
@@ -102,7 +70,7 @@ export const route = [
     element: <ResourcesPage />,
   },
   {
-    path: "video-page/:title_slug",
+    path: "/:title_slug",
     element: <VideoInternal />,
   },
   {