mirror of
https://github.com/WDI-Ideas/rubix.git
synced 2026-04-28 20:45:50 +00:00
Updating UseCases in NavBar for dynamic URL
This commit is contained in:
rockyeverlast
@@ -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>
|
||||
|
||||
@@ -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 />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user