diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index a271dd5..66328e0 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/src/components/NavBar/NavBar.jsx @@ -45,6 +45,7 @@ const NavBar = () => { const { data } = useGetUseCaseQuery(); // console.log(data); const useCase = data?.data?.rows; + console.log(useCase); const location = useLocation(); const linkStyle = { @@ -496,7 +497,7 @@ const NavBar = () => { borderRadius={"10px"} border={"none"} padding={"1rem"} - width={"60%"} + width={useCase?.length > 1 ? "50%" : "auto"} margin={"0 auto"} _focus={{ boxShadow: "none", @@ -551,6 +552,7 @@ const NavBar = () => { diff --git a/src/components/ResourcesPage/Content.jsx b/src/components/ResourcesPage/Content.jsx index 3380c4c..f84099f 100644 --- a/src/components/ResourcesPage/Content.jsx +++ b/src/components/ResourcesPage/Content.jsx @@ -5,8 +5,11 @@ import TabsVideo from "./tabInsideContent/TabsVideo"; import WhitepaperDocs from "./tabInsideContent/WhitepaperDocs"; import ArticlesTable from "./tableContent/ArticlesTable"; import VideoTable from "./tableContent/VideoTable"; +import { useParams } from "react-router-dom"; const Content = ({ tab }) => { + const { tabs } = useParams(); + switch (tab) { case "The Rubix whitepapers": return ( diff --git a/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx b/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx index dde6189..93963d0 100644 --- a/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx +++ b/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx @@ -1,66 +1,110 @@ +/* eslint-disable no-unused-vars */ import { Badge, Box, Image, Text } from "@chakra-ui/react"; import pic from "../../../assets/images/eventsPic.png"; +import { useState } from "react"; +import { useGetBlogQuery } from "../../../Redux/slice/blogsSlice"; +import Loader from "../../Loader/Loader"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { Autoplay, Navigation, Pagination } from "swiper/modules"; const TabsArticles = () => { + const [currentPage, setCurrentPage] = useState(1); + const pageSize = 5; + + const { data, isLoading, error } = useGetBlogQuery({ + page: currentPage, + pageSize, + }); + + if (isLoading) { + return ( +
+ +
+ ); + } + + if (error) { + return
Error: {error.message}
; + } + + const articles = data?.data?.rows; + console.log(articles); return ( - <> - + Newest Post + - Newest Post - - - - - - ( + + - News & Article - - - The Proofchain Technical Whitepaper - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et - massa mi. Aliquam in hendrerit urna. Pellentesque sit amet sapien - fringilla, mattis ligula consectetur, ultrices mauris. Maecenas - vitae,Aliquam in hendrerit urna. Pellentesque sit amet sapien - fringilla, mattis ligula consectetur, ultrices mauris. Maecenas - vitae,Aliquam in hendrerit urna. Pellentesque sit amet sapien - fringilla, mattis ligula consectetur, ultrices mauris. Maecenas - vitae - - - - - + + + + + + Video : {item.read_time} + + + {item.title} + + {item.summary} + + + + ))} + + ); }; diff --git a/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx b/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx index d8b639c..97e26e1 100644 --- a/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx +++ b/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx @@ -1,3 +1,4 @@ +/* eslint-disable no-unused-vars */ import { Badge, Box, Image, Text } from "@chakra-ui/react"; import pic1 from "../../../assets/images/eventsPic.png"; import pic2 from "../../../assets/images/BuildBanner.webp"; @@ -9,6 +10,10 @@ import "swiper/css/pagination"; import "swiper/css/navigation"; import { Navigation, Pagination, Autoplay } from "swiper/modules"; +import Loader from "../../Loader/Loader"; +import { useGetVideoQuery } from "../../../Redux/slice/whitePaperSlice"; +import { useState } from "react"; +import { Link } from "react-router-dom"; const videoTab = [ { @@ -56,6 +61,30 @@ const videoTab = [ ]; const TabsVideo = () => { + const [currentPage, setCurrentPage] = useState(1); + const pageSize = 5; + + const { data, isLoading, error } = useGetVideoQuery({ + page: currentPage, + pageSize, + }); + + if (isLoading) { + return ( +
+ +
+ ); + } + + if (error) { + return
Error: {error.message}
; + } + + const videos = data?.data?.data?.rows; + console.log(videos); + + const title_slug = videos.map((item) => item.title_slug); return ( { }} > Newest Post + { }} loop={true} > - {videoTab.map((item) => ( + {videos?.slice(0, 3).map((item) => ( - - - + + + + + + + + Video : {item.duration} min + + + {item.title} + + {item.description} + - - - {item.badge} - - - {item.title} - - {item.descript} - - + ))} diff --git a/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx b/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx index 67ccd84..ae05899 100644 --- a/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx +++ b/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx @@ -28,7 +28,7 @@ const WhitepaperDocs = () => { return
{console.log(error)}
; } - const docs = data?.data?.data; + const docs = data?.data?.data?.rows; const totalPages = data?.data?.totalPages; console.log(docs); @@ -67,7 +67,7 @@ const WhitepaperDocs = () => { > { const [currentPage, setCurrentPage] = useState(1); - const itemsPerPage = 9; - const totalPages = Math.ceil(contents.length / itemsPerPage); + const pageSize = 5; - const handlePageChange = (newPage) => { - setCurrentPage(newPage); - window.scrollTo({ top: 0, behavior: "smooth" }); - }; + const { data, isLoading, error } = useGetBlogQuery({ + page: currentPage, + pageSize, + }); - const startIndex = (currentPage - 1) * itemsPerPage; - const endIndex = Math.min(startIndex + itemsPerPage, contents.length); - const currentPageContents = contents.slice(startIndex, endIndex); + if (isLoading) { + return ( +
+ +
+ ); + } + + if (error) { + return
Error: {error.message}
; + } + + const articles = data?.data?.rows; + console.log(articles); + const totalItems = data?.data?.data?.totalItems; + const totalPages = data?.data?.data?.totalPages; + + function goToPage(page) { + if (page >= 1 && page <= totalPages) { + setCurrentPage(page); + } + } + + // const [currentPage, setCurrentPage] = useState(1); + // const itemsPerPage = 9; + // const totalPages = Math.ceil(contents.length / itemsPerPage); + + // const handlePageChange = (newPage) => { + // setCurrentPage(newPage); + // window.scrollTo({ top: 0, behavior: "smooth" }); + // }; + + // const startIndex = (currentPage - 1) * itemsPerPage; + // const endIndex = Math.min(startIndex + itemsPerPage, contents.length); + // const currentPageContents = contents.slice(startIndex, endIndex); return ( <> @@ -83,7 +117,7 @@ const ArticlesTable = () => { justifyContent={"space-between"} alignItems={"center"} > - {currentPageContents.map((content) => ( + {articles?.map((content) => ( <> { }, }} > - + {content.title} @@ -131,7 +167,7 @@ const ArticlesTable = () => { zIndex: "2", }} > - +