update pay function
This commit is contained in:
403
boilerplate-chakra-pro-main/components/navbar/NavbarFixed.js
Normal file
403
boilerplate-chakra-pro-main/components/navbar/NavbarFixed.js
Normal file
@@ -0,0 +1,403 @@
|
||||
/* eslint-disable */
|
||||
'use client';
|
||||
|
||||
import logo from '/public/logo-horizon-boilerplate.png';
|
||||
import {
|
||||
Image,
|
||||
Button,
|
||||
Flex,
|
||||
Icon,
|
||||
Link,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IoIosStar, IoMdTrophy } from 'react-icons/io';
|
||||
import { IoMenuOutline } from 'react-icons/io5';
|
||||
import { MdChevronRight, MdPrivacyTip } from 'react-icons/md';
|
||||
|
||||
export default function AdminNavbar(props) {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', changeNavbar);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', changeNavbar);
|
||||
};
|
||||
});
|
||||
const { secondary, message } = props;
|
||||
|
||||
// Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)
|
||||
let textColor = useColorModeValue('#120F43', 'white');
|
||||
let borderColor = useColorModeValue('gray.300', 'white');
|
||||
let navbarPosition = 'fixed';
|
||||
let navbarFilter = 'none';
|
||||
let navbarShadow = '45px 76px 113px 7px rgba(112, 144, 176, 0.08)';
|
||||
let navbarBorder = 'transparent';
|
||||
let paddingX = '15px';
|
||||
let gap = '0px';
|
||||
let navbarTop = '0px';
|
||||
let menuBg = useColorModeValue('white', 'navy.800');
|
||||
const changeNavbar = () => {
|
||||
if (window.scrollY > 1) {
|
||||
setScrolled(true);
|
||||
} else {
|
||||
setScrolled(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Flex
|
||||
position={navbarPosition}
|
||||
boxShadow={navbarShadow}
|
||||
bg="white"
|
||||
direction="column"
|
||||
borderColor={navbarBorder}
|
||||
filter={navbarFilter}
|
||||
backgroundPosition="center"
|
||||
backgroundSize="cover"
|
||||
zIndex="200"
|
||||
borderStyle="solid"
|
||||
alignItems={{ xl: 'center' }}
|
||||
display={secondary ? 'block' : 'flex'}
|
||||
justifyContent={{ xl: 'center' }}
|
||||
lineHeight="25.6px"
|
||||
mx="auto"
|
||||
left="50%"
|
||||
transform="translate(-50%,0px)"
|
||||
w="100%"
|
||||
top={navbarTop}
|
||||
>
|
||||
{/* Misc */}
|
||||
|
||||
<Flex
|
||||
w="100%"
|
||||
display={{ base: 'none', lg: 'flex' }}
|
||||
bg="#F3F5FA"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Flex
|
||||
w={{
|
||||
base: 'calc(100vw - 4%)',
|
||||
md: 'calc(100vw - 4%)',
|
||||
lg: '100vw',
|
||||
xl: 'calc(100vw - 250px)',
|
||||
'2xl': '1200px',
|
||||
}}
|
||||
px={{
|
||||
sm: paddingX,
|
||||
md: '10px',
|
||||
lg: '12px',
|
||||
}}
|
||||
py="4px"
|
||||
gap="40px"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Flex direction="row" alignItems="center">
|
||||
<Icon
|
||||
me="6px"
|
||||
w="12px"
|
||||
h="12px"
|
||||
color="brand.500"
|
||||
as={MdPrivacyTip}
|
||||
/>
|
||||
<Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
|
||||
Founded in EU. We respect your privacy.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="row" alignItems="center">
|
||||
<Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
||||
<Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
||||
<Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
||||
<Icon me="1px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
||||
<Icon me="6px" w="12px" h="12px" color="brand.500" as={IoIosStar} />
|
||||
<Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
|
||||
Loved by 80,000+ users worldwide
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex direction="row" alignItems="center">
|
||||
<Icon
|
||||
me="6px"
|
||||
w="12px"
|
||||
h="12px"
|
||||
color="brand.500"
|
||||
as={IoMdTrophy}
|
||||
/>
|
||||
<Text fontSize="xs" fontWeight="500" h="100%" color="gray.500">
|
||||
#1 NextJS boilerplate & admin template
|
||||
|
||||
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* Misc */}
|
||||
|
||||
<Flex
|
||||
w={{
|
||||
base: 'calc(100vw - 4%)',
|
||||
md: 'calc(100vw - 4%)',
|
||||
lg: '100vw',
|
||||
xl: 'calc(100vw - 250px)',
|
||||
'2xl': '1200px',
|
||||
}}
|
||||
px={{
|
||||
sm: paddingX,
|
||||
md: '10px',
|
||||
lg: '12px',
|
||||
}}
|
||||
py="20px"
|
||||
ps={{
|
||||
xl: '12px',
|
||||
}}
|
||||
flexDirection={{
|
||||
sm: 'row',
|
||||
md: 'row',
|
||||
}}
|
||||
alignItems="center"
|
||||
justify="space-between"
|
||||
mb={gap}
|
||||
>
|
||||
<Link
|
||||
display={'flex'}
|
||||
alignItems="center"
|
||||
justifyContent={'center'}
|
||||
href="/"
|
||||
>
|
||||
<Image
|
||||
alt=" "
|
||||
w="36px"
|
||||
src={logo.src}
|
||||
/>
|
||||
<Text ms="8px" me="10px" fontWeight="800" color="#120F43">
|
||||
Horizon UI Boilerplate
|
||||
</Text>
|
||||
</Link>
|
||||
<Flex>
|
||||
<Link
|
||||
display={{ base: 'none', lg: 'block' }}
|
||||
href="/dashboard/signin"
|
||||
color="gray.600"
|
||||
fontSize="sm"
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
me="30px"
|
||||
my="auto"
|
||||
>
|
||||
Generator
|
||||
</Link>
|
||||
<Link
|
||||
display={{ base: 'none', lg: 'block' }}
|
||||
href="/#features"
|
||||
color="gray.600"
|
||||
fontSize="sm"
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
me="30px"
|
||||
my="auto"
|
||||
>
|
||||
Features
|
||||
</Link>
|
||||
<Link
|
||||
display={{ base: 'none', lg: 'block' }}
|
||||
href="/pricing"
|
||||
color="gray.600"
|
||||
fontSize="sm"
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
me="30px"
|
||||
my="auto"
|
||||
>
|
||||
Pricing
|
||||
</Link>
|
||||
<Link
|
||||
display={{ base: 'none', lg: 'block' }}
|
||||
href="#faqs"
|
||||
color="gray.600"
|
||||
fontSize="sm"
|
||||
fontWeight="500"
|
||||
letterSpacing="0px"
|
||||
me="30px"
|
||||
my="auto"
|
||||
>
|
||||
FAQs
|
||||
</Link>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
display={{ base: 'block', xl: 'none' }}
|
||||
p="0px !important"
|
||||
maxH="20px"
|
||||
maxW="20px"
|
||||
alignContent="end"
|
||||
>
|
||||
<Icon
|
||||
display={{ base: 'block', lg: 'none' }}
|
||||
as={IoMenuOutline}
|
||||
color={textColor}
|
||||
w="20px"
|
||||
h="20px"
|
||||
_hover={{ cursor: 'pointer' }}
|
||||
/>
|
||||
</MenuButton>
|
||||
<MenuList
|
||||
p="0px"
|
||||
mt="10px"
|
||||
borderRadius="10px"
|
||||
border="1px solid"
|
||||
borderColor="#CBD5E0"
|
||||
bg={menuBg}
|
||||
>
|
||||
<Flex flexDirection="column" p="10px">
|
||||
<MenuItem
|
||||
_hover={{ bg: 'none' }}
|
||||
_focus={{ bg: 'none' }}
|
||||
borderRadius="8px"
|
||||
px="14px"
|
||||
>
|
||||
<Link
|
||||
href="/dashboard/signin"
|
||||
color="gray.600"
|
||||
fontSize="md"
|
||||
fontWeight="500"
|
||||
me="30px"
|
||||
my="auto"
|
||||
>
|
||||
Generator
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
_hover={{ bg: 'none' }}
|
||||
_focus={{ bg: 'none' }}
|
||||
borderRadius="8px"
|
||||
px="14px"
|
||||
>
|
||||
<Link
|
||||
href="/#features"
|
||||
color="gray.600"
|
||||
fontSize="md"
|
||||
fontWeight="500"
|
||||
me="30px"
|
||||
my="auto"
|
||||
>
|
||||
Features
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
_hover={{ bg: 'none' }}
|
||||
_focus={{ bg: 'none' }}
|
||||
color="red.400"
|
||||
borderRadius="8px"
|
||||
>
|
||||
<Link
|
||||
href="/pricing"
|
||||
color="gray.600"
|
||||
fontSize="md"
|
||||
fontWeight="500"
|
||||
me="30px"
|
||||
my="auto"
|
||||
>
|
||||
Pricing
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
_hover={{ bg: 'none' }}
|
||||
_focus={{ bg: 'none' }}
|
||||
color="red.400"
|
||||
borderRadius="8px"
|
||||
>
|
||||
<Link
|
||||
href="#faqs"
|
||||
color="gray.600"
|
||||
fontSize="md"
|
||||
fontWeight="500"
|
||||
me="30px"
|
||||
my="auto"
|
||||
>
|
||||
FAQs
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
_hover={{ bg: 'none' }}
|
||||
_focus={{ bg: 'none' }}
|
||||
color="red.400"
|
||||
borderRadius="8px"
|
||||
>
|
||||
<Link
|
||||
href="/dashboard/signin"
|
||||
color={textColor}
|
||||
fontSize="md"
|
||||
fontWeight="600"
|
||||
me="18px"
|
||||
my="auto"
|
||||
letterSpacing="0px"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<Button
|
||||
variant="transparent"
|
||||
border="1px solid"
|
||||
borderColor={borderColor}
|
||||
color={textColor}
|
||||
fontSize="md"
|
||||
borderRadius="45px"
|
||||
bg="transparent"
|
||||
my="auto"
|
||||
>
|
||||
<Link href="/dashboard/signin">
|
||||
Get started for Free
|
||||
<Icon
|
||||
as={MdChevronRight}
|
||||
mt="3px"
|
||||
ms="5px"
|
||||
h="16px"
|
||||
w="16px"
|
||||
/>
|
||||
</Link>
|
||||
</Button>
|
||||
</Flex>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Flex>
|
||||
<Flex display={{ base: 'none', lg: 'flex' }}>
|
||||
<Link
|
||||
href="/dashboard/signin"
|
||||
color={textColor}
|
||||
fontSize="sm"
|
||||
fontWeight="600"
|
||||
me="18px"
|
||||
letterSpacing="0px"
|
||||
my="auto"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
|
||||
<Link href="/dashboard/signin">
|
||||
<Button
|
||||
variant="transparent"
|
||||
border="1px solid"
|
||||
borderColor={borderColor}
|
||||
color={textColor}
|
||||
fontSize="sm"
|
||||
borderRadius="45px"
|
||||
px="18px"
|
||||
py="12px"
|
||||
bg="transparent"
|
||||
my="auto"
|
||||
>
|
||||
{' '}
|
||||
Get started for Free
|
||||
<Icon as={MdChevronRight} mt="3px" h="16px" w="16px" />
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Flex>
|
||||
{secondary ? <Text color="white">{message}</Text> : null}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user