Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-27 19:25:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Articles, Video, NavBar, VideoInternal updated

Browse Source
This commit is contained in:
rockyeverlast
2024-05-22 19:41:16 +05:30
parent 91518d6f02
commit 248f351c3c
11 changed files with 334 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/NavBar/NavBar.jsx
View File

@@ -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 = () => {
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>

3
src/components/ResourcesPage/Content.jsx
View File

@@ -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 (

154
src/components/ResourcesPage/tabInsideContent/TabsArticles.jsx
View File

@@ -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 (
<div>
<Loader />
</div>
);
}
if (error) {
return <div>Error: {error.message}</div>;
}
const articles = data?.data?.rows;
console.log(articles);
return (
<>
<Box
backgroundColor={"#151515"}
padding={"2rem"}
borderRadius={"5px"}
sx={{
"@media (max-width: 600px)": {
padding: "2rem 1rem",
},
<Box
backgroundColor={"#151515"}
padding={"2rem"}
borderRadius={"5px"}
className="tabspagination"
sx={{
"@media (max-width: 600px)": {
padding: "2rem 1rem",
},
}}
>
<Text paddingBottom={"1rem"}>Newest Post</Text>
<Swiper
pagination={true}
navigation={true}
modules={[Navigation, Pagination, Autoplay]}
autoplay={{
delay: 10000,
disableOnInteraction: true,
}}
loop={true}
>
<Text paddingBottom={"1rem"}>Newest Post</Text>
<Box
display={"flex"}
alignItems={"center"}
justifyContent={"start"}
gap={"2rem"}
sx={{
"@media (max-width: 600px)": {
flexDirection: "column",
},
}}
>
<Box>
<Image src={pic} />
</Box>
<Box flex={"1"}>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"14px"}
marginBottom={"1rem"}
{articles?.slice(0, 3).map((item) => (
<SwiperSlide key={item.id}>
<Box
display={"flex"}
alignItems={"start"}
justifyContent={"start"}
gap={"2rem"}
sx={{
"@media (max-width: 600px)": {
flexDirection: "column",
},
}}
>
News & Article
</Badge>
<Text
as={"h2"}
className="rubix-text-subheading"
marginBottom={"1rem"}
>
The Proofchain Technical Whitepaper
</Text>
<Text className="rubix-text-small">
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
</Text>
</Box>
</Box>
</Box>
</>
<Box>
<Image
src={`https://rubix.betadelivery.com/${item.content_image_large}`}
maxW={"418px"}
minH={"280px"}
objectFit={"cover"}
sx={{
"@media (max-width: 600px)": {
maxW: "100%",
minH: "auto",
},
}}
/>
</Box>
<Box flex={"1"}>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"14px"}
marginBottom={"1rem"}
>
Video : {item.read_time}
</Badge>
<Text
as={"h2"}
className="rubix-text-subheading"
marginBottom={"1rem"}
>
{item.title}
</Text>
<Text className="rubix-text-small">{item.summary}</Text>
</Box>
</Box>
</SwiperSlide>
))}
</Swiper>
</Box>
);
};

123
src/components/ResourcesPage/tabInsideContent/TabsVideo.jsx
View File

