From a4dd07af11227e96aa4f5c8c3bfc3893e6a8e32e Mon Sep 17 00:00:00 2001
From: john <john@mx.com>
Date: Wed, 11 May 2022 04:30:22 +0700
Subject: [PATCH] add BottomNav control

---
 package.json                      |   1 +
 src/components/BottomNav.js       |  24 ++++--
 src/components/Carousel.js        |   1 -
 src/components/ChakraBottomNav.js | 121 ++++++++++++++++++++++++++++++
 src/components/Layout.js          |   6 +-
 src/components/Logo.js            |   3 +-
 src/components/NumCard.js         |   2 +-
 src/components/Panel.js           |   2 +-
 src/components/Placeholder.js     |  11 +++
 src/components/SideBar.js         |   2 +-
 src/components/index.js           |   2 +
 src/hooks/useLocalStorage.js      |   2 +-
 src/index.js                      |   1 -
 13 files changed, 164 insertions(+), 14 deletions(-)
 create mode 100644 src/components/ChakraBottomNav.js
 create mode 100644 src/components/Placeholder.js

diff --git a/package.json b/package.json
index 7b53576..2b6b52f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "axios": "^0.27.2",
     "framer-motion": "^4.1.17",
     "i18next": "^21.8.0",
+    "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-i18next": "^11.16.9",
diff --git a/src/components/BottomNav.js b/src/components/BottomNav.js
index 8bda1c7..1f087ee 100644
--- a/src/components/BottomNav.js
+++ b/src/components/BottomNav.js
@@ -1,11 +1,25 @@
-import React from "react"
-import { Stack } from "@chakra-ui/react"
+import { ChakraBottomNav, ChakraBottomNavItem } from './ChakraBottomNav'
+import { FiHome, FiTrendingUp } from 'react-icons/fi'
+import { useTranslation } from 'react-i18next'
 
