382 lines
12 KiB
JavaScript
382 lines
12 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
Heading,
|
|
HStack,
|
|
Image,
|
|
Modal,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
Progress,
|
|
Stack,
|
|
Text,
|
|
} from "@chakra-ui/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import Mobile from "../assets/mobileWing.png";
|
|
import mobileBanner from "../assets/welcome.avif";
|
|
import { GrDownload } from "react-icons/gr";
|
|
import { LuClock } from "react-icons/lu";
|
|
import { GiNetworkBars } from "react-icons/gi";
|
|
import { GrLinkedinOption } from "react-icons/gr";
|
|
import { FiInstagram } from "react-icons/fi";
|
|
import { IoBatteryHalf } from "react-icons/io5";
|
|
import { BiWifi } from "react-icons/bi";
|
|
import { useGetIOByIdQuery } from "../Services/io.service";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
const MobileView = ({ isOpen, onClose, finalRef }) => {
|
|
const [time, setTime] = useState(new Date());
|
|
const navigate = useNavigate();
|
|
const params = useParams();
|
|
const id = params?.id;
|
|
|
|
const {
|
|
data,
|
|
isLoading: IObyIDisLoading,
|
|
error: IObyIDerror,
|
|
} = useGetIOByIdQuery(id, { skip: !id });
|
|
|
|
console.log(data);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setTime(new Date());
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const formatTime = (date) => {
|
|
return date.toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
display={"flex"}
|
|
size={"xl"}
|
|
justifyContent={"center"}
|
|
isCentered
|
|
finalFocusRef={finalRef}
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
>
|
|
<ModalOverlay
|
|
backdropFilter="blur(5px)" // Add this line for backdrop blur
|
|
bg="rgba(0, 0, 0, 0.4)" // Optional: Adjust the overlay color and opacity
|
|
/>
|
|
<ModalContent backgroundColor={"transparent"} shadow={"none"}>
|
|
<HStack w={"100"} display={"flex"} justify={"center"}>
|
|
<Box
|
|
as="span"
|
|
boxShadow={"none"}
|
|
position={"relative"}
|
|
display={"flex"}
|
|
justifyContent={"center"}
|
|
h={"600px"}
|
|
w={"330px"}
|
|
>
|
|
<Image
|
|
h={"100%"}
|
|
w={"100%"}
|
|
src={Mobile}
|
|
position={"absolute"}
|
|
top={"0"}
|
|
left={"0"}
|
|
/>
|
|
<Box
|
|
backgroundColor={"#fff"}
|
|
h={"98%"}
|
|
w={"96%"}
|
|
// m={2}
|
|
borderRadius={"47px"}
|
|
pt={"36px"}
|
|
px={"15px"}
|
|
>
|
|
<Box>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
position={"absolute"}
|
|
left={"30px"}
|
|
top={"18px"}
|
|
>
|
|
<Text ml={1} mb={0}>
|
|
<GiNetworkBars fontSize={"10px"} />
|
|
</Text>
|
|
<Text ml={1} mb={0} fontSize={"10px"}>
|
|
{formatTime(time)}
|
|
</Text>
|
|
<Text ml={"5px"} mb={0}>
|
|
<GrLinkedinOption fontSize={"10px"} />
|
|
</Text>
|
|
{/* <Text ml={1} mb={0}><FiInstagram fontSize={"10px"} /></Text> */}
|
|
</Box>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
position={"absolute"}
|
|
right={"36px"}
|
|
top={"17px"}
|
|
>
|
|
<Text mb={0}>
|
|
<BiWifi fontSize={"14px"} />
|
|
</Text>
|
|
<Text ml={1} mb={0}>
|
|
<IoBatteryHalf fontSize={"15px"} />
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
p={"10px"}
|
|
overflowY={"scroll"}
|
|
h={"483px"}
|
|
zIndex={"99"}
|
|
position={"relative"}
|
|
borderBottomLeftRadius={"23px"}
|
|
borderBottomRightRadius={"23px"}
|
|
>
|
|
<Box
|
|
mb={4}
|
|
bg={"#f5f8f6"}
|
|
borderRadius={"20px"}
|
|
boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
|
|
>
|
|
<Box position={"relative"}>
|
|
<Text
|
|
position={"absolute"}
|
|
top={"12px"}
|
|
left={"10px"}
|
|
backgroundColor={"#e4f6ea"}
|
|
fontSize={"10px"}
|
|
fontWeight={500}
|
|
color="green"
|
|
p={"7px 12px"}
|
|
borderRadius={"20px"}
|
|
>
|
|
Stock
|
|
</Text>
|
|
<Text
|
|
position={"absolute"}
|
|
top={"12px"}
|
|
right={"10px"}
|
|
fontSize={"10px"}
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
fontWeight={500}
|
|
backgroundColor={"#fff"}
|
|
p={"7px 12px"}
|
|
borderRadius={"20px"}
|
|
>
|
|
<LuClock color="#d8804e" />{" "}
|
|
<Text mb={0} ml={1}>
|
|
Closing Date Aug 23 2024
|
|
</Text>
|
|
</Text>
|
|
<Image
|
|
borderTopLeftRadius={"20px"}
|
|
borderTopRightRadius={"20px"}
|
|
h={"130px"}
|
|
w={"100%"}
|
|
src={mobileBanner}
|
|
/>
|
|
</Box>
|
|
<Stack mt="3" bg={"#fff"} py={4} px={4}>
|
|
<Text
|
|
fontSize={"sm"}
|
|
fontWeight={"500"}
|
|
color={"#000"}
|
|
mb={0}
|
|
>
|
|
Guinevere Gates
|
|
</Text>
|
|
<Heading fontSize="16px" color={"#004717"}>
|
|
BHD 46,258
|
|
</Heading>
|
|
<Progress
|
|
colorScheme="green"
|
|
size="sm"
|
|
value={20}
|
|
borderRadius={"3px"}
|
|
/>
|
|
<Text
|
|
color={"#4e4e4e"}
|
|
fontSize={"xs"}
|
|
fontWeight={600}
|
|
mb={0}
|
|
>
|
|
0.0% funded
|
|
</Text>
|
|
<Text
|
|
fontSize={"xs"}
|
|
fontWeight={500}
|
|
mb={0}
|
|
color={"#9d9d9d"}
|
|
>
|
|
fugit eligendi dolore dolore et
|
|
</Text>
|
|
</Stack>
|
|
<Box py={4} px={4}>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text
|
|
fontSize={"10px"}
|
|
mb={1}
|
|
fontWeight={600}
|
|
color={"#616161"}
|
|
>
|
|
Sponsor name:
|
|
</Text>
|
|
<Text fontSize={"10px"} mb={1} fontWeight={600}>
|
|
Scott Simon
|
|
</Text>
|
|
</Box>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text
|
|
fontSize={"10px"}
|
|
mb={1}
|
|
fontWeight={600}
|
|
color={"#616161"}
|
|
>
|
|
Estimated return:
|
|
</Text>
|
|
<Text fontSize={"10px"} mb={1} fontWeight={600}>
|
|
A provident veniam
|
|
</Text>
|
|
</Box>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text
|
|
fontSize={"10px"}
|
|
mb={1}
|
|
fontWeight={600}
|
|
color={"#616161"}
|
|
>
|
|
Hoiding period:
|
|
</Text>
|
|
<Text fontSize={"10px"} mb={1} fontWeight={600}>
|
|
Eius eiusmod exericit
|
|
</Text>
|
|
</Box>
|
|
<Box display={"flex"} justifyContent={"space-between"}>
|
|
<Text
|
|
fontSize={"10px"}
|
|
mb={1}
|
|
fontWeight={600}
|
|
color={"#616161"}
|
|
>
|
|
Minimum investment:
|
|
</Text>
|
|
<Text fontSize={"10px"} mb={1} fontWeight={600}>
|
|
BHD 1
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
mb={4}
|
|
p={5}
|
|
bg={"#f5f8f6"}
|
|
borderRadius={"20px"}
|
|
boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
|
|
>
|
|
<Heading fontSize="14px" fontWeight={600}>
|
|
Key Merits
|
|
</Heading>
|
|
<Box display={"flex"} alignItems={"center"}>
|
|
<Image
|
|
width={"30px"}
|
|
me={2}
|
|
src="https://tanami.betadelivery.com/public/icons/icon3.svg"
|
|
/>
|
|
<Text fontSize={"xs"} mb={0}>
|
|
Sit sunt consequunt Dolores minim suscip
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
mb={4}
|
|
p={5}
|
|
borderRadius={"20px"}
|
|
boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
|
|
>
|
|
<Heading fontSize="14px" fontWeight={600}>
|
|
Investment Documents
|
|
</Heading>
|
|
<Box bg={"#f5f8f6"} w={"150px"} p={3} borderRadius={"10px"}>
|
|
<Box display={"flex"} alignItems={"center"} mb={2}>
|
|
<Image
|
|
me={1}
|
|
src="https://tanami.betadelivery.com/public/icons/icon8.svg"
|
|
/>
|
|
<Text fontSize={"xs"} mb={0}>
|
|
Merrill Rocha
|
|
</Text>
|
|
</Box>
|
|
<Box
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
justifyContent={"space-between"}
|
|
>
|
|
<Text mb={0} fontSize={"sm"}>
|
|
0.03 mb
|
|
</Text>
|
|
<GrDownload fontSize={"15px"} />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
mb={4}
|
|
p={4}
|
|
borderRadius={"20px"}
|
|
boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
|
|
>
|
|
<Heading fontSize="14px" fontWeight={600}>
|
|
Videos
|
|
</Heading>
|
|
<video autoPlay style={{ borderRadius: "18px" }}>
|
|
<source
|
|
src="https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"
|
|
type="video/mp4"
|
|
style={{ height: "200px" }}
|
|
/>
|
|
</video>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
position={"relative"}
|
|
p={4}
|
|
background={"#fff"}
|
|
padding={"24px"}
|
|
paddingBottom={"3px"}
|
|
borderBottomLeftRadius={"30px"}
|
|
borderBottomRightRadius="30px"
|
|
>
|
|
<Button
|
|
margin={"auto"}
|
|
width={"85%"}
|
|
bottom="10px"
|
|
left="0"
|
|
colorScheme="forestGreen"
|
|
mr={3}
|
|
w={"100%"}
|
|
fontWeight={500}
|
|
borderRadius={"20px"}
|
|
>
|
|
Invest
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</HStack>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default MobileView;
|