mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
f0e713b877
* UI customizations: new features Fixes #2905 * colors for graphs * introduce env variable * colors for topbar, stats, selected state and tabs * fix build * fix validator * refactor link.primary.hover color token * refactor selected colors * update styles for switch and fix some color tokens * change color for selectable controls * icon color tokens refactoring * UI customizations: new features Fixes #2905 * test for common components * tweaks * migrate from color-mode-hex cookie to color-theme cookie * clean up * update screenshots * more screenshot updates * update default color of chart line * update envs for mega eth
41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import type { BoxProps, StackProps, TabsContentProps } from '@chakra-ui/react';
|
|
import { Box, Code, Grid, HStack, VStack } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import { Heading } from 'toolkit/chakra/heading';
|
|
import { TabsContent } from 'toolkit/chakra/tabs';
|
|
|
|
export const Container = (props: TabsContentProps) => <TabsContent display="flex" flexDirection="column" gap={ 6 } w="100%" { ...props }/>;
|
|
export const Section = (props: BoxProps) => <Box { ...props } as="section"/>;
|
|
export const SectionHeader = ({ children }: { children: React.ReactNode }) => <Heading level="2" mb={ 4 }>{ children }</Heading>;
|
|
export const SectionSubHeader = ({ children }: { children: React.ReactNode }) => <Heading level="3" mb={ 3 } _notFirst={{ mt: 4 }}>{ children }</Heading>;
|
|
export const SamplesStack = ({ children }: { children: React.ReactNode }) => (
|
|
<Grid
|
|
rowGap={ 4 }
|
|
columnGap={ 8 }
|
|
gridTemplateColumns="fit-content(100%) 1fr"
|
|
justifyItems="flex-start"
|
|
alignItems="flex-start"
|
|
>
|
|
{ children }
|
|
</Grid>
|
|
);
|
|
export const Sample = ({ children, label, vertical, ...props }: { children: React.ReactNode; vertical?: boolean; label?: string } & StackProps) => {
|
|
const Stack = vertical ? VStack : HStack;
|
|
return (
|
|
<>
|
|
{ label && <Code w="fit-content">{ label }</Code> }
|
|
<Stack
|
|
gap={ 3 }
|
|
whiteSpace="pre-wrap"
|
|
flexWrap="wrap"
|
|
columnSpan={ label ? '1' : '2' }
|
|
alignItems={ vertical ? 'flex-start' : 'center' }
|
|
{ ...props }
|
|
>
|
|
{ children }
|
|
</Stack>
|
|
</>
|
|
);
|
|
};
|