chore: 删除未使用的组件文件 (第6批)
删除以下未被引用的组件： - AuthNavbar.js / SettingsBar.js (Navbars) - PostHogProvider.js - RTLProvider.js - Scrollbar.js 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -1,674 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* Argon Dashboard Chakra PRO - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
||||||
|
|
||||||
* Designed and Coded by Simmmple & Creative Tim
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Chakra imports
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Flex,
|
|
||||||
Grid,
|
|
||||||
HStack,
|
|
||||||
Icon,
|
|
||||||
Link,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
MenuList,
|
|
||||||
MenuButton,
|
|
||||||
Stack,
|
|
||||||
Text,
|
|
||||||
useColorModeValue,
|
|
||||||
useColorMode,
|
|
||||||
useDisclosure,
|
|
||||||
} from '@chakra-ui/react';
|
|
||||||
import bgCard from 'assets/img/background-card-reports.png';
|
|
||||||
import IconBox from 'components/Icons/IconBox';
|
|
||||||
import {
|
|
||||||
CreativeTimLogo,
|
|
||||||
RocketIcon,
|
|
||||||
ChakraLogoDark,
|
|
||||||
ChakraLogoLight,
|
|
||||||
ArgonLogoDark,
|
|
||||||
ArgonLogoLight,
|
|
||||||
ChakraLogoBlue,
|
|
||||||
} from 'components/Icons/Icons';
|
|
||||||
import { SidebarResponsive } from 'components/Sidebar/Sidebar';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { Fragment } from 'react';
|
|
||||||
import { Star, ChevronDown, ChevronRight } from 'lucide-react';
|
|
||||||
import { NavLink } from 'react-router-dom';
|
|
||||||
import { SidebarContext } from 'contexts/SidebarContext';
|
|
||||||
import routes from 'routes.js';
|
|
||||||
|
|
||||||
export default function AuthNavbar(props) {
|
|
||||||
const { logo, logoText, secondary, sidebarWidth, ...rest } = props;
|
|
||||||
const { colorMode } = useColorMode();
|
|
||||||
// Menu States
|
|
||||||
const {
|
|
||||||
isOpen: isOpenPages,
|
|
||||||
onOpen: onOpenPages,
|
|
||||||
onClose: onClosePages,
|
|
||||||
} = useDisclosure();
|
|
||||||
|
|
||||||
const {
|
|
||||||
isOpen: isOpenAuth,
|
|
||||||
onOpen: onOpenAuth,
|
|
||||||
onClose: onCloseAuth,
|
|
||||||
} = useDisclosure();
|
|
||||||
|
|
||||||
const {
|
|
||||||
isOpen: isOpenApplication,
|
|
||||||
onOpen: onOpenApplication,
|
|
||||||
onClose: onCloseApplication,
|
|
||||||
} = useDisclosure();
|
|
||||||
|
|
||||||
const {
|
|
||||||
isOpen: isOpenEcommerce,
|
|
||||||
onOpen: onOpenEcommerce,
|
|
||||||
onClose: onCloseEcommerce,
|
|
||||||
} = useDisclosure();
|
|
||||||
|
|
||||||
// Menus
|
|
||||||
let authObject = {};
|
|
||||||
routes.forEach((route) => {
|
|
||||||
if (route.items) {
|
|
||||||
authObject = route.items.find((link) => link.name === 'Authentication');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let applicationsObject = {};
|
|
||||||
routes.forEach((route) => {
|
|
||||||
if (route.items) {
|
|
||||||
applicationsObject = route.items.find(
|
|
||||||
(link) => link.name === 'Applications'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let ecommerceObject = {};
|
|
||||||
routes.forEach((route) => {
|
|
||||||
if (route.items) {
|
|
||||||
ecommerceObject = route.items.find((link) => link.name === 'Ecommerce');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let extraArr = [];
|
|
||||||
routes.forEach((route) => {
|
|
||||||
route.items.forEach((item) => {
|
|
||||||
if (item.items && item.name === 'Pages') {
|
|
||||||
extraArr = item.items.filter((link) => !link.collapse);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Chakra color mode
|
|
||||||
|
|
||||||
let brand = (
|
|
||||||
<Link
|
|
||||||
href={`${process.env.PUBLIC_URL}/#/`}
|
|
||||||
target='_blank'
|
|
||||||
display='flex'
|
|
||||||
lineHeight='100%'
|
|
||||||
fontWeight='bold'
|
|
||||||
justifyContent='center'
|
|
||||||
alignItems='center'
|
|
||||||
color={mainText}
|
|
||||||
>
|
|
||||||
<Stack direction='row' spacing='12px' align='center' justify='center'>
|
|
||||||
<ArgonLogoLight w='74px' h='27px' />
|
|
||||||
<Box w='1px' h='20px' bg={'white'} />
|
|
||||||
<ChakraLogoBlue w='82px' h='21px' />
|
|
||||||
</Stack>
|
|
||||||
<Text fontSize='sm' mt='3px'>
|
|
||||||
{logoText}
|
|
||||||
</Text>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
|
|
||||||
const textColor = useColorModeValue('gray.700', '#fff');
|
|
||||||
let menuBg = useColorModeValue('white', 'navy.900');
|
|
||||||
let mainText = '#fff';
|
|
||||||
let navbarBg = 'none';
|
|
||||||
let navbarShadow = 'initial';
|
|
||||||
let bgButton = useColorModeValue('white', 'navy.900');
|
|
||||||
let colorButton = useColorModeValue('gray.700', 'white');
|
|
||||||
let navbarPosition = 'absolute';
|
|
||||||
if (props.secondary === true) {
|
|
||||||
brand = (
|
|
||||||
<Link
|
|
||||||
href={`${process.env.PUBLIC_URL}/#/`}
|
|
||||||
target='_blank'
|
|
||||||
display='flex'
|
|
||||||
lineHeight='100%'
|
|
||||||
fontWeight='bold'
|
|
||||||
justifyContent='center'
|
|
||||||
alignItems='center'
|
|
||||||
color={mainText}
|
|
||||||
>
|
|
||||||
<Stack direction='row' spacing='12px' align='center' justify='center'>
|
|
||||||
{colorMode === 'light' ? (
|
|
||||||
<ArgonLogoDark w='74px' h='27px' />
|
|
||||||
) : (
|
|
||||||
<ArgonLogoLight w='74px' h='27px' />
|
|
||||||
)}
|
|
||||||
<Box w='1px' h='20px' bg={useColorModeValue('gray.700', 'white')} />
|
|
||||||
{colorMode === 'light' ? (
|
|
||||||
<ChakraLogoDark w='82px' h='21px' />
|
|
||||||
) : (
|
|
||||||
<ChakraLogoLight w='82px' h='21px' />
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
<Text fontSize='sm' mt='3px'>
|
|
||||||
{logoText}
|
|
||||||
</Text>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
mainText = useColorModeValue('gray.700', 'gray.200');
|
|
||||||
navbarBg = useColorModeValue('white', 'navy.800');
|
|
||||||
navbarShadow = useColorModeValue(
|
|
||||||
'0px 7px 23px rgba(0, 0, 0, 0.05)',
|
|
||||||
'none'
|
|
||||||
);
|
|
||||||
bgButton = useColorModeValue('gray.700', 'white');
|
|
||||||
colorButton = useColorModeValue('white', 'gray.700');
|
|
||||||
navbarPosition = 'fixed';
|
|
||||||
}
|
|
||||||
|
|
||||||
const createPagesLinks = (routes) => {
|
|
||||||
return routes.map((link, key) => {
|
|
||||||
if (
|
|
||||||
link.name === 'Applications' ||
|
|
||||||
link.name === 'Ecommerce' ||
|
|
||||||
link.name === 'Authentication' ||
|
|
||||||
link.name === 'RTL' ||
|
|
||||||
link.name === 'Widgets' ||
|
|
||||||
link.name === 'Charts' ||
|
|
||||||
link.name === 'Alerts'
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (link.name === 'Pricing Page') {
|
|
||||||
return (
|
|
||||||
<Stack key={key} direction='column'>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='6px'
|
|
||||||
align='center'
|
|
||||||
mb='6px'
|
|
||||||
cursor='default'
|
|
||||||
>
|
|
||||||
<IconBox bg='blue.500' color='white' h='30px' w='30px'>
|
|
||||||
<RocketIcon color='inherit' />
|
|
||||||
</IconBox>
|
|
||||||
<Text fontWeight='bold' fontSize='sm' color={textColor}>
|
|
||||||
Extra
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
{createExtraLinks(extraArr)}
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (link.authIcon) {
|
|
||||||
return (
|
|
||||||
<Stack key={key} direction='column'>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='6px'
|
|
||||||
align='center'
|
|
||||||
mb='6px'
|
|
||||||
cursor='default'
|
|
||||||
>
|
|
||||||
<IconBox bg='blue.500' color='white' h='30px' w='30px'>
|
|
||||||
{link.authIcon}
|
|
||||||
</IconBox>
|
|
||||||
<Text fontWeight='bold' fontSize='sm' color={textColor}>
|
|
||||||
{link.name}
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
{createPagesLinks(link.items)}
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
if (link.component) {
|
|
||||||
return (
|
|
||||||
<NavLink key={key} to={link.layout + link.path}>
|
|
||||||
<MenuItem
|
|
||||||
ps='36px'
|
|
||||||
py='0px'
|
|
||||||
_hover={{ boxShadow: 'none', bg: 'none' }}
|
|
||||||
borderRadius='12px'
|
|
||||||
>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
{link.name}
|
|
||||||
</Text>
|
|
||||||
</MenuItem>
|
|
||||||
</NavLink>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return <Fragment key={key}>{createPagesLinks(link.items)}</Fragment>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const createExtraLinks = (routes) => {
|
|
||||||
return routes.map((link, key) => {
|
|
||||||
return (
|
|
||||||
<NavLink key={key} to={link.layout + link.path}>
|
|
||||||
<MenuItem
|
|
||||||
ps='36px'
|
|
||||||
py='0px'
|
|
||||||
_hover={{ boxShadow: 'none', bg: 'none' }}
|
|
||||||
borderRadius='12px'
|
|
||||||
>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
{link.name}
|
|
||||||
</Text>
|
|
||||||
</MenuItem>
|
|
||||||
</NavLink>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const createAuthLinks = (routes) => {
|
|
||||||
return routes.map((link, key) => {
|
|
||||||
if (link.authIcon && link.collapse == true) {
|
|
||||||
return (
|
|
||||||
<Stack key={key} direction='column' my='auto'>
|
|
||||||
<Menu placement='right'>
|
|
||||||
<MenuButton
|
|
||||||
p='5px'
|
|
||||||
ps='10px'
|
|
||||||
borderRadius='8px'
|
|
||||||
_hover={{
|
|
||||||
bg: useColorModeValue('gray.200', 'whiteAlpha.200'),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='0px'
|
|
||||||
align='center'
|
|
||||||
cursor='default'
|
|
||||||
>
|
|
||||||
<Text
|
|
||||||
fontWeight='bold'
|
|
||||||
fontSize='sm'
|
|
||||||
me='auto'
|
|
||||||
color={textColor}
|
|
||||||
>
|
|
||||||
{link.name}
|
|
||||||
</Text>
|
|
||||||
<Icon
|
|
||||||
as={ChevronRight}
|
|
||||||
color={mainText}
|
|
||||||
w='14px'
|
|
||||||
h='14px'
|
|
||||||
fontWeight='2000'
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
</MenuButton>
|
|
||||||
|
|
||||||
<MenuList bg={menuBg}>{createAuthLinks(link.items)}</MenuList>
|
|
||||||
</Menu>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<NavLink key={key} to={link.layout + link.path}>
|
|
||||||
<MenuItem ps='36px' py='5px' borderRadius='12px'>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
{link.name}
|
|
||||||
</Text>
|
|
||||||
</MenuItem>
|
|
||||||
</NavLink>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const createApplicationLinks = (routes) => {
|
|
||||||
return routes.map((link, key) => {
|
|
||||||
return (
|
|
||||||
<NavLink key={key} to={link.layout + link.path}>
|
|
||||||
<Stack direction='row' spacing='12px' align='center' cursor='pointer'>
|
|
||||||
<IconBox bg='blue.500' color='white' h='30px' w='30px'>
|
|
||||||
{link.authIcon}
|
|
||||||
</IconBox>
|
|
||||||
<Text fontWeight='bold' fontSize='sm' color={textColor}>
|
|
||||||
{link.name}
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
</NavLink>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const createEcommerceLinks = (routes) => {
|
|
||||||
return routes.map((link, key) => {
|
|
||||||
if (link.authIcon) {
|
|
||||||
return (
|
|
||||||
<Stack key={key} direction='column'>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='6px'
|
|
||||||
align='center'
|
|
||||||
mb='6px'
|
|
||||||
cursor='default'
|
|
||||||
>
|
|
||||||
<IconBox bg='blue.500' color='white' h='30px' w='30px'>
|
|
||||||
{link.authIcon}
|
|
||||||
</IconBox>
|
|
||||||
<Text fontWeight='bold' fontSize='sm' color={textColor}>
|
|
||||||
{link.name}
|
|
||||||
</Text>
|
|
||||||
</Stack>
|
|
||||||
{createPagesLinks(link.items)}
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
if (link.component) {
|
|
||||||
return (
|
|
||||||
<NavLink key={key} to={link.layout + link.path}>
|
|
||||||
<MenuItem
|
|
||||||
ps='36px'
|
|
||||||
py='0px'
|
|
||||||
_hover={{ boxShadow: 'none', bg: 'none' }}
|
|
||||||
borderRadius='12px'
|
|
||||||
>
|
|
||||||
<Text color='gray.400' fontSize='sm' fontWeight='normal'>
|
|
||||||
{link.name}
|
|
||||||
</Text>
|
|
||||||
</MenuItem>
|
|
||||||
</NavLink>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return <>{createPagesLinks(link.items)}</>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const linksAuth = (
|
|
||||||
<HStack display={{ sm: 'none', lg: 'flex' }} spacing='12px'>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='4px'
|
|
||||||
align='center'
|
|
||||||
color='#fff'
|
|
||||||
fontWeight='bold'
|
|
||||||
onMouseEnter={onOpenPages}
|
|
||||||
onMouseLeave={onClosePages}
|
|
||||||
cursor='pointer'
|
|
||||||
position='relative'
|
|
||||||
>
|
|
||||||
<Text fontSize='sm' color={mainText}>
|
|
||||||
Pages
|
|
||||||
</Text>
|
|
||||||
<Icon
|
|
||||||
as={ChevronDown}
|
|
||||||
color={mainText}
|
|
||||||
w='14px'
|
|
||||||
h='14px'
|
|
||||||
fontWeight='2000'
|
|
||||||
/>
|
|
||||||
<Menu isOpen={isOpenPages}>
|
|
||||||
<MenuList
|
|
||||||
bg={menuBg}
|
|
||||||
p='22px'
|
|
||||||
minW='550px'
|
|
||||||
cursor='default'
|
|
||||||
borderRadius='15px'
|
|
||||||
position='absolute'
|
|
||||||
top='30px'
|
|
||||||
left='-10px'
|
|
||||||
>
|
|
||||||
<Grid templateColumns='repeat(3, 1fr)' gap='16px'>
|
|
||||||
{createPagesLinks(routes)}
|
|
||||||
</Grid>
|
|
||||||
</MenuList>
|
|
||||||
</Menu>
|
|
||||||
</Stack>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='4px'
|
|
||||||
align='center'
|
|
||||||
color='#fff'
|
|
||||||
fontWeight='bold'
|
|
||||||
onMouseEnter={onOpenAuth}
|
|
||||||
onMouseLeave={onCloseAuth}
|
|
||||||
cursor='pointer'
|
|
||||||
position='relative'
|
|
||||||
>
|
|
||||||
<Text fontSize='sm' color={mainText}>
|
|
||||||
Authentications
|
|
||||||
</Text>
|
|
||||||
<Icon
|
|
||||||
as={ChevronDown}
|
|
||||||
color={mainText}
|
|
||||||
w='14px'
|
|
||||||
h='14px'
|
|
||||||
fontWeight='2000'
|
|
||||||
/>
|
|
||||||
<Menu isOpen={isOpenAuth}>
|
|
||||||
<MenuList
|
|
||||||
bg={menuBg}
|
|
||||||
p='22px'
|
|
||||||
minW='450px'
|
|
||||||
cursor='default'
|
|
||||||
borderRadius='15px'
|
|
||||||
position='absolute'
|
|
||||||
top='30px'
|
|
||||||
left='-10px'
|
|
||||||
>
|
|
||||||
<Stack direction='row' spacing='24px'>
|
|
||||||
<Flex
|
|
||||||
direction='column'
|
|
||||||
justify='center'
|
|
||||||
align='center'
|
|
||||||
bgImage={bgCard}
|
|
||||||
minW='200px'
|
|
||||||
maxW='200px'
|
|
||||||
minH='230px'
|
|
||||||
borderRadius='15px'
|
|
||||||
>
|
|
||||||
<IconBox
|
|
||||||
bg='white'
|
|
||||||
color='white'
|
|
||||||
borderRadius='50%'
|
|
||||||
h='50px'
|
|
||||||
w='50px'
|
|
||||||
mb='12px'
|
|
||||||
>
|
|
||||||
<Icon as={Star} w='25px' h='25px' color='blue.500' fill='currentColor' />
|
|
||||||
</IconBox>
|
|
||||||
<Text
|
|
||||||
fontSize='xl'
|
|
||||||
fontWeight='bold'
|
|
||||||
color='#fff'
|
|
||||||
maxW='80%'
|
|
||||||
textAlign='center'
|
|
||||||
>
|
|
||||||
Explore our utilities pages
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
<Grid templateColumns='1fr' width='100%'>
|
|
||||||
{createAuthLinks(authObject.items)}
|
|
||||||
</Grid>
|
|
||||||
</Stack>
|
|
||||||
</MenuList>
|
|
||||||
</Menu>
|
|
||||||
</Stack>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='4px'
|
|
||||||
align='center'
|
|
||||||
color='#fff'
|
|
||||||
fontWeight='bold'
|
|
||||||
onMouseEnter={onOpenApplication}
|
|
||||||
onMouseLeave={onCloseApplication}
|
|
||||||
cursor='pointer'
|
|
||||||
position='relative'
|
|
||||||
>
|
|
||||||
<Text fontSize='sm' color={mainText}>
|
|
||||||
Application
|
|
||||||
</Text>
|
|
||||||
<Icon
|
|
||||||
as={ChevronDown}
|
|
||||||
color={mainText}
|
|
||||||
w='14px'
|
|
||||||
h='14px'
|
|
||||||
fontWeight='2000'
|
|
||||||
/>
|
|
||||||
<Menu isOpen={isOpenApplication}>
|
|
||||||
<MenuList
|
|
||||||
bg={menuBg}
|
|
||||||
p='22px'
|
|
||||||
cursor='default'
|
|
||||||
borderRadius='15px'
|
|
||||||
position='absolute'
|
|
||||||
top='30px'
|
|
||||||
left='-10px'
|
|
||||||
>
|
|
||||||
<Grid templateColumns='1fr' gap='16px'>
|
|
||||||
{createApplicationLinks(applicationsObject.items)}
|
|
||||||
</Grid>
|
|
||||||
</MenuList>
|
|
||||||
</Menu>
|
|
||||||
</Stack>
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='4px'
|
|
||||||
align='center'
|
|
||||||
color='#fff'
|
|
||||||
fontWeight='bold'
|
|
||||||
onMouseEnter={onOpenEcommerce}
|
|
||||||
onMouseLeave={onCloseEcommerce}
|
|
||||||
cursor='pointer'
|
|
||||||
position='relative'
|
|
||||||
>
|
|
||||||
<Text fontSize='sm' color={mainText}>
|
|
||||||
Ecommerce
|
|
||||||
</Text>
|
|
||||||
<Icon
|
|
||||||
as={ChevronDown}
|
|
||||||
color={mainText}
|
|
||||||
w='14px'
|
|
||||||
h='14px'
|
|
||||||
fontWeight='2000'
|
|
||||||
/>
|
|
||||||
<Menu isOpen={isOpenEcommerce}>
|
|
||||||
<MenuList
|
|
||||||
bg={menuBg}
|
|
||||||
p='22px'
|
|
||||||
minW='350px'
|
|
||||||
cursor='default'
|
|
||||||
borderRadius='15px'
|
|
||||||
position='absolute'
|
|
||||||
top='30px'
|
|
||||||
left='-10px'
|
|
||||||
>
|
|
||||||
<Grid templateColumns='repeat(2, 1fr)' gap='16px'>
|
|
||||||
{createEcommerceLinks(ecommerceObject.items)}
|
|
||||||
</Grid>
|
|
||||||
</MenuList>
|
|
||||||
</Menu>
|
|
||||||
</Stack>
|
|
||||||
</HStack>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarContext.Provider value={{ sidebarWidth }}>
|
|
||||||
<Flex
|
|
||||||
position={navbarPosition}
|
|
||||||
top='16px'
|
|
||||||
left='50%'
|
|
||||||
transform='translate(-50%, 0px)'
|
|
||||||
background={navbarBg}
|
|
||||||
boxShadow={navbarShadow}
|
|
||||||
borderRadius='15px'
|
|
||||||
px='16px'
|
|
||||||
py='22px'
|
|
||||||
mx='auto'
|
|
||||||
width='1044px'
|
|
||||||
maxW='90%'
|
|
||||||
alignItems='center'
|
|
||||||
zIndex='3'
|
|
||||||
>
|
|
||||||
<Flex w='100%' justifyContent={{ sm: 'start', lg: 'space-between' }}>
|
|
||||||
{brand}
|
|
||||||
<Box
|
|
||||||
ms={{ base: 'auto', lg: '0px' }}
|
|
||||||
display={{ base: 'flex', lg: 'none' }}
|
|
||||||
justifyContent='center'
|
|
||||||
alignItems='center'
|
|
||||||
>
|
|
||||||
<SidebarResponsive
|
|
||||||
logo={
|
|
||||||
<Stack
|
|
||||||
direction='row'
|
|
||||||
spacing='12px'
|
|
||||||
align='center'
|
|
||||||
justify='center'
|
|
||||||
>
|
|
||||||
{colorMode === 'dark' ? (
|
|
||||||
<ArgonLogoLight w='74px' h='27px' />
|
|
||||||
) : (
|
|
||||||
<ArgonLogoDark w='74px' h='27px' />
|
|
||||||
)}
|
|
||||||
<Box
|
|
||||||
w='1px'
|
|
||||||
h='20px'
|
|
||||||
bg={colorMode === 'dark' ? 'white' : 'gray.700'}
|
|
||||||
/>
|
|
||||||
{colorMode === 'dark' ? (
|
|
||||||
<ChakraLogoLight w='82px' h='21px' />
|
|
||||||
) : (
|
|
||||||
<ChakraLogoDark w='82px' h='21px' />
|
|
||||||
)}
|
|
||||||
</Stack>
|
|
||||||
}
|
|
||||||
logoText={props.logoText}
|
|
||||||
secondary={props.secondary}
|
|
||||||
routes={routes}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
{linksAuth}
|
|
||||||
<Link href='https://www.creative-tim.com/product/argon-dashboard-chakra-pro'>
|
|
||||||
<Button
|
|
||||||
bg={bgButton}
|
|
||||||
color={colorButton}
|
|
||||||
fontSize='xs'
|
|
||||||
variant='no-effects'
|
|
||||||
px='30px'
|
|
||||||
display={{
|
|
||||||
sm: 'none',
|
|
||||||
lg: 'flex',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Free Download
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
</SidebarContext.Provider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
AuthNavbar.propTypes = {
|
|
||||||
color: PropTypes.oneOf(['primary', 'info', 'success', 'warning', 'danger']),
|
|
||||||
brandText: PropTypes.string,
|
|
||||||
};
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* Argon Dashboard Chakra PRO - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
||||||
|
|
||||||
* Designed and Coded by Simmmple & Creative Tim
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Drawer,
|
|
||||||
DrawerBody,
|
|
||||||
DrawerCloseButton,
|
|
||||||
DrawerContent,
|
|
||||||
DrawerFooter,
|
|
||||||
DrawerHeader,
|
|
||||||
Input,
|
|
||||||
useColorModeValue,
|
|
||||||
useDisclosure,
|
|
||||||
} from "@chakra-ui/react";
|
|
||||||
import { SettingsIcon } from "components/Icons/Icons";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export function SettingsBar() {
|
|
||||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
||||||
// Chakra Color Mode
|
|
||||||
const navbarIcon = useColorModeValue("gray.500", "gray.200");
|
|
||||||
const settingsRef = React.useRef();
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SettingsIcon
|
|
||||||
ref={settingsRef}
|
|
||||||
onClick={onOpen}
|
|
||||||
color={navbarIcon}
|
|
||||||
w="18px"
|
|
||||||
h="18px"
|
|
||||||
/>
|
|
||||||
<Drawer
|
|
||||||
isOpen={isOpen}
|
|
||||||
placement="right"
|
|
||||||
onClose={onClose}
|
|
||||||
finalFocusRef={settingsRef}
|
|
||||||
>
|
|
||||||
<DrawerContent>
|
|
||||||
<DrawerCloseButton />
|
|
||||||
<DrawerHeader>Create your account</DrawerHeader>
|
|
||||||
|
|
||||||
<DrawerBody>
|
|
||||||
<Input variant="main" placeholder="Type here..." />
|
|
||||||
</DrawerBody>
|
|
||||||
|
|
||||||
<DrawerFooter>
|
|
||||||
<Button variant="outline" me={3} onClick={onClose}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button colorScheme="blue">Save</Button>
|
|
||||||
</DrawerFooter>
|
|
||||||
</DrawerContent>
|
|
||||||
</Drawer>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
// src/components/PostHogProvider.js
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { initPostHog } from '../lib/posthog';
|
|
||||||
import { usePageTracking } from '../hooks/usePageTracking';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* PostHog Provider Component
|
|
||||||
* Initializes PostHog SDK and provides automatic page view tracking
|
|
||||||
*
|
|
||||||
* Usage:
|
|
||||||
* <PostHogProvider>
|
|
||||||
* <App />
|
|
||||||
* </PostHogProvider>
|
|
||||||
*/
|
|
||||||
export const PostHogProvider = ({ children }) => {
|
|
||||||
const [isInitialized, setIsInitialized] = useState(false);
|
|
||||||
|
|
||||||
// Initialize PostHog once when component mounts
|
|
||||||
useEffect(() => {
|
|
||||||
// Only run in browser
|
|
||||||
if (typeof window === 'undefined') return;
|
|
||||||
|
|
||||||
// Initialize PostHog
|
|
||||||
initPostHog();
|
|
||||||
setIsInitialized(true);
|
|
||||||
|
|
||||||
// Log initialization
|
|
||||||
if (process.env.NODE_ENV === 'development') {
|
|
||||||
console.log('✅ PostHogProvider initialized');
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Automatically track page views
|
|
||||||
usePageTracking({
|
|
||||||
enabled: isInitialized,
|
|
||||||
getProperties: (location) => {
|
|
||||||
// Add custom properties based on route
|
|
||||||
const properties = {};
|
|
||||||
|
|
||||||
// Identify page type based on path
|
|
||||||
if (location.pathname === '/home' || location.pathname === '/home/') {
|
|
||||||
properties.page_type = 'landing';
|
|
||||||
} else if (location.pathname.startsWith('/home/center')) {
|
|
||||||
properties.page_type = 'dashboard';
|
|
||||||
} else if (location.pathname.startsWith('/auth/')) {
|
|
||||||
properties.page_type = 'auth';
|
|
||||||
} else if (location.pathname.startsWith('/community')) {
|
|
||||||
properties.page_type = 'feature';
|
|
||||||
properties.feature_name = 'community';
|
|
||||||
} else if (location.pathname.startsWith('/concepts')) {
|
|
||||||
properties.page_type = 'feature';
|
|
||||||
properties.feature_name = 'concepts';
|
|
||||||
} else if (location.pathname.startsWith('/stocks')) {
|
|
||||||
properties.page_type = 'feature';
|
|
||||||
properties.feature_name = 'stocks';
|
|
||||||
} else if (location.pathname.startsWith('/limit-analyse')) {
|
|
||||||
properties.page_type = 'feature';
|
|
||||||
properties.feature_name = 'limit_analyse';
|
|
||||||
} else if (location.pathname.startsWith('/trading-simulation')) {
|
|
||||||
properties.page_type = 'feature';
|
|
||||||
properties.feature_name = 'trading_simulation';
|
|
||||||
} else if (location.pathname.startsWith('/company')) {
|
|
||||||
properties.page_type = 'detail';
|
|
||||||
properties.content_type = 'company';
|
|
||||||
} else if (location.pathname.startsWith('/event-detail')) {
|
|
||||||
properties.page_type = 'detail';
|
|
||||||
properties.content_type = 'event';
|
|
||||||
}
|
|
||||||
|
|
||||||
return properties;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Don't render children until PostHog is initialized
|
|
||||||
// This prevents tracking events before SDK is ready
|
|
||||||
if (!isInitialized) {
|
|
||||||
return children; // Or return a loading spinner
|
|
||||||
}
|
|
||||||
|
|
||||||
return <>{children}</>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PostHogProvider;
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* Argon Dashboard Chakra PRO - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
||||||
|
|
||||||
* Designed and Coded by Simmmple & Creative Tim
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { CacheProvider } from "@emotion/react";
|
|
||||||
import createCache from "@emotion/cache";
|
|
||||||
import rtl from "stylis-plugin-rtl";
|
|
||||||
// NB: A unique `key` is important for it to work!
|
|
||||||
const options = {
|
|
||||||
rtl: { key: "css-ar", stylisPlugins: [rtl] },
|
|
||||||
ltr: { key: "css-en" },
|
|
||||||
};
|
|
||||||
export function RtlProvider({ children }) {
|
|
||||||
const dir = document.documentElement.dir == "ar" ? "rtl" : "ltr";
|
|
||||||
const cache = createCache(options[dir]);
|
|
||||||
return <CacheProvider value={cache} children={children} />;
|
|
||||||
}
|
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
/*!
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
* Argon Dashboard Chakra PRO - v1.0.0
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
|
|
||||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
|
|
||||||
|
|
||||||
* Designed and Coded by Simmmple & Creative Tim
|
|
||||||
|
|
||||||
=========================================================
|
|
||||||
|
|
||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export const renderTrack = ({ style, ...props }) => {
|
|
||||||
const trackStyle = {
|
|
||||||
position: "absolute",
|
|
||||||
maxWidth: "100%",
|
|
||||||
width: 6,
|
|
||||||
transition: "opacity 200ms ease 0s",
|
|
||||||
opacity: 0,
|
|
||||||
bottom: 2,
|
|
||||||
top: 2,
|
|
||||||
borderRadius: 3,
|
|
||||||
right: 0,
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...trackStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
export const renderTrackRTL = ({ style, ...props }) => {
|
|
||||||
const trackStyle = {
|
|
||||||
position: "absolute",
|
|
||||||
width: 6,
|
|
||||||
transition: "opacity 200ms ease 0s",
|
|
||||||
opacity: 0,
|
|
||||||
bottom: 2,
|
|
||||||
top: 2,
|
|
||||||
borderRadius: 3,
|
|
||||||
right: "unset",
|
|
||||||
left: 0,
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...trackStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
export const renderThumbDark = ({ style, ...props }) => {
|
|
||||||
const thumbStyle = {
|
|
||||||
borderRadius: 15,
|
|
||||||
background: "rgba(222, 222, 222, .1)",
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...thumbStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
export const renderThumbLight = ({ style, ...props }) => {
|
|
||||||
const thumbStyle = {
|
|
||||||
borderRadius: 15,
|
|
||||||
background: "rgba(48, 48, 48, .1)",
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...thumbStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
export const renderView = ({ style, ...props }) => {
|
|
||||||
const viewStyle = {
|
|
||||||
marginRight: -25,
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...viewStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
export const renderViewRTL = ({ style, ...props }) => {
|
|
||||||
const viewStyle = {
|
|
||||||
marginRight: "unset",
|
|
||||||
marginLeft: -15,
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...viewStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const kanbanRenderTrack = ({ style, ...props }) => {
|
|
||||||
const trackStyle = {
|
|
||||||
width: 6,
|
|
||||||
transition: "opacity 200ms ease 0s",
|
|
||||||
opacity: 0,
|
|
||||||
bottom: 2,
|
|
||||||
top: 2,
|
|
||||||
borderRadius: 3,
|
|
||||||
right: 0,
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...trackStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
export const kanbanRenderThumbDark = ({ style, ...props }) => {
|
|
||||||
const thumbStyle = {
|
|
||||||
borderRadius: 15,
|
|
||||||
background: "rgba(222, 222, 222, .1)",
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...thumbStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
export const kanbanRenderThumbLight = ({ style, ...props }) => {
|
|
||||||
const thumbStyle = {
|
|
||||||
borderRadius: 15,
|
|
||||||
background: "rgba(48, 48, 48, .1)",
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...thumbStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
export const kanbanRenderView = ({ style, ...props }) => {
|
|
||||||
const viewStyle = {
|
|
||||||
position: "relative",
|
|
||||||
marginRight: -15,
|
|
||||||
};
|
|
||||||
return <div style={{ ...style, ...viewStyle }} {...props} />;
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user