investor details
This commit is contained in:
YasinShaikh123
@@ -24,11 +24,11 @@ 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 { useParams } from "react-router-dom";
|
||||
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;
|
||||
|
||||
@@ -39,8 +39,6 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
|
||||
} = useGetIOByIdQuery(id, { skip: !id });
|
||||
|
||||
console.log(data);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
@@ -51,223 +49,332 @@ const MobileView = ({ isOpen, onClose, finalRef }) => {
|
||||
}, []);
|
||||
|
||||
const formatTime = (date) => {
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
|
||||
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"}
|
||||
/>
|
||||
<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
|
||||
backgroundColor={"#fff"}
|
||||
h={"98%"}
|
||||
w={'96%'}
|
||||
// m={2}
|
||||
borderRadius={"47px"}
|
||||
pt={"30px"}
|
||||
px={"15px"}
|
||||
as="span"
|
||||
boxShadow={"none"}
|
||||
position={"relative"}
|
||||
display={"flex"}
|
||||
justifyContent={"center"}
|
||||
h={"600px"}
|
||||
w={"330px"}
|
||||
>
|
||||
<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>
|
||||
<Image
|
||||
h={"100%"}
|
||||
w={"100%"}
|
||||
src={Mobile}
|
||||
position={"absolute"}
|
||||
top={"0"}
|
||||
left={"0"}
|
||||
/>
|
||||
<Box
|
||||
p={"10px"}
|
||||
overflowY={"scroll"}
|
||||
h={"483px"}
|
||||
zIndex={"99"}
|
||||
position={"relative"}
|
||||
borderBottomLeftRadius={"23px"}
|
||||
borderBottomRightRadius={"23px"}
|
||||
backgroundColor={"#fff"}
|
||||
h={"98%"}
|
||||
w={"96%"}
|
||||
// m={2}
|
||||
borderRadius={"47px"}
|
||||
pt={"36px"}
|
||||
px={"15px"}
|
||||
>
|
||||
<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>
|
||||
<Box>
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
position={"absolute"}
|
||||
left={"30px"}
|
||||
top={"18px"}
|
||||
>
|
||||
<Text ml={1} mb={0}>
|
||||
<GiNetworkBars fontSize={"10px"} />
|
||||
</Text>
|
||||
<Image
|
||||
borderTopLeftRadius={"20px"}
|
||||
borderTopRightRadius={"20px"}
|
||||
h={"130px"}
|
||||
w={"100%"}
|
||||
src={mobileBanner}
|
||||
/>
|
||||
<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>
|
||||
<Stack mt="3" bg={"#fff"} py={4} px={4}>
|
||||
<Text
|
||||
fontSize={"sm"}
|
||||
fontWeight={"500"}
|
||||
color={"#000"}
|
||||
mb={0}
|
||||
>
|
||||
Guinevere Gates
|
||||
<Box
|
||||
display={"flex"}
|
||||
alignItems={"center"}
|
||||
position={"absolute"}
|
||||
right={"36px"}
|
||||
top={"17px"}
|
||||
>
|
||||
<Text mb={0}>
|
||||
<BiWifi fontSize={"14px"} />
|
||||
</Text>
|
||||
<Heading fontSize="16px" color={"#004717"}>
|
||||
BHD 46,258
|
||||
<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>
|
||||
<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" />
|
||||
<Box display={"flex"} alignItems={"center"}>
|
||||
<Image
|
||||
width={"30px"}
|
||||
me={2}
|
||||
src="https://tanami.betadelivery.com/public/icons/icon3.svg"
|
||||
/>
|
||||
<Text fontSize={"xs"} mb={0}>
|
||||
Merrill Rocha
|
||||
Sit sunt consequunt Dolores minim suscip
|
||||
</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
|
||||
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>
|
||||
|
||||
<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
|
||||
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>
|
||||
</Box>
|
||||
</HStack>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</HStack>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user