tanami-admin-panel/src/Components/MobileView.jsx

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 { useParams } from "react-router-dom";

const MobileView = ({ isOpen, onClose, finalRef }) => {

  const [time, setTime] = useState(new Date());
  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={"30px"}
            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;