Siddhesh.More/rubix
1
0
Fork 0
mirror of https://github.com/WDI-Ideas/rubix.git synced 2026-04-28 01:15:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Store state in article/video and date format updated

Browse Source
This commit is contained in:
rockyeverlast
2024-05-24 14:41:54 +05:30
parent 953c949f77
commit 867ba52f01
8 changed files with 380 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
src/components/ArticlePage/ArticlePage.jsx Normal file
View File

@@ -0,0 +1,299 @@
/* eslint-disable no-unused-vars */
import React, { useEffect } from "react";
import { Box, Text, Image } from "@chakra-ui/react";
import { Avatar, AvatarBadge, AvatarGroup } from "@chakra-ui/react";
import Chip from "../Chip/Chip";
import Footer from "../Footer/Footer";
import { ChevronRightIcon } from "@chakra-ui/icons";
import profile from "../../assets/images/profile.png";
import x from "../../assets/images/x.png";
import linked from "../../assets/images/linked.png";
import github from "../../assets/images/github.png";
import tele from "../../assets/images/tele.png";
import reddit from "../../assets/images/reddit.png";
import fb from "../../assets/images/fb.png";
import { useGetBlogQuery } from "../../Redux/slice/blogsSlice";
import { Link, useParams } from "react-router-dom";
import NotFound from "../../pages/NotFound";
import Loader from "../Loader/Loader";
const ArticlePage = () => {
const { title_slug } = useParams();
const { data, error, isLoading } = useGetBlogQuery();
const blogPosts = data?.data?.rows;
console.log(blogPosts);
useEffect(() => {
window.scrollTo(0, 0);
}, []);
if (isLoading) {
return (
<div>
<Loader />
</div>
);
}
const matchingArticles = blogPosts
? blogPosts.find((item) => item.title_slug === title_slug)
: null;
console.log(matchingArticles);
console.log(matchingArticles.content);
return (
<>
{matchingArticles ? (
<Box
bg="#000000"
height={"auto"}
display={"flex"}
gap={7}
justifyContent={"center"}
alignItems={"center"}
flexDirection={"column"}
color="white"
key={matchingArticles.id}
>
<Box
bg="#000000"
minHeight={"60vh"}
width={"70vw"}
display={"flex"}
gap={5}
marginTop={10}
justifyContent={"end"}
alignItems={"center"}
flexDirection={"column"}
color="white"
sx={{
"@media (max-width: 600px)": {
minHeight: "inherit",
width: "100vw",
marginTop: "6rem",
},
}}
>
<Text
textAlign={"center"}
className="rubix-fw-600"
fontSize={"40px"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "28px",
lineHeight: "45px",
padding: "0px 1rem",
},
}}
>
{matchingArticles.title}
</Text>
<Text
textAlign={"center"}
className="rubix-text-xsmall rubix-fw-500"
sx={{
"@media (max-width: 600px)": {
fontSize: "35px",
},
}}
>
{matchingArticles.category.blog_category}
{(function () {
const createdAtDate = new Date(matchingArticles.createdAt);
const formattedDate = createdAtDate
.toLocaleDateString("en-Us", {
day: "numeric",
month: "long",
year: "numeric",
})
.replace(/\//g, "-");
return (
<Text
as={"span"}
textAlign={"center"}
className="rubix-text-xsmall rubix-fw-500"
marginLeft={"10px"}
sx={{
"@media (max-width: 600px)": {
fontSize: "35px",
},
}}
>
{formattedDate}
</Text>
);
})()}
</Text>
<Box display={"flex"} gap={3} textAlign={"center"}>
<Avatar
size="lg"
name="Dan Abrahmov"
src={`https://rubix.betadelivery.com/${matchingArticles.profile_image}`}
/>
<Box
textAlign={"start"}
display={"flex"}
flexDirection={"column"}
alignItems={"start"}
justifyContent={"center"}
className="rubix-text-xsmall rubix-fw-500"
>
<Text>{matchingArticles.author_name}</Text>
<Text>{matchingArticles.author_designation}</Text>
</Box>
</Box>
</Box>
{/* ========[ Banner ]======= */}
<Box
height={"70vh"}
width={"85vw"}
backgroundImage={`url(https://rubix.betadelivery.com/${matchingArticles.content_image_large})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
position="relative"
sx={{
"@media (max-width: 600px)": {
height: "215px",
width: "100%",
},
}}
>
<Box
position="absolute"
top={0}
left={0}
width="100%"
height="100%"
backgroundColor="rgba(0, 0, 0, 0.5)"
/>
</Box>
<Box
bg="#000000"
width={"85vw"}
height={"auto"}
display={"flex"}
pb={"60px"}
gap={5}
justifyContent={"center"}
alignItems={"center"}
flexDirection={"column"}
color="white"
position={"relative"}
sx={{
"@media (max-width: 600px)": {
display: "block",
top: "inherit",
},
}}
>
<Box
position={"absolute"}
top={0}
left={0}
display={"flex"}
flexDirection={"column"}
alignItems={"center"}
gap={2}
sx={{
"@media (max-width: 600px)": {
bottom: "0px",
top: "inherit",
display: "block",
width: "100%",
marginBottom: "20px",
marginTop: "20px",
},
}}
>
<Text
className="rubix-text-xsmall"
sx={{
"@media (max-width: 600px)": {
marginBottom: "15px",
},
}}
>
Share
</Text>
<Text
sx={{
"@media (max-width: 600px)": {
display: "flex",
justifyContent: "space-between",
width: "60%",
},
}}
>
<Link to="https://t.me/rubixblockchain" target="_blank">
<Image cursor={"pointer"} mb={4} w={6} h={6} src={tele} />
</Link>
<Link to="https://twitter.com/rubixchain" target="_blank">
<Image cursor={"pointer"} mb={4} w={6} h={6} src={x} />
</Link>
<Link to="https://www.facebook.com/RubixChain" target="_blank">
<Image cursor={"pointer"} mb={4} w={6} h={6} src={fb} />
</Link>
<Link
to="https://www.linkedin.com/company/rubixnet/"
target="_blank"
>
<Image cursor={"pointer"} mb={4} w={6} h={6} src={linked} />
</Link>
</Text>
</Box>
<Box
bg="#000000"
width={"68vw"}
height={"auto"}
display={"flex"}
flexDirection={"column"}
gap={5}
justifyContent={"start"}
color="white"
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
<Box display={"flex"} gap={5} justifyContent={"start"}>
{matchingArticles.tags.map((tag, index) => (
<Chip key={index} title={tag.tag} />
))}
</Box>
<Box
className="blog-post"
pt={5}
pb={5}
sx={{
"@media (max-width: 600px)": {
marginBottom: "3rem",
},
}}
>
<Text
pb={5}
className="rubix-text-small"
dangerouslySetInnerHTML={{ __html: matchingArticles.content }}
/>
{/* {matchingBlogPost.content}
</Text> */}
</Box>
</Box>
</Box>
</Box>
) : (
<NotFound />
)}
</>
);
};
export default ArticlePage;

15
src/components/BlogPost/BlogPost.jsx
View File

@@ -104,14 +104,13 @@ const BlogPost = () => {
{matchingBlogPost.category.blog_category}
{(function () {
const createdAtDate = new Date(matchingBlogPost.createdAt);
const formattedDate = createdAtDate.toLocaleDateString(
"en-GB",
{
day: "2-digit",
month: "2-digit",
year: "2-digit",
}
);
const formattedDate = createdAtDate
.toLocaleDateString("en-Us", {
day: "numeric",
month: "long",
year: "numeric",
})
.replace(/\//g, "-");
return (
<Text
as={"span"}

15
src/components/Card/HomeCard.jsx
View File

@@ -63,14 +63,13 @@ const HomeCard = ({ cardkey, date, text, link }) => {
{(function () {
const createdAtDate = new Date(card.createdAt);
const formattedDate = createdAtDate.toLocaleDateString(
"en-GB",
{
day: "2-digit",
month: "2-digit",
year: "2-digit",
}
);
const formattedDate = createdAtDate
.toLocaleDateString("en-Us", {
day: "numeric",
month: "long",
year: "numeric",
})
.replace(/\//g, "-");
return (
<Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
{formattedDate}

16
src/components/ResourcesPage/NewestEvents.jsx
View File

@@ -32,17 +32,18 @@ const tabsBtn = [
const NewestEvents = () => {
const [selectedTab, setSelectedTab] = useState(tabsBtn[0].btn);
const [selectedIndex, setSelectedIndex] = useState(0);
useEffect(() => {
const storedIndex = sessionStorage.getItem("selectedTabIndex");
if (storedIndex) {
setSelectedIndex(parseInt(storedIndex, 10));
// Retrieve the saved tab index from localStorage
const savedIndex = localStorage.getItem("selectedTabIndex");
if (savedIndex !== null) {
setSelectedTab(tabsBtn[parseInt(savedIndex, 10)].btn);
}
}, []);
const handleTabChange = (tab) => {
setSelectedIndex(tab);
setSelectedTab("setSelectedIndex", tab);
const handleTabChange = (index) => {
setSelectedTab(tabsBtn[index].btn);
localStorage.setItem("selectedTabIndex", index);
};
return (
@@ -74,6 +75,7 @@ const NewestEvents = () => {
<Tabs
variant="solid-rounded"
colorScheme="gray"
index={tabsBtn.findIndex((tab) => tab.btn === selectedTab)}
onChange={handleTabChange}
>
<TabList

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

@@ -6,6 +6,7 @@ import { useGetBlogQuery } from "../../../Redux/slice/blogsSlice";
import Loader from "../../Loader/Loader";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Link } from "react-router-dom";
const TabsArticles = () => {
const [currentPage, setCurrentPage] = useState(1);
@@ -55,52 +56,54 @@ const TabsArticles = () => {
>
{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",
},
}}
>
<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",
},
}}
/>
<Link to={`/articlePage/${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.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>
<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>
</Link>
</SwiperSlide>
))}
</Swiper>

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

@@ -167,7 +167,7 @@ const ArticlesTable = () => {
zIndex: "2",
}}
></Box>
<Link to={`/blogs/${content.title_slug}`}>
<Link to={`/articlePage/${content.title_slug}`}>
<Button
position={"relative"}
backgroundColor={"transparent"}

5
src/pages/Articles.jsx
View File

@@ -1,10 +1,13 @@
/* eslint-disable no-unused-vars */
import ArticleInternalPage from "../components/ArticleInternalPage/ArticleInternalPage";
import ArticlePage from "../components/ArticlePage/ArticlePage";
import Footer from "../components/Footer/Footer";
const Articles = () => {
return (
<>
<ArticleInternalPage />
{/* <ArticleInternalPage /> */}
<ArticlePage />
<Footer />
</>
);

85
src/routes/_routes.jsx
View File

@@ -37,6 +37,7 @@ import BlogPost from "../components/BlogPost/BlogPost";
import NewsInternal from "../pages/NewsInternal";
import Terms from "../pages/Terms";
import Policy from "../pages/Policy";
import ArticlePage from "../components/ArticlePage/ArticlePage";
export const route = [
{
@@ -124,6 +125,10 @@ export const route = [
path: "blogs/:title_slug",
element: <BlogPost />,
},
{
path: "articlePage/:title_slug",
element: <ArticlePage />,
},
{
path: "*",
element: <NotFound />,
@@ -144,84 +149,4 @@ export const route = [
path: "policy",
element: <Policy />,
},
// {
// path: "fin-tech",
// element: (
// <UseCase
// bannerHeading={"FinTech"}
// bannerSubHeading={
// "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
// }
// bannerImage={fintech}
// useCase={useCase}
// />
// ),
// },
// {
// path: "ad-tech",
// element: (
// <UseCase
// bannerHeading={"AdTech"}
// bannerSubHeading={
// "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
// }
// bannerImage={adTech}
// useCase={adTechContent}
// />
// ),
// },
// {
// path: "mar-tech",
// element: (
// <UseCase
// bannerHeading={"MarTech"}
// bannerSubHeading={
// "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
// }
// bannerImage={martech}
// useCase={marTechContent}
// />
// ),
// },
// {
// path: "health-tech",
// element: (
// <UseCase
// bannerHeading={"HealthTech"}
// bannerSubHeading={
// "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
// }
// bannerImage={healthTech}
// useCase={healthTechContent}
// />
// ),
// },
// {
// path: "identity-security",
// element: (
// <UseCase
// bannerHeading={"Identity and Security"}
// bannerSubHeading={
// "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
// }
// bannerImage={security}
// useCase={IdentitySecurityContent}
// />
// ),
// },
// {
// path: "telecom",
// element: (
// <UseCase
// bannerHeading={"Telecom"}
// bannerSubHeading={
// "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
// }
// bannerImage={tele}
// useCase={telecom}
// />
// ),
// },
];