feat: improve mobile inventory

components/MobileNotification.tsx

@@ -0,0 +1,41 @@
+import { Flex, Box, Button, Heading, Modal, ModalContent, ModalOverlay } from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
+
+type Props = {
+  isOpen: boolean
+  toggleNotification: () => void
+}
+
+function MobileNotification({ isOpen, toggleNotification, children }: PropsWithChildren<Props>) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={toggleNotification}
+      closeOnOverlayClick
+      isCentered
+      size="xl"
+    >
+      <ModalOverlay />
+      <ModalContent bg="#F0E0D0" boxShadow="none" w="95vw" h="500px" p="10px">
+        <Flex p="14px" justify="space-between" align="center" flexDirection="column" w="100%" h="100%" backgroundImage="url('/images/modal/notification-bg.webp')">
+          <Heading size="lg" textAlign="center" color="#472805">NOTIFICATION</Heading>
+
+          {children}
+
+          <Box>
+            <Button
+              bg="#472805"
+              color="#fff"
+
+              onClick={toggleNotification}
+            >
+              Close
+            </Button>
+          </Box>
+        </Flex>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default MobileNotification

components/professions/Inventory/ItemGrid.tsx

@@ -32,12 +32,14 @@ function ItemGrid({ onClose, onClickItem, loading, data }: Props) {
                 key={`${value.indexItem}${index}`}
                 className="container-item click-cursor"
               >
-                <img
-                  onClick={() => onClickItem(value)}
-                  src={`/images/inventory/items/${value.type}Amount.png`}
-                  alt="img"
-                />
-                <div>{value?.ids?.length}</div>
+                {!value.type.includes("Card") && <>
+                  <img
+                    onClick={() => onClickItem(value)}
+                    src={`/images/inventory/items/${value.type}Amount.png`}
+                    alt="img"
+                  />
+                  <div>{value?.ids?.length}</div>
+                </>}
               </div>
             )
           })}

components/professions/Inventory/ItemGridMobile.tsx

@@ -0,0 +1,143 @@
+import { Button, Spinner, Text, useDisclosure } from '@chakra-ui/react'
+import { useCallback, useMemo, useState } from 'react'
+import { Grid, GridItem } from '@chakra-ui/react'
+import ItemNotify from './ItemNotify'
+
+type Item = {
+	type:
+		| 'sushi'
+		| 'ore'
+		| 'hammer'
+		| 'fish'
+		| 'openianCard'
+		| 'blacksmithCard'
+		| 'supplierCard'
+	ids: number[]
+}
+
+type Props = {
+  loading: boolean
+  data: Item[]
+  currentFilter: 'all' | 'ore' | 'food' | 'nftCard'
+  onToggleInventory: () => void
+}
+function ItemGridMobile({ loading, data, currentFilter, onToggleInventory }: Props) {
+  const { isOpen, onToggle: onToggleItemNotify } = useDisclosure()
+  const [selectedItem, setSelectedItem] = useState<Item>({
+		type: 'fish',
+		ids: []
+	})
+  const renderData = useMemo(() => {
+    let itemData = data
+    if (currentFilter === 'ore') {
+      itemData = data.filter(
+        (item) => item.type === 'ore' || item.type === 'hammer'
+      )
+    } else if (currentFilter === 'food') {
+      itemData = data.filter(
+        (item) => item.type === 'fish' || item.type === 'sushi'
+      )
+    } else if (currentFilter === 'nftCard') {
+      itemData = data.filter((item) => item.type.includes('Card'))
+    }
+    return [...itemData, ...Array(20 - itemData?.length)]
+  }, [data, currentFilter])
+
+  const onSelectItem = useCallback(
+    (item) => {
+      setSelectedItem(item)
+      onToggleItemNotify()
+    },
+    [onToggleItemNotify]
+  )
+
+  return (
+    <>
+      <Grid
+        templateColumns={{
+          base: 'repeat(4, 1fr)',
+          md: 'repeat(5, 1fr)',
+        }}
+        templateRows="repeat(5, 1fr)"
+        gap={2}
+        h="370px"
+        mt="12px"
+        mx="11px"
+        p="8px"
+        bg="#DCD7C1"
+        borderRadius="10px"
+      >
+        {loading && <Spinner />}
+        {renderData.map((value, index) => {
+          if (!value) {
+            return (
+              <GridItem
+                h="60px"
+                bgGradient="linear-gradient(180deg, rgba(90, 90, 90, 0.7) 0%, rgba(171, 171, 171, 0.7) 100%)"
+              ></GridItem>
+            )
+          }
+
+          return (
+            <GridItem
+              key={`${value.indexItem}${index}`}
+              h="60px"
+              p="2px"
+              bgGradient="linear-gradient(180deg, rgba(90, 90, 90, 0.7) 0%, rgba(171, 171, 171, 0.7) 100%)"
+            >
+              <Button
+                p={!value.type.includes('Card') ? '10px' : '0'}
+                h="100%"
+                bg="transparent"
+                position="relative"
+                border="solid 1px #F8F8F8"
+                borderRadius="none"
+								outline="none"
+                _hover={{
+                  bg: 'transparent',
+                }}
+                _active={{
+                  boxShadow: 'none',
+                  bg: 'transparent',
+                }}
+                _focus={{
+                  boxShadow: 'none',
+                  bg: 'transparent',
+                }}
+                onClick={() => onSelectItem(value)}
+              >
+                <img
+                  src={`/images/inventory/items/${value.type}AmountMobile.png`}
+                  alt="img"
+                />
+
+                <Text
+                  position="absolute"
+                  right="5px"
+                  bottom="2px"
+                  fontSize="10px"
+                  fontWeight="500"
+                  style={{
+                    textShadow:
+                      '2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff',
+                  }}
+                >
+                  {value?.ids?.length}
+                </Text>
+              </Button>
+            </GridItem>
+          )
+        })}
+      </Grid>
+
+      <ItemNotify
+        isOpen={isOpen}
+        toggleItemNotify={onToggleItemNotify}
+        selectedItem={selectedItem}
+        onToggleInventory={onToggleInventory}
+      />
+    </>
+  )
+}
+
+export default ItemGridMobile

