From edd7844f5b2022199a91193528c0b738061e2bbb Mon Sep 17 00:00:00 2001 From: rockyeverlast Date: Fri, 19 Apr 2024 12:14:05 +0530 Subject: [PATCH] Resources page development. --- .../ArticleInternalfive.jsx | 11 ++ src/components/Card/MobileHomeCard.jsx | 8 +- src/components/HomePage/Resources.jsx | 8 +- .../MobileComponent/MobileSubnet.jsx | 15 +- src/components/ResourcesPage/Content.jsx | 36 ++++ src/components/ResourcesPage/EventSection.jsx | 2 +- src/components/ResourcesPage/NewestEvents.jsx | 49 ++++-- src/components/ResourcesPage/Pagination.jsx | 40 +++++ .../tabInsideContent/TabsArticles.jsx | 53 ++++++ .../tabInsideContent/TabsVideo.jsx | 51 ++++++ .../tabInsideContent/WhitepaperDocs.jsx | 77 +++++++++ .../tableContent/ArticlesTable.jsx | 163 ++++++++++++++++++ .../ResourcesPage/tableContent/VideoTable.jsx | 163 ++++++++++++++++++ .../SubnetsComponent/NewSubnetComp.jsx | 2 +- 14 files changed, 655 insertions(+), 23 deletions(-) create mode 100644 src/components/ResourcesPage/Content.jsx create mode 100644 src/components/ResourcesPage/Pagination.jsx create mode 100644 src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx create mode 100644 src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx create mode 100644 src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx create mode 100644 src/components/ResourcesPage/tableContent/ArticlesTable.jsx create mode 100644 src/components/ResourcesPage/tableContent/VideoTable.jsx diff --git a/src/components/ArticleInternalfive/ArticleInternalfive.jsx b/src/components/ArticleInternalfive/ArticleInternalfive.jsx index 01594eb..a6d1d22 100644 --- a/src/components/ArticleInternalfive/ArticleInternalfive.jsx +++ b/src/components/ArticleInternalfive/ArticleInternalfive.jsx @@ -41,6 +41,17 @@ const ArticleInternalfive = () => { alignItems={"center"} flexDirection={"column"} color="white" + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 820px)": { + minHeight: "40vh", + }, + "@media (max-width: 435px)": { + // minHeight: "50vh", + // fontSize: "36px", + // width: "100%", + }, + }} > { padding={"1px"} borderRadius={"10px"} sx={{ - "@media (max-width: 600px)": { + "@media (max-width: 820px)": { + width: "100%", + margin: "0 auto", + }, + "@media (max-width: 435px)": { width: "100%", margin: "0 auto", }, @@ -33,7 +37,7 @@ const MobileHomeCard = ({ key, date, text, link }) => { minHeight={"415px"} // key={key} sx={{ - "@media (max-width: 600px)": { + "@media (max-width: 820px)": { width: "100%", minHeight: "0", }, diff --git a/src/components/HomePage/Resources.jsx b/src/components/HomePage/Resources.jsx index 99f7385..06b0280 100644 --- a/src/components/HomePage/Resources.jsx +++ b/src/components/HomePage/Resources.jsx @@ -110,8 +110,8 @@ const ResourcesPage = () => { /> ))} - - {/* */} - + + */} ); diff --git a/src/components/MobileComponent/MobileSubnet.jsx b/src/components/MobileComponent/MobileSubnet.jsx index 70b4f3a..472696a 100644 --- a/src/components/MobileComponent/MobileSubnet.jsx +++ b/src/components/MobileComponent/MobileSubnet.jsx @@ -24,7 +24,11 @@ const MobileSubnet = () => { // delay: 2500, // disableOnInteraction: false, // }} - style={{ backgroundColor: "#000" ,paddingBottom: "6rem", position: "relative"}} + style={{ + backgroundColor: "#000", + paddingBottom: "6rem", + position: "relative", + }} > { display={"flex"} alignItems={"center"} justifyContent={"space-between"} + sx={{ + "@media (max-width: 1024px)": {}, + "@media (max-width: 820px)": { + justifyContent: "center", + }, + "@media (max-width: 435px)": { + justifyContent: "left", + }, + }} > { + switch (tab) { + case "The Rubix whitepapers": + return ( + + + + ); + case "Articles": + return ( + + + + + ); + case "Videos": + return ( + + + + + ); + default: + return null; + } +}; + +export default Content; diff --git a/src/components/ResourcesPage/EventSection.jsx b/src/components/ResourcesPage/EventSection.jsx index 277c265..f16caa3 100644 --- a/src/components/ResourcesPage/EventSection.jsx +++ b/src/components/ResourcesPage/EventSection.jsx @@ -3,7 +3,7 @@ import { Badge, Box, Container, Text } from "@chakra-ui/react"; const EventSection = () => { return ( { + const [selectedTab, setSelectedTab] = useState(tabsBtn[0].btn); + + const handleTabChange = (tab) => { + setSelectedTab(tab); + }; + return ( { maxW="container.xl" textAlign={"left"} background={"#000"} + padding={"0 3.5rem"} sx={{ "@media (max-width: 500px)": { paddingLeft: "1rem", @@ -52,27 +63,37 @@ const NewestEvents = () => { }} > - - + + {tabsBtn.map((btn) => ( <> - + {btn.btn} ))} - - -

one!

- - -

two!

- - -

three!

