mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
af3fd7840c
* Hero banner: move 'explorer' to new ENV Resolves #3290 * [skip ci] update docs
103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
// we use custom heading size for hero banner
|
|
// eslint-disable-next-line no-restricted-imports
|
|
import { Box, Flex, Heading } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import RewardsButton from 'ui/rewards/RewardsButton';
|
|
import AdBanner from 'ui/shared/ad/AdBanner';
|
|
import SearchBar from 'ui/snippets/searchBar/SearchBarDesktop';
|
|
import SearchBarMobile from 'ui/snippets/searchBar/SearchBarMobile';
|
|
import UserProfileDesktop from 'ui/snippets/user/UserProfileDesktop';
|
|
|
|
export const BACKGROUND_DEFAULT =
|
|
'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
|
|
const TEXT_COLOR_DEFAULT = 'white';
|
|
const BORDER_DEFAULT = 'none';
|
|
|
|
const HeroBanner = () => {
|
|
|
|
const isMobile = useIsMobile();
|
|
|
|
const background = {
|
|
_light:
|
|
config.UI.homepage.heroBanner?.background?.[0] ||
|
|
BACKGROUND_DEFAULT,
|
|
_dark:
|
|
config.UI.homepage.heroBanner?.background?.[1] ||
|
|
config.UI.homepage.heroBanner?.background?.[0] ||
|
|
BACKGROUND_DEFAULT,
|
|
};
|
|
|
|
const textColor = {
|
|
_light:
|
|
// light mode
|
|
config.UI.homepage.heroBanner?.text_color?.[0] ||
|
|
TEXT_COLOR_DEFAULT,
|
|
// dark mode
|
|
_dark:
|
|
config.UI.homepage.heroBanner?.text_color?.[1] ||
|
|
config.UI.homepage.heroBanner?.text_color?.[0] ||
|
|
TEXT_COLOR_DEFAULT,
|
|
};
|
|
|
|
const border = {
|
|
_light:
|
|
config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
|
|
_dark:
|
|
config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
|
|
};
|
|
|
|
const text = (() => {
|
|
if (config.UI.homepage.heroBanner?.text) {
|
|
return config.UI.homepage.heroBanner.text;
|
|
}
|
|
|
|
return config.meta.seo.enhancedDataEnabled ?
|
|
`${ config.chain.name } blockchain explorer` :
|
|
`${ config.chain.name } explorer`;
|
|
})();
|
|
|
|
return (
|
|
<Flex
|
|
w="100%"
|
|
background={ background }
|
|
border={ border }
|
|
borderRadius="md"
|
|
p={{ base: 4, lg: 8 }}
|
|
columnGap={ 8 }
|
|
alignItems="center"
|
|
>
|
|
<Box flexGrow={ 1 }>
|
|
<Flex mb={{ base: 2, lg: 3 }} justifyContent="space-between" alignItems="center" columnGap={ 2 }>
|
|
<Heading
|
|
as="h1"
|
|
fontSize={{ base: '18px', lg: '30px' }}
|
|
lineHeight={{ base: '24px', lg: '36px' }}
|
|
fontWeight={{ base: 500, lg: 700 }}
|
|
color={ textColor }
|
|
>
|
|
{ text }
|
|
</Heading>
|
|
{ config.UI.navigation.layout === 'vertical' && (
|
|
<Box display={{ base: 'none', lg: 'flex' }} gap={ 2 }>
|
|
{ config.features.rewards.isEnabled && <RewardsButton variant="hero"/> }
|
|
<UserProfileDesktop buttonVariant="hero"/>
|
|
</Box>
|
|
) }
|
|
</Flex>
|
|
<Box display={{ base: 'flex', lg: 'none' }}>
|
|
<SearchBarMobile isHeroBanner/>
|
|
</Box>
|
|
<Box display={{ base: 'none', lg: 'flex' }}>
|
|
<SearchBar isHeroBanner/>
|
|
</Box>
|
|
</Box>
|
|
{ !isMobile && <AdBanner format="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden"/> }
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default React.memo(HeroBanner);
|