update pay function
This commit is contained in:
43
boilerplate-chakra-pro-main/components/menu/ItemContent.tsx
Normal file
43
boilerplate-chakra-pro-main/components/menu/ItemContent.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
// chakra imports
|
||||
import { Icon, Flex, Text, useColorModeValue } from '@chakra-ui/react';
|
||||
import { MdUpgrade } from 'react-icons/md';
|
||||
|
||||
export function ItemContent(props: { info: string }) {
|
||||
const textColor = useColorModeValue('navy.700', 'white');
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
justify="center"
|
||||
align="center"
|
||||
borderRadius="16px"
|
||||
minH={{ base: '60px', md: '70px' }}
|
||||
h={{ base: '60px', md: '70px' }}
|
||||
minW={{ base: '60px', md: '70px' }}
|
||||
w={{ base: '60px', md: '70px' }}
|
||||
me="14px"
|
||||
bgGradient="linear(to-b, brand.400, brand.600)"
|
||||
>
|
||||
<Icon as={MdUpgrade} color="white" w={8} h={14} />
|
||||
</Flex>
|
||||
<Flex flexDirection="column">
|
||||
<Text
|
||||
mb="5px"
|
||||
fontWeight="bold"
|
||||
color={textColor}
|
||||
fontSize={{ base: 'md', md: 'md' }}
|
||||
>
|
||||
New Update: {props.info}
|
||||
</Text>
|
||||
<Flex alignItems="center">
|
||||
<Text
|
||||
fontSize={{ base: 'sm', md: 'sm' }}
|
||||
lineHeight="100%"
|
||||
color={textColor}
|
||||
>
|
||||
A new update for your downloaded item is available!
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
149
boilerplate-chakra-pro-main/components/menu/MainMenu.tsx
Normal file
149
boilerplate-chakra-pro-main/components/menu/MainMenu.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
// Chakra imports
|
||||
import {
|
||||
Icon,
|
||||
Flex,
|
||||
Text,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
useDisclosure,
|
||||
useColorModeValue
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import {
|
||||
MdOutlineMoreHoriz,
|
||||
MdOutlinePerson,
|
||||
MdOutlineCardTravel,
|
||||
MdOutlineLightbulb,
|
||||
MdOutlineSettings
|
||||
} from 'react-icons/md';
|
||||
|
||||
export default function Banner(props: { [x: string]: any }) {
|
||||
const { ...rest } = props;
|
||||
|
||||
const textColor = useColorModeValue('secondaryGray.500', 'white');
|
||||
const textHover = useColorModeValue(
|
||||
{ color: '#120F43', bg: 'unset' },
|
||||
{ color: 'secondaryGray.500', bg: 'unset' }
|
||||
);
|
||||
const iconColor = useColorModeValue('brand.500', 'white');
|
||||
const bgList = useColorModeValue('white', 'whiteAlpha.100');
|
||||
const bgShadow = useColorModeValue('14px 17px 40px 4px rgba(112, 144, 176, 0.08)', 'unset');
|
||||
const bgButton = useColorModeValue('secondaryGray.300', 'whiteAlpha.100');
|
||||
const bgHover = useColorModeValue({ bg: 'secondaryGray.400' }, { bg: 'whiteAlpha.50' });
|
||||
const bgFocus = useColorModeValue({ bg: 'secondaryGray.300' }, { bg: 'whiteAlpha.100' });
|
||||
|
||||
// Ellipsis modals
|
||||
const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure();
|
||||
|
||||
return (
|
||||
<Menu isOpen={isOpen1} onClose={onClose1}>
|
||||
<MenuButton
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
bg={bgButton}
|
||||
_hover={bgHover}
|
||||
_focus={bgFocus}
|
||||
_active={bgFocus}
|
||||
w='37px'
|
||||
h='37px'
|
||||
lineHeight='100%'
|
||||
onClick={onOpen1}
|
||||
borderRadius='10px'
|
||||
{...rest}>
|
||||
<Icon as={MdOutlineMoreHoriz} color={iconColor} w='24px' h='24px' mt='4px' />
|
||||
</MenuButton>
|
||||
<MenuList
|
||||
w='150px'
|
||||
minW='unset'
|
||||
maxW='150px !important'
|
||||
border='transparent'
|
||||
backdropFilter='blur(63px)'
|
||||
bg={bgList}
|
||||
boxShadow={bgShadow}
|
||||
borderRadius='20px'
|
||||
p='15px'>
|
||||
<MenuItem
|
||||
transition='0.2s linear'
|
||||
color={textColor}
|
||||
_hover={textHover}
|
||||
p='0px'
|
||||
borderRadius='8px'
|
||||
_active={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
mb='10px'>
|
||||
<Flex align='center'>
|
||||
<Icon as={MdOutlinePerson} h='16px' w='16px' me='8px' />
|
||||
<Text fontSize='sm' fontWeight='400'>
|
||||
Panel 1
|
||||
</Text>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
transition='0.2s linear'
|
||||
p='0px'
|
||||
borderRadius='8px'
|
||||
color={textColor}
|
||||
_hover={textHover}
|
||||
_active={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
mb='10px'>
|
||||
<Flex align='center'>
|
||||
<Icon as={MdOutlineCardTravel} h='16px' w='16px' me='8px' />
|
||||
<Text fontSize='sm' fontWeight='400'>
|
||||
Panel 2
|
||||
</Text>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
transition='0.2s linear'
|
||||
p='0px'
|
||||
borderRadius='8px'
|
||||
color={textColor}
|
||||
_hover={textHover}
|
||||
_active={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
mb='10px'>
|
||||
<Flex align='center'>
|
||||
<Icon as={MdOutlineLightbulb} h='16px' w='16px' me='8px' />
|
||||
<Text fontSize='sm' fontWeight='400'>
|
||||
Panel 3
|
||||
</Text>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
transition='0.2s linear'
|
||||
color={textColor}
|
||||
_hover={textHover}
|
||||
p='0px'
|
||||
borderRadius='8px'
|
||||
_active={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent'
|
||||
}}>
|
||||
<Flex align='center'>
|
||||
<Icon as={MdOutlineSettings} h='16px' w='16px' me='8px' />
|
||||
<Text fontSize='sm' fontWeight='400'>
|
||||
Panel 4
|
||||
</Text>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
128
boilerplate-chakra-pro-main/components/menu/TransparentMenu.tsx
Normal file
128
boilerplate-chakra-pro-main/components/menu/TransparentMenu.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
// Chakra imports
|
||||
import {
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
useDisclosure,
|
||||
useColorModeValue,
|
||||
Flex,
|
||||
Icon,
|
||||
Text
|
||||
} from '@chakra-ui/react';
|
||||
// Assets
|
||||
import { MdOutlinePerson, MdOutlineCardTravel, MdOutlineLightbulb, MdOutlineSettings } from 'react-icons/md';
|
||||
export default function Banner(props: { icon: JSX.Element | string; [x: string]: any }) {
|
||||
const { icon, ...rest } = props;
|
||||
|
||||
// Ellipsis modals
|
||||
const { isOpen: isOpen1, onOpen: onOpen1, onClose: onClose1 } = useDisclosure();
|
||||
|
||||
// Chakra color mode
|
||||
|
||||
const textColor = useColorModeValue('secondaryGray.500', 'white');
|
||||
const textHover = useColorModeValue(
|
||||
{ color: '#120F43', bg: 'unset' },
|
||||
{ color: 'secondaryGray.500', bg: 'unset' }
|
||||
);
|
||||
const bgList = useColorModeValue('white', 'whiteAlpha.100');
|
||||
const bgShadow = useColorModeValue('14px 17px 40px 4px rgba(112, 144, 176, 0.08)', 'unset');
|
||||
|
||||
return (
|
||||
<Menu isOpen={isOpen1} onClose={onClose1}>
|
||||
<MenuButton {...rest} onClick={onOpen1}>
|
||||
{icon}
|
||||
</MenuButton>
|
||||
<MenuList
|
||||
w='150px'
|
||||
minW='unset'
|
||||
maxW='150px !important'
|
||||
border='transparent'
|
||||
backdropFilter='blur(63px)'
|
||||
bg={bgList}
|
||||
boxShadow={bgShadow}
|
||||
borderRadius='20px'
|
||||
p='15px'>
|
||||
<MenuItem
|
||||
transition='0.2s linear'
|
||||
color={textColor}
|
||||
_hover={textHover}
|
||||
p='0px'
|
||||
borderRadius='8px'
|
||||
_active={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
mb='10px'>
|
||||
<Flex align='center'>
|
||||
<Icon as={MdOutlinePerson} h='16px' w='16px' me='8px' />
|
||||
<Text fontSize='sm' fontWeight='400'>
|
||||
Panel 1
|
||||
</Text>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
transition='0.2s linear'
|
||||
p='0px'
|
||||
borderRadius='8px'
|
||||
color={textColor}
|
||||
_hover={textHover}
|
||||
_active={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
mb='10px'>
|
||||
<Flex align='center'>
|
||||
<Icon as={MdOutlineCardTravel} h='16px' w='16px' me='8px' />
|
||||
<Text fontSize='sm' fontWeight='400'>
|
||||
Panel 2
|
||||
</Text>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
transition='0.2s linear'
|
||||
p='0px'
|
||||
borderRadius='8px'
|
||||
color={textColor}
|
||||
_hover={textHover}
|
||||
_active={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
mb='10px'>
|
||||
<Flex align='center'>
|
||||
<Icon as={MdOutlineLightbulb} h='16px' w='16px' me='8px' />
|
||||
<Text fontSize='sm' fontWeight='400'>
|
||||
Panel 3
|
||||
</Text>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
transition='0.2s linear'
|
||||
color={textColor}
|
||||
_hover={textHover}
|
||||
p='0px'
|
||||
borderRadius='8px'
|
||||
_active={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent'
|
||||
}}>
|
||||
<Flex align='center'>
|
||||
<Icon as={MdOutlineSettings} h='16px' w='16px' me='8px' />
|
||||
<Text fontSize='sm' fontWeight='400'>
|
||||
Panel 4
|
||||
</Text>
|
||||
</Flex>
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user