- + + {tabsBtn.map((btn) => ( + <> + + + ))} diff --git a/src/components/ResourcesPage/Pagination.jsx b/src/components/ResourcesPage/Pagination.jsx new file mode 100644 index 0000000..a6de32b --- /dev/null +++ b/src/components/ResourcesPage/Pagination.jsx @@ -0,0 +1,40 @@ +/* eslint-disable react/prop-types */ +/* eslint-disable no-unused-vars */ +import { Box, Button, Flex } from "@chakra-ui/react"; +import { useState } from "react"; + +const Pagination = ({ currentPage, totalPages, onPageChange }) => { + const handlePageChange = (newPage) => { + onPageChange(newPage); + }; + + const pages = Array.from({ length: totalPages }, (_, index) => index + 1); + + return ( + + + {/* */} + {pages.map((page) => ( + + ))} + + + ); +}; + +export default Pagination; diff --git a/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx b/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx new file mode 100644 index 0000000..2c1505f --- /dev/null +++ b/src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx @@ -0,0 +1,53 @@ +import { Badge, Box, Image, Text } from "@chakra-ui/react"; +import pic from "../../../assets/images/eventsPic.png"; + +const TabsArticles = () => { + return ( + <> + + 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 + + + + + + ); +}; + +export default TabsArticles; diff --git a/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx b/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx new file mode 100644 index 0000000..91ea1f8 --- /dev/null +++ b/src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx @@ -0,0 +1,51 @@ +import { Badge, Box, Image, Text } from "@chakra-ui/react"; +import pic from "../../../assets/images/eventsPic.png"; + +const TabsVideo = () => { + return ( + + 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 + + + + + ); +}; + +export default TabsVideo; diff --git a/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx b/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx new file mode 100644 index 0000000..5e8502b --- /dev/null +++ b/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx @@ -0,0 +1,77 @@ +/* eslint-disable no-unused-vars */ +import { Box, Button, Image, Text } from "@chakra-ui/react"; +import { Link } from "react-router-dom"; +import cardimg from "../../../assets/images/CardImg.png"; +import pdf from "../../../assets/pdf/Rubix.pdf"; + +const WhitepaperDocs = () => { + return ( + + + + + + The Proofchain Technical Whitepaper + + + + + + + + + + + ); +}; + +export default WhitepaperDocs; diff --git a/src/components/ResourcesPage/tableContent/ArticlesTable.jsx b/src/components/ResourcesPage/tableContent/ArticlesTable.jsx new file mode 100644 index 0000000..6c75ee7 --- /dev/null +++ b/src/components/ResourcesPage/tableContent/ArticlesTable.jsx @@ -0,0 +1,163 @@ +import { Box, Button, Image, Text } from "@chakra-ui/react"; +import cardimg from "../../../assets/images/CardImg.png"; +import { Link } from "react-router-dom"; +import { useState } from "react"; +import Pagination from "../Pagination"; + +const contents = [ + { + id: 1, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 2, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 3, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 4, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 5, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 6, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 7, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 8, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 9, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 10, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 11, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 12, + title: `The Proofchain Technical Whitepaper`, + }, + { + id: 13, + title: `The Proofchain Technical Whitepaper`, + }, +]; + +const ArticlesTable = () => { + 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 ( + <> + + {currentPageContents.map((content) => ( + <> + + + + + {content.title} + + + + + + + + + + + ))} + + + + ); +}; + +export default ArticlesTable; diff --git a/src/components/ResourcesPage/tableContent/VideoTable.jsx b/src/components/ResourcesPage/tableContent/VideoTable.jsx new file mode 100644 index 0000000..a180786 --- /dev/null +++ b/src/components/ResourcesPage/tableContent/VideoTable.jsx @@ -0,0 +1,163 @@ +import { Box, Button, Image, Text } from "@chakra-ui/react"; +import cardimg from "../../../assets/images/CardImg.png"; +import { Link } from "react-router-dom"; +import { useState } from "react"; +import Pagination from "../Pagination"; + +const contents = [ + { + id: 1, + title: `What’s Next for Rubix?`, + }, + { + id: 2, + title: `What Makes Rubix Different?`, + }, + { + id: 3, + title: `How is Rubix Changing the World?`, + }, + { + id: 4, + title: `How Rubix is Green?`, + }, + { + id: 5, + title: `How Can I Build on Rubix?`, + }, + { + id: 6, + title: `What is the Rubix Community`, + }, + { + id: 7, + title: `What is the Rubix Community`, + }, + { + id: 8, + title: `How Can I Build on Rubix?`, + }, + { + id: 9, + title: `What is the Rubix Community`, + }, + { + id: 10, + title: `What is the Rubix Community`, + }, + { + id: 11, + title: `What’s Next for Rubix?`, + }, + { + id: 12, + title: `What Makes Rubix Different?`, + }, + { + id: 13, + title: `How is Rubix Changing the World?`, + }, +]; + +const VideoTable = () => { + 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 ( + <> + + {currentPageContents.map((content) => ( + <> + + + + + {content.title} + + + + + + + + + + + ))} + + + + ); +}; + +export default VideoTable; diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx index 6275a60..91ca45c 100644 --- a/src/components/SubnetsComponent/NewSubnetComp.jsx +++ b/src/components/SubnetsComponent/NewSubnetComp.jsx @@ -309,7 +309,7 @@ export const NewSubnetComp = () => {