-export const BottomNav = () => {
+export const BottomNav = (props) => {
+    const { t } = useTranslation()
 
     return (
-        <Stack>
+        <ChakraBottomNav {...props}>
+            <ChakraBottomNavItem
+                icon={FiHome}
+                text={t('home')}
+                navPath="/home"
+                index="1"
+            />
 
-        </Stack>
+            <ChakraBottomNavItem
+                icon={FiTrendingUp}
+                text={t('farm')}
+                navPath="/farm"
+                index="2"
+            />
+        </ChakraBottomNav>
     )
 }
\ No newline at end of file
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
index 068e42a..29b9b65 100644
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -1,6 +1,5 @@
 import {
     Box,
-    useBreakpointValue,
     useColorModeValue,
     Stack,
     Container,
diff --git a/src/components/ChakraBottomNav.js b/src/components/ChakraBottomNav.js
new file mode 100644
index 0000000..f20034b
--- /dev/null
+++ b/src/components/ChakraBottomNav.js
@@ -0,0 +1,121 @@
+import React from "react"
+import { Text, Icon, Stack, useColorModeValue } from "@chakra-ui/react"
+import { Placeholder } from "./Placeholder"
+import { PropTypes } from 'prop-types'
+import { useNavigate } from "react-router-dom"
+
+const BottomNavContext = React.createContext([])
+
+const BottomNavProvider = ({ children }) => {
+    const [active, setActive] = React.useState(0)
+
+    return (
+        <BottomNavContext.Provider value={{
+            active,
+            setActive,
+        }}>
+            {children}
+        </BottomNavContext.Provider>
+    )
+}
+
+export const ChakraBottomNavItem = ({ index, icon, text,
+    bgNormal = null, bgHover = null, bgActive = null, navPath = "", onClick = null, ...rest }) => {
+
+    const ctx = React.useContext(BottomNavContext)
+
+    const _normal = useColorModeValue('white', 'gray.700')
+    const _bgNormal = bgNormal || _normal
+    const _hover = useColorModeValue('blue.100', 'gray.100')
+    const _bgHover = bgHover || _hover
+    const _active = useColorModeValue('blue.300', 'gray.300')
+    const _bgActive = bgActive || _active
+
+    const [bg, setBg] = React.useState(_bgNormal)
+    const navigateTo = useNavigate()
+
+    const onClickThis = () => {
+        setBg(_bgActive)
+        ctx.setActive(index)
+        navPath && navigateTo(navPath)
+        onClick && onClick()
+    }
+
+    const onHover = () => {
+        setBg(_bgHover)
+    }
+
+    const onLeave = () => {
+        setBg(_bgNormal)
+    }
+
+    const actived = () => ctx.active === index
+
+    return (
+        <Stack
+            direction="column"
+            p="4"
+            bg={actived() ? _bgActive : bg}
+            fontFamily="monospace"
+            fontSize="18"
+            fontWeight="700"
+            color={actived() ? 'white' : 'black'}
+            flex="1"
+            cursor="pointer"
+            align="center"
+            justify="center"
+            onClick={onClickThis}
+            onMouseEnter={onHover}
+            onMouseLeave={onLeave}
+            {...rest}
+
+        >
+            <Icon as={icon} />
+            <Text
+            >
+                {text}
+            </Text>
+        </Stack>
+    )
+}
+
+ChakraBottomNavItem.propTypes = {
+    index: PropTypes.string.isRequired,
+}
+
+const BottomNavImpl = ({ children, ...rest }) => {
+
+    const bg = useColorModeValue('white', 'gray.700')
+
+    return (
+        <Stack
+            w="full"
+            position="fixed"
+            bottom="0"
+            left="0"
+            direction="row"
+            justify="space-around"
+            align="center"
+            bg={bg}
+            borderTop="1px"
+            borderColor="gray.200"
+            boxShadow="lg"
+            {...rest}
+        >
+            {children}
+        </Stack>
+    )
+}
+
+export const ChakraBottomNav = (props) => {
+
+    return (
+        <>
+            {/* TODO: I didnt use `useDimensions` here, caz it would waste my time to adjust it.  */}
+            <Placeholder h="20" display={props.display || 'relative'} />
+            <BottomNavProvider>
+                <BottomNavImpl {...props} />
+            </BottomNavProvider>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 153d7c4..2faea59 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -5,12 +5,14 @@ import {
 import React from 'react'
 import { SideBar } from './SideBar'
 import { AppBar } from './AppBar'
+import { BottomNav } from './BottomNav'
 
 /**
  * This component was not composed for more widely using but just for this project.
  */
 export const Layout = ({ children }) => {
     const { isOpen: isDrawerOpening, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
+
     const bg = useColorModeValue('gray.100', 'gray.900')
 
     return (
@@ -34,7 +36,6 @@ export const Layout = ({ children }) => {
                 <DrawerContent>
                     <SideBar onCloseDrawer={onCloseDrawer} />
                 </DrawerContent>
-
             </Drawer>
 
             <AppBar onOpenDrawer={onOpenDrawer} />
@@ -47,6 +48,9 @@ export const Layout = ({ children }) => {
             >
                 {children}
             </Box>
+
+            <BottomNav display={{ base: 'flex', md: 'none' }} />
+
         </Box>
     )
 }
diff --git a/src/components/Logo.js b/src/components/Logo.js
index ccc957c..c504b8a 100644
--- a/src/components/Logo.js
+++ b/src/components/Logo.js
@@ -1,7 +1,6 @@
-import { config } from '../config'
 import { Box, Image } from '@chakra-ui/react'
-import { Images } from '../data'
 import { useApp } from '../AppContext'
+
 // we have know which picture we are using
 export const Logo = (props) => {
 
diff --git a/src/components/NumCard.js b/src/components/NumCard.js
index 2347946..375318b 100644
--- a/src/components/NumCard.js
+++ b/src/components/NumCard.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { Box, Flex, Stack, Icon, Heading, Text, VStack, HStack } from "@chakra-ui/react"
+import { Flex, Stack, Icon, Text, VStack, HStack } from "@chakra-ui/react"
 
 /**
  * 
diff --git a/src/components/Panel.js b/src/components/Panel.js
index eb48c9f..095600e 100644
--- a/src/components/Panel.js
+++ b/src/components/Panel.js
@@ -1,4 +1,4 @@
-import { Box, Stack } from "@chakra-ui/react"
+import { Stack } from "@chakra-ui/react"
 
 
 export const Panel = ({ children, ...rest }) => {
diff --git a/src/components/Placeholder.js b/src/components/Placeholder.js
new file mode 100644
index 0000000..31749c1
--- /dev/null
+++ b/src/components/Placeholder.js
@@ -0,0 +1,11 @@
+import { Box } from "@chakra-ui/react"
+
+export const Placeholder = (props) => {
+    return (
+        <Box
+            {...props}
+        >
+
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index 2f58e4d..8106899 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -71,7 +71,7 @@ export const SideBar = ({ onCloseDrawer, ...rest }) => {
     const app = useApp()
 
     const bg = useColorModeValue('white', 'gray.900')
-    const { t, i18n } = useTranslation()
+    const { t } = useTranslation()
     // const colorBorderRight = useColorModeValue('gray.200', 'gray.700')
 
     const menuItems = [
diff --git a/src/components/index.js b/src/components/index.js
index fbfd86b..4fdb0d1 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,4 +7,6 @@ export * from './Partners'
 export * from './Auditors'
 export * from './FarmCoinCard'
 export * from './ColorModeSwitcher'
+export * from './Placeholder'
+export * from './Panel'
 export * from './alert'
\ No newline at end of file
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
index e9909d4..1e7448c 100644
--- a/src/hooks/useLocalStorage.js
+++ b/src/hooks/useLocalStorage.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 
 function getStorageJson(name, default_value) {
     if (!localStorage) {
diff --git a/src/index.js b/src/index.js
index eab66c4..f037319 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-import { ColorModeScript } from '@chakra-ui/react'
 import React, { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import i18n from './i18'