components/professions/Inventory/ItemNotify.tsx

@@ -0,0 +1,165 @@
+import {
+  Button,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  useDisclosure,
+} from '@chakra-ui/react'
+import styles from '@components/workshop/BuyerBoard.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+import { useCallback, useMemo } from 'react'
+import { useSelector } from 'react-redux'
+import { useRouter } from 'next/router'
+import ItemSellModal from './ItemSellModal'
+
+type Item = {
+  type:
+    | 'sushi'
+    | 'ore'
+    | 'hammer'
+    | 'fish'
+    | 'openianCard'
+    | 'blacksmithCard'
+    | 'supplierCard'
+  ids: number[]
+}
+
+type Props = {
+  isOpen: boolean
+  selectedItem: Item
+  toggleItemNotify: () => void
+  onToggleInventory: () => void
+}
+
+function ItemNotify({
+  isOpen,
+  selectedItem,
+  toggleItemNotify,
+  onToggleInventory,
+}: Props) {
+  const { isOpen: isItemSellOpen, onToggle: onToggleItemSell } = useDisclosure()
+  const profile = useSelector((state: any) => state.ProfileStore.profile)
+  const router = useRouter()
+
+  const renderItemImg = useMemo(() => {
+    if (selectedItem.type.includes('Card')) {
+      return (
+        <img
+          src={`/images/inventory/items/${selectedItem.type}AmountMobile.png`}
+          alt=""
+        />
+      )
+    }
+    return (
+      <img src={`/images/workshop/mobile/${selectedItem.type}.webp`} alt="" />
+    )
+  }, [selectedItem])
+
+  const renderItemName = useMemo(() => {
+    if (selectedItem.type.includes('Card')) {
+      return selectedItem.type.replace('Card', ' NFT Card')
+    }
+
+    return selectedItem.type
+  }, [selectedItem])
+
+  const renderItemInfo = useMemo(() => {
+    if (selectedItem.type === 'fish') {
+      return "Fish is the main ingredient for making Sushi and Suppliers are paying good money for them. Let's go catch some!!!"
+    } else if (selectedItem.type === 'ore') {
+      return "Ore is the main material to make Hammers and BlackSmiths are paying good money for them. Let's go mine some !!!"
+    } else if (selectedItem.type === 'hammer') {
+      return 'Hammer is item that help Openians doing their Mining quest'
+    } else if (selectedItem.type === 'sushi') {
+      return 'Sushi is only item that help increase Stamina Point.'
+    }
+  }, [selectedItem])
+
+  const isCanUseItem = useMemo(() => {
+    return (
+      selectedItem.ids.length !== 0 &&
+      ((selectedItem.type === 'fish' && profile?._profession === '2') ||
+        (selectedItem.type === 'ore' && profile?._profession === '3') ||
+        (selectedItem.type === 'hammer' && profile?._profession === '1') ||
+        selectedItem.type === 'sushi' ||
+        (selectedItem.type.includes('Card') && profile?._profession === '0'))
+    )
+  }, [selectedItem])
+
+  const handleUseItem = useCallback(() => {
+    if (selectedItem.type !== 'sushi') {
+      router.push('/professions')
+      toggleItemNotify()
+      onToggleInventory()
+    } else {
+    }
+  }, [toggleItemNotify, onToggleInventory])
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen}
+        onClose={toggleItemNotify}
+        closeOnOverlayClick
+        isCentered
+        size="xl"
+      >
+        <ModalOverlay />
+        <ModalContent bg="transparent" boxShadow="none">
+          <ModalBody padding={0}>
+            <div className={styles.modalMobile}>
+              <div className={styles.closeBtnMobile} onClick={toggleItemNotify}>
+                <FontAwesomeIcon icon={faXmark} />
+              </div>
+
+              <div className={styles.itemBackground}>
+                <div
+                  className={styles.imgContainer}
+                  style={
+                    selectedItem.type.includes('Card')
+                      ? {
+                          padding: 0,
+                        }
+                      : { padding: '10px' }
+                  }
+                >
+                  {renderItemImg}
+                </div>
+              </div>
+              <div className={styles.itemNameMobile}>{renderItemName}</div>
+              <div className={styles.itemInfoMobile}>{renderItemInfo}</div>
+              <Flex w="100%" justify="space-evenly">
+                <Button
+                  disabled={!isCanUseItem}
+                  onClick={handleUseItem}
+                  className={styles.itemBtnConfirm}
+                >
+                  Use
+                </Button>
+                <Button
+                  disabled={selectedItem.ids.length === 0}
+                  className={styles.itemBtnConfirm}
+                  onClick={onToggleItemSell}
+                >
+                  Sell
+                </Button>
+              </Flex>
+            </div>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+
+      <ItemSellModal
+        isOpen={isItemSellOpen}
+        toggleItemSell={onToggleItemSell}
+        selectedItem={selectedItem}
+        toggleItemNotify={toggleItemNotify}
+      />
+    </>
+  )
+}
+
+export default ItemNotify