rubix/src/components/Footer/MobileFooter.jsx

/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unescaped-entities */
import {
  Box,
  Button,
  Container,
  Flex,
  Image,
  Input,
  List,
  ListItem,
  Text,
  UnorderedList,
} from "@chakra-ui/react";
import { useMediaQuery } from "@chakra-ui/react";
import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  FormHelperText,
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
} from "@chakra-ui/react";
import logo from "../../assets/images/rubix.png";
import x from "../../assets/images/x.png";
import linked from "../../assets/images/linked.png";
import github from "../../assets/images/github.png";
import tele from "../../assets/images/tele.png";
import reddit from "../../assets/images/reddit.png";
import fb from "../../assets/images/fb.png";
import discord from "../../assets/images/discord.png";
import { Link } from "react-router-dom";
import { AddIcon, MinusIcon } from "@chakra-ui/icons";
import { useEffect, useState } from "react";

const MobileFooter = () => {
  return (
    <Box backgroundColor={"#000"}>
      <Accordion allowToggle>
        <AccordionItem>
          {({ isExpanded }) => (
            <>
              <h2>
                <AccordionButton>
                  <Box as="span" flex="1" textAlign="left">
                    <Text
                      color={"#B0B0B0"}
                      fontFamily={"Mona Sans"}
                      fontWeight={"500"}
                      fontSize={"16px"}
                    >
                      Explore
                    </Text>
                  </Box>
                  {isExpanded ? (
                    <MinusIcon fontSize="12px" color={"#fff"} />
                  ) : (
                    <AddIcon fontSize="12px" color={"#fff"} />
                  )}
                </AccordionButton>
              </h2>
              <AccordionPanel pb={4}>
                <UnorderedList
                  listStyleType={"none"}
                  color={"#B0B0B0"}
                  fontFamily={"Poppins"}
                  fontWeight={"400"}
                  marginLeft={"0px !important"}
                >
                  <Link to="/LearnPage">
                    <ListItem marginBottom={"1rem"}>Learn</ListItem>
                  </Link>

                  <Link to="/community">
                    <ListItem marginBottom={"1rem"}>Community</ListItem>
                  </Link>

                  <ListItem marginBottom={"1rem"}>Wallet</ListItem>
                  <ListItem marginBottom={"1rem"}>Careers</ListItem>
                </UnorderedList>
              </AccordionPanel>
            </>
          )}
        </AccordionItem>
        <AccordionItem>
          {({ isExpanded }) => (
            <>
              <h2>
                <AccordionButton>
                  <Box as="span" flex="1" textAlign="left">
                    <Text
                      color={"#B0B0B0"}
                      fontFamily={"Mona Sans"}
                      fontWeight={"500"}
                      fontSize={"16px"}
                    >
                      Social
                    </Text>
                  </Box>
                  {isExpanded ? (
                    <MinusIcon fontSize="12px" color={"#fff"} />
                  ) : (
                    <AddIcon fontSize="12px" color={"#fff"} />
                  )}
                </AccordionButton>
              </h2>
              <AccordionPanel pb={4}>
                <UnorderedList
                  listStyle={"none"}
                  listStyleType={"none"}
                  color={"#B0B0B0"}
                  fontFamily={"Poppins"}
                  fontWeight={"400"}
                  marginLeft={"0px !important"}
                >
                  <ListItem
                    marginBottom={"1rem"}
                    display={"flex"}
                    alignItems={"center"}
                    gap={"10px"}
                  >
                    <Image src={tele} />
                    telegram
                  </ListItem>
                  <ListItem
                    marginBottom={"1rem"}
                    display={"flex"}
                    alignItems={"center"}
                    gap={"10px"}
                  >
                    <Image src={x} />
                    Twitter
                  </ListItem>
                  <ListItem
                    marginBottom={"1rem"}
                    display={"flex"}
                    alignItems={"center"}
                    gap={"10px"}
                  >
                    <Image src={github} />
                    GitHub
                  </ListItem>
                  <ListItem
                    marginBottom={"1rem"}
                    display={"flex"}
                    alignItems={"center"}
                    gap={"10px"}
                  >
                    <Image src={discord} />
                    Discord
                  </ListItem>
                </UnorderedList>
              </AccordionPanel>
            </>
          )}
        </AccordionItem>
      </Accordion>
      <Box backgroundColor={"#101015"}>
        <Container
          maxW="container.xl"
          padding={"4rem"}
          display={"flex"}
          alignItems={"center"}
          gap={"2rem"}
          sx={{
            "@media (max-width: 1024px)": {},
            "@media (max-width: 600px)": {
              flexDirection: "column",
              alignItems: "flex-start",
              padding: "1rem",
            },
          }}
        >
          <Image src={logo} width={"100px"} paddingBottom={"5px"} />

          <Text
            color={"#fff"}
            fontFamily={"Poppins"}
            fontSize={"15px"}
            fontWeight={"400"}
          >
            All rights reserved.
          </Text>
          <Text
            color={"#fff"}
            fontFamily={"Poppins"}
            fontSize={"15px"}
            fontWeight={"400"}
          >
            Privacy Policy
          </Text>
          <Text
            color={"#fff"}
            fontFamily={"Poppins"}
            fontSize={"15px"}
            fontWeight={"400"}
          >
            Terms Conditions
          </Text>
        </Container>
      </Box>
    </Box>
  );
};

export default MobileFooter;