@@ -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 (
<div>
<Loader />
</div>
);
}
if (error) {
return <div>Error: {error.message}</div>;
}
const videos = data?.data?.data?.rows;
console.log(videos);
const title_slug = videos.map((item) => item.title_slug);
return (
<Box
backgroundColor={"#151515"}
@@ -69,6 +98,7 @@ const TabsVideo = () => {
}}
>
<Text paddingBottom={"1rem"}>Newest Post</Text>
<Swiper
pagination={true}
navigation={true}
@@ -79,53 +109,56 @@ const TabsVideo = () => {
}}
loop={true}
>
{videoTab.map((item) => (
{videos?.slice(0, 3).map((item) => (
<SwiperSlide key={item.id}>
<Box
display={"flex"}
alignItems={"start"}
justifyContent={"start"}
gap={"2rem"}
sx={{
"@media (max-width: 600px)": {
flexDirection: "column",
},
}}
>
<Box>
<Image
src={item.thumbnail}
maxW={"418px"}
minH={"280px"}
sx={{
"@media (max-width: 600px)": {
maxW: "100%",
minH: "auto",
},
}}
/>
<Link to={`/${item.title_slug}`}>
<Box
display={"flex"}
alignItems={"start"}
justifyContent={"start"}
gap={"2rem"}
sx={{
"@media (max-width: 600px)": {
flexDirection: "column",
},
}}
>
<Box>
<Image
src={`https://rubix.betadelivery.com/${item.thumbnail}`}
maxW={"418px"}
minH={"280px"}
objectFit={"cover"}
sx={{
"@media (max-width: 600px)": {
maxW: "100%",
minH: "auto",
},
}}
/>
</Box>
<Box flex={"1"}>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"14px"}
marginBottom={"1rem"}
>
Video : {item.duration} min
</Badge>
<Text
as={"h2"}
className="rubix-text-subheading"
marginBottom={"1rem"}
>
{item.title}
</Text>
<Text className="rubix-text-small">{item.description}</Text>
</Box>
</Box>
<Box flex={"1"}>
<Badge
backgroundColor={"transparent"}
color={"#fff"}
fontWeight={"500"}
fontFamily={"Poppins"}
fontSize={"14px"}
marginBottom={"1rem"}
>
{item.badge}
</Badge>
<Text
as={"h2"}
className="rubix-text-subheading"
marginBottom={"1rem"}
>
{item.title}
</Text>
<Text className="rubix-text-small">{item.descript}</Text>
</Box>
</Box>
</Link>
</SwiperSlide>
))}
</Swiper>

4
src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx
View File

@@ -28,7 +28,7 @@ const WhitepaperDocs = () => {
return <div>{console.log(error)}</div>;
}
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 = () => {
>
<Image
src={`https://rubix.betadelivery.com/${item.bannerImage}`}
maxHeight={"160px"}
maxHeight={"215px"}
width={"100%"}
objectFit={"cover"}
objectPosition={"center"}

66
src/components/ResourcesPage/tableContent/ArticlesTable.jsx
View File

@@ -1,8 +1,11 @@
/* eslint-disable no-unused-vars */
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/Pagination";
import Loader from "../../Loader/Loader";
import { useGetBlogQuery } from "../../../Redux/slice/blogsSlice";
const contents = [
{
@@ -61,17 +64,48 @@ const contents = [
const ArticlesTable = () => {
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 (
<div>
<Loader />
</div>
);
}
if (error) {
return <div>Error: {error.message}</div>;
}
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) => (
<>
<Box
width={"340px"}
@@ -98,13 +132,15 @@ const ArticlesTable = () => {
},
}}
>
<Image src={cardimg} />
<Image
src={`https://rubix.betadelivery.com/${content.content_image_large}`}
/>
<Box padding={"1rem"}>
<Text
color={"#fff"}
fontSize={"25px"}
fontSize={"18px"}
marginBottom={"20px"}
minHeight={"40px"}
minHeight={"90px"}
maxWidth={"420px"}
>
{content.title}
@@ -131,7 +167,7 @@ const ArticlesTable = () => {
zIndex: "2",
}}
></Box>
<Link>
<Link to={`/blogs/${content.title_slug}`}>
<Button
position={"relative"}
backgroundColor={"transparent"}
@@ -154,7 +190,7 @@ const ArticlesTable = () => {
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handlePageChange}
onPageChange={goToPage}
/>
</>
);

20
src/components/ResourcesPage/tableContent/VideoTable.jsx
View File

@@ -84,7 +84,7 @@ const VideoTable = () => {
}
const videos = data?.data?.data?.rows;
console.log(videos);
// console.log(videos);
const totalItems = data?.data?.data?.totalItems;
const totalPages = data?.data?.data?.totalPages;
@@ -100,8 +100,8 @@ const VideoTable = () => {
margin={"4rem 0"}
display={"flex"}
flexWrap={"wrap"}
rowGap={"2rem"}
justifyContent={"space-between"}
gap={"2rem"}
justifyContent={"start"}
alignItems={"center"}
>
{videos.map((content) => (
@@ -119,17 +119,23 @@ const VideoTable = () => {
},
}}
>
<Image src={cardimg} />
<Box padding={"1rem"}>
<Image
src={`https://rubix.betadelivery.com/${content.thumbnail}`}
/>
<Box padding={"1rem 0"}>
<Text
color={"#fff"}
fontSize={"25px"}
marginBottom={"20px"}
marginBottom={"10px"}
minHeight={"70px"}
maxWidth={"420px"}
>
{content.title}
</Text>
<Text marginBottom={"20px"} fontSize={"12px"}>
Duration : {content.duration} min
</Text>
<Box
display={"flex"}
alignItems={"center"}
@@ -152,7 +158,7 @@ const VideoTable = () => {
zIndex: "2",
}}
></Box>
<Link to="/video-page">
<Link to={`/${content.title_slug}`}>
<Button
position={"relative"}
backgroundColor={"transparent"}

68
src/components/UseCase/NewUseCase.jsx
View File

@@ -136,13 +136,14 @@ const NewUseCase = ({
{/* ========[ Head-Para ]====== */}
<Box
width={"65vw"}
className="usecases"
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
<Text
{/* <Text
style={{ marginBottom: 6 }}
className="rubix-fw-500"
fontSize="3xl"
@@ -165,7 +166,12 @@ const NewUseCase = ({
}}
>
{matchingUseCase.solution}
</Text>
</Text> */}
<Text
pb={5}
className="rubix-text-small"
dangerouslySetInnerHTML={{ __html: matchingUseCase.content }}
/>
</Box>
<Box
@@ -202,38 +208,42 @@ const NewUseCase = ({
</Text> */}
</Box>
</Box>
{matchingUseCase.attachments.map((item) => (
<Container
maxW="container.xl"
marginBottom={"2rem"}
key={item.id}
{matchingUseCase ? (
<Text
className="rubix-fw-500"
fontSize="3xl"
textColor={"#ffffff"}
marginBottom={"3rem"}
marginInline={"3rem"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
textAlign: "center",
},
}}
>
{item ? (
<Text
className="rubix-fw-500"
fontSize="3xl"
textColor={"#ffffff"}
marginBottom={"3rem"}
marginInline={"3rem"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
textAlign: "center",
},
}}
>
Use Cases
</Text>
) : (
""
)}
Use Cases
</Text>
) : (
""
)}
<Container
maxW="container.xl"
marginBottom={"2rem"}
display={"flex"}
justifyContent={"start"}
gap={"2rem"}
flexWrap={"wrap"}
>
{matchingUseCase.attachments.map((item) => (
<Box
key={item.id}
width={"275px"}
background={"#15181E"}
borderRadius={"10px"}
minHeight={"360px"}
padding={"15px"}
marginInline={"3rem"}
// marginInline={"3rem"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
@@ -306,8 +316,8 @@ const NewUseCase = ({
</Box>
</Box>
</Box>
</Container>
))}
))}
</Container>
</Box>
</div>
) : (

48
src/components/VideoInternal/VideoInternal.jsx
View File

@@ -2,8 +2,20 @@
import React, { useEffect, useState } from "react";
import { Box, Text, Image } from "@chakra-ui/react";
import { AspectRatio } from "@chakra-ui/react";
import { useGetVideoQuery } from "../../Redux/slice/whitePaperSlice";
import Loader from "../Loader/Loader";
import { useParams } from "react-router-dom";
const VideoInternal = () => {
const { title_slug } = useParams();
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 5;
const { data, isLoading, error } = useGetVideoQuery({
page: currentPage,
pageSize,
});
console.log(data);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
@@ -23,9 +35,32 @@ const VideoInternal = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
if (isLoading) {
return (
<div>
<Loader />
</div>
);
}
if (error) {
return <div>Error: {error.message}</div>;
}
const videos = data?.data?.data?.rows;
// console.log(videos);
const matchingvideos = videos
? videos.find((item) => item.title_slug === title_slug)
: null;
console.log(matchingvideos);
return (
<>
<Box
key={matchingvideos.id}
bg="#000000"
height={"auto"}
display={"flex"}
@@ -69,7 +104,7 @@ const VideoInternal = () => {
},
}}
>
How is Rubix Changing the World?
{matchingvideos.title}
</Text>
<Text
@@ -81,7 +116,7 @@ const VideoInternal = () => {
},
}}
>
Videos January 5, 2023
Video duration : {matchingvideos.duration} min
</Text>
<Text
@@ -93,10 +128,7 @@ const VideoInternal = () => {
},
}}
>
Rubix’s technology may live on the web but it was designed to
address real world problems like climate change, hunger and
inequality. We select our partners with care. Every app built on the
Rubix platform is designed to address a real world issue.
{matchingvideos.description}
</Text>
</Box>
@@ -130,7 +162,7 @@ const VideoInternal = () => {
}}
>
<iframe
src="https://www.youtube.com/embed/EUJBd2fP5TA?rel=0"
src={`${matchingvideos.embeddedCode}`}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
@@ -157,7 +189,7 @@ const VideoInternal = () => {
}}
>
<iframe
src="https://www.youtube.com/embed/EUJBd2fP5TA?rel=0"
src={`${matchingvideos.embeddedCode}`}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen

4
src/index.css
View File

@@ -199,6 +199,10 @@ span.swiper-pagination-bullet {
font-size: 2em;
}
.usecases .rubix-text-small h1 {
font-size: 2em;
}
@media only screen and (max-width: 600px) {
.tabspagination .swiper-button-prev,
.tabspagination .swiper-button-next {

4
src/routes/_routes.jsx
View File

@@ -95,11 +95,11 @@ export const route = [
element: <Form />,
},
{
path: "resources-page",
path: "resources-page/:tabs?",
element: <ResourcesPage />,
},
{
path: "video-page",
path: "video-page/:title_slug",
element: <VideoInternal />,
},
{