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

Updating UseCases in NavBar for dynamic URL

Browse Source
This commit is contained in:
rockyeverlast
2024-05-14 15:48:56 +05:30
parent cddc9e3a16
commit f34798341b
7 changed files with 365 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Redux/slice/useCaseSlice.js Normal file
View File

@@ -0,0 +1,13 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const useCaseApi = createApi({
reducerPath: 'UseCases/:title_slug',
baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
endpoints: (builder) => ({
getUseCase: builder.query({
query: () => 'tech/active',
}),
}),
});
export const { useGetUseCaseQuery } = useCaseApi;

5
src/Redux/store/store.js
View File

@@ -9,6 +9,7 @@ import { buildPage } from '../slice/bannerSlice';
import { learnPageApi } from '../slice/learPageSlice';
import { homePageApi } from '../slice/homeSlice';
import { eventsViewApi } from '../slice/eventsViewSlice';
import { useCaseApi } from '../slice/useCaseSlice';
const store = configureStore({
reducer: {
@@ -22,6 +23,7 @@ const store = configureStore({
[learnPageApi.reducerPath]: learnPageApi.reducer,
[homePageApi.reducerPath]: homePageApi.reducer,
[eventsViewApi.reducerPath]: eventsViewApi.reducer,
[useCaseApi.reducerPath]: useCaseApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(
@@ -34,7 +36,8 @@ const store = configureStore({
buildPage.middleware,
learnPageApi.middleware,
homePageApi.middleware,
eventsViewApi.middleware
eventsViewApi.middleware,
useCaseApi.middleware
), // Add blogApi.middleware here
});

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

@@ -12,6 +12,7 @@ import {
PopoverCloseButton,
PopoverAnchor,
Button,
Text,
} from "@chakra-ui/react";
import { Outlet, Link, useLocation } from "react-router-dom";
import { useEffect, useState } from "react";
@@ -32,6 +33,7 @@ import marTech from "../../assets/images/Navicons/marTech.png";
import healthTech from "../../assets/images/Navicons/healthTech.png";
import security from "../../assets/images/Navicons/security.png";
import telecom from "../../assets/images/Navicons/telecom.png";
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
const NavBar = () => {
const [isScrolled, setIsScrolled] = useState(false);
@@ -40,6 +42,9 @@ const NavBar = () => {
const [isHoveredCases, setIsHoveredCases] = useState(false);
const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const { data } = useGetUseCaseQuery();
console.log(data);
const useCase = data?.data?.rows;
const location = useLocation();
const linkStyle = {
@@ -509,135 +514,29 @@ const NavBar = () => {
justifyContent={"space-between"}
>
<PopoverBody width={"45%"}>
<Link
to="/fin-tech"
className="link"
style={
location.pathname === "/fin-tech"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
{useCase?.map((slug) => (
<Link
key={slug.id}
to={`UseCases/${slug.title_slug}`}
className="link"
style={
location.pathname ===
`UseCases/${slug.title_slug}`
? highlight
: normal
}
>
<Image src={fintechIcon} width={`${iconwidth}`} />
FinTech
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/ad-tech"
className="link"
style={
location.pathname === "/ad-tech"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={adTech} width={`${iconwidth}`} />
AdTech
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/mar-tech"
className="link"
style={
location.pathname === "/mar-tech"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={marTech} width={`${iconwidth}`} />
MarTech
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/health-tech"
className="link"
style={
location.pathname === "/health-tech"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={healthTech} width={`${iconwidth}`} />
HealthTech
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/identity-security"
className="link"
style={
location.pathname === "/identity-security"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={security} width={`${iconwidth}`} />
Identity and Security
</Box>
</Link>
</PopoverBody>
<PopoverBody width={"45%"}>
<Link
to="/Telecom"
className="link"
style={
location.pathname === "/Telecom"
? highlight
: normal
}
>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={telecom} width={`${iconwidth}`} />
Telecom
</Box>
</Link>
<Box
display={"flex"}
alignItems={"center"}
gap={"1rem"}
marginBottom={"1rem"}
>
<Image src={fintechIcon} width={`${iconwidth}`} />
<Text>{`${slug.title}`}</Text>
</Box>
</Link>
))}
</PopoverBody>
</Box>
</PopoverContent>
@@ -779,13 +678,11 @@ const NavBar = () => {
<PopoverBody>
<Link
to="/"
to="/events"
className="link"
// style={
// location.pathname === "/LearnPage"
// ? highlight
// : normal
// }
style={
location.pathname === "/events" ? highlight : normal
}
>
<Box
display={"flex"}
@@ -794,7 +691,7 @@ const NavBar = () => {
marginBottom={"1rem"}
>
<Image src={subnetsIcon} width={`${iconwidth}`} />
HealthTech
Events
</Box>
</Link>
</PopoverBody>

434
src/components/UseCase/UseCase.jsx
View File

@@ -7,94 +7,116 @@ import { Box, Button, Image, Text } from "@chakra-ui/react";
import pdf from "../../assets/pdf/Rubix.pdf";
import cardimg from "../../assets/images/CardImg.png";
import img from "../../assets/images/pdfscreen.png";
import { useParams } from "react-router-dom";
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
import Loader from "../Loader/Loader";
import NotFound from "../../pages/NotFound";
// eslint-disable-next-line react/prop-types
const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
const { title_slug } = useParams();
const { data, error, isLoading } = useGetUseCaseQuery();
const useCases = data?.data?.rows;
console.log(data?.data?.rows);
useEffect(() => {
window.scrollTo(0, 0);
}, []);
if (isLoading) {
return (
<div>
<Loader />
</div>
);
}
const matchingUseCase = useCases
? useCases.find((item) => item.title_slug === title_slug)
: null;
console.log(matchingUseCase);
return (
<div>
<Box
height={"75vh"}
width={"100%"}
backgroundImage={`url(${bannerImage})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
position="relative"
backgroundPosition={"center"}
sx={{
"@media (max-width: 600px)": {
height: "400px",
},
}}
>
<Box
position="absolute"
top={0}
left={0}
width="100%"
height="100%"
backgroundColor="rgba(0, 0, 0, 0.8)"
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
flexDirection={"column"}
>
<>
{matchingUseCase ? (
<div key={matchingUseCase.id}>
<Box
w={"50vw"}
height={"75vh"}
width={"100%"}
backgroundImage={`url(https://rubix.betadelivery.com/${matchingUseCase.bannerImage})`}
backgroundRepeat={"no-repeat"}
backgroundSize={"cover"}
position="relative"
backgroundPosition={"center"}
sx={{
"@media (max-width: 600px)": {
width: "100vw",
padding: "2rem",
height: "400px",
},
}}
>
<Text
textAlign={"center"}
className="rubix-fw-700"
fontSize={"40px"}
fontFamily={"Mona Sans"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "30px",
},
}}
<Box
position="absolute"
top={0}
left={0}
width="100%"
height="100%"
backgroundColor="rgba(0, 0, 0, 0.8)"
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
flexDirection={"column"}
>
{bannerHeading}
</Text>
<Text
textAlign={"center"}
className="rubix-fw-500"
fontSize={"20px"}
fontFamily={"Poppins"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{bannerSubHeading}
</Text>
<Box
w={"50vw"}
sx={{
"@media (max-width: 600px)": {
width: "100vw",
padding: "2rem",
},
}}
>
<Text
textAlign={"center"}
className="rubix-fw-700"
fontSize={"40px"}
fontFamily={"Mona Sans"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "30px",
},
}}
>
{matchingUseCase.title}
</Text>
<Text
textAlign={"center"}
className="rubix-fw-500"
fontSize={"20px"}
fontFamily={"Poppins"}
color={"#fff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{matchingUseCase.meta_description}
</Text>
</Box>
</Box>
</Box>
</Box>
</Box>
<Box
p={5}
pb={14}
backgroundColor={"#000000"}
display={"flex"}
justifyContent={"center"}
flexDirection={"column"}
alignItems={"center"}
gap={12}
w={"100%"}
>
{useCase.map(
({ useCaseHeading, useCaseSubHeading, useCaseDetails }) => (
<Box
p={5}
pb={14}
backgroundColor={"#000000"}
display={"flex"}
justifyContent={"center"}
flexDirection={"column"}
alignItems={"center"}
gap={12}
w={"100%"}
>
<Box
display={"flex"}
justifyContent={"center"}
@@ -129,7 +151,7 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
},
}}
>
{useCaseHeading}
{matchingUseCase.problem}
</Text>
<Text
textColor={"#ffffff"}
@@ -140,159 +162,159 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
},
}}
>
{useCaseSubHeading}
{matchingUseCase.solution}
</Text>
</Box>
{useCaseDetails?.map(({ title, description }) => (
<Box
width={"75vw"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
<Text
style={{ marginBottom: 6 }}
className="rubix-fw-500"
fontSize="2xl"
textColor={"#ffffff"}
sx={{
"@media (max-width: 600px)": {
fontSize: "16px",
},
}}
>
{title}
</Text>
<Text
textColor={"#ffffff"}
fontSize="lg"
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
>
{description}
</Text>
</Box>
))}
</Box>
)
)}
<Box width={"85vw"}>
{useCase.map((item) => (
<>
{item.documents ? (
<Box
width={"75vw"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
},
}}
>
<Text
style={{ marginBottom: 6 }}
className="rubix-fw-500"
fontSize="3xl"
fontSize="2xl"
textColor={"#ffffff"}
marginBottom={"3rem"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
textAlign: "center",
fontSize: "16px",
},
}}
>
Use Cases
{matchingUseCase.problem}
</Text>
) : (
""
)}
</>
))}
{useCase.map(({ documents }) => (
<Box
display={"flex"}
flexWrap={"wrap"}
justifyContent={"left"}
gap={"1.2rem"}
width={"100%"}
sx={{
"@media (max-width: 1024px)": {
justifyContent: "space-around",
},
}}
>
{documents?.map((item) => (
<Box marginBottom={"2rem"} key={item.id}>
<Box
width={"275px"}
background={"#15181E"}
borderRadius={"10px"}
minHeight={"360px"}
padding={"15px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
minHeight: "0",
},
}}
>
<Image src={img} />
<Box paddingTop={"2rem"}>
<Text
color={"#fff"}
fontSize={"18px"}
marginBottom={"20px"}
minHeight={"85px"}
maxWidth={"420px"}
>
{item.title}
</Text>
<Text
textColor={"#ffffff"}
fontSize="lg"
sx={{
"@media (max-width: 600px)": {
fontSize: "14px",
},
}}
>
{matchingUseCase.solution}
</Text>
</Box>
</Box>
{/* <Box width={"85vw"}>
{useCase.map((item) => (
<>
{item.documents ? (
<Text
className="rubix-fw-500"
fontSize="3xl"
textColor={"#ffffff"}
marginBottom={"3rem"}
sx={{
"@media (max-width: 600px)": {
fontSize: "22px",
textAlign: "center",
},
}}
>
Use Cases
</Text>
) : (
""
)}
</>
))}
{useCase.map(({ documents }) => (
<Box
display={"flex"}
flexWrap={"wrap"}
justifyContent={"left"}
gap={"1.2rem"}
width={"100%"}
sx={{
"@media (max-width: 1024px)": {
justifyContent: "space-around",
},
}}
>
{documents?.map((item) => (
<Box marginBottom={"2rem"} key={item.id}>
<Box
display={"flex"}
alignItems={"center"}
_hover={
{
// flexDirection: "column-reverse",
}
}
>
<Box
position={"relative"}
width={"10%"}
_before={{
content: '""',
width={"275px"}
background={"#15181E"}
borderRadius={"10px"}
minHeight={"360px"}
padding={"15px"}
sx={{
"@media (max-width: 600px)": {
width: "100%",
position: "absolute",
left: "0",
borderBottom: "2px solid #DE858E",
borderRadius: "5px",
zIndex: "2",
}}
></Box>
{
<a download={item.name} href={item.link}>
<Button
minHeight: "0",
},
}}
>
<Image src={img} />
<Box paddingTop={"2rem"}>
<Text
color={"#fff"}
fontSize={"18px"}
marginBottom={"20px"}
minHeight={"85px"}
maxWidth={"420px"}
>
{item.title}
</Text>
<Box
display={"flex"}
alignItems={"center"}
_hover={
{
// flexDirection: "column-reverse",
}
}
>
<Box
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
width={"10%"}
_before={{
content: '""',
width: "100%",
position: "absolute",
left: "0",
borderBottom: "2px solid #DE858E",
borderRadius: "5px",
zIndex: "2",
}}
>
Download
</Button>
</a>
}
></Box>
{
<a download={item.name} href={item.link}>
<Button
position={"relative"}
backgroundColor={"transparent"}
color={"#fff"}
fontFamily={"Poppins"}
fontWeight={"400"}
_hover={{
backgroundColor: "transparent",
}}
>
Download
</Button>
</a>
}
</Box>
</Box>
</Box>
</Box>
</Box>
))}
</Box>
))}
</Box>
))}
</Box>
</Box>
</div>
</Box> */}
</Box>
</div>
) : (
<NotFound />
)}
</>
);
};

4
src/pages/NewsPage.jsx
View File

@@ -1,7 +1,11 @@
import { useEffect } from "react";
import NewsContent from "../components/NewsPage/NewsContent";
import NewsHeader from "../components/NewsPage/NewsHeader";
const NewsPage = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<>
<NewsHeader />

5
src/pages/UseCases.jsx
View File

@@ -14,12 +14,13 @@ const UseCases = ({
}, []);
return (
<>
<UseCase
<UseCase />
{/* <UseCase
bannerHeading={bannerHeading}
bannerSubHeading={bannerSubHeading}
bannerImage={bannerImage}
useCase={useCase}
/>
/> */}
</>
);
};

159
src/routes/_routes.jsx
View File

@@ -25,7 +25,6 @@ import security from "../assets/images/i&security-bg.png";
import tele from "../assets/images/Telecom-bg.png";
import healthTech from "../assets/images/health-tech.png";
import Form from "../components/Contact/Form";
import UseCase from "../components/UseCase/UseCase";
import ResourcesPage from "../pages/ResourcesPage";
import VideoInternal from "../components/VideoInternal/VideoInternal";
import Ecosystem from "../pages/Ecosystem";
@@ -116,84 +115,88 @@ export const route = [
path: "*",
element: <NotFound />,
},
{
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: "UseCases/:title_slug",
element: <UseCases />,
},
{
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}
/>
),
},
// {
// 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}
// />
// ),
// },
];