mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
e6e83ee4e7
* envs and feature setup * home page layout * cross-chain txs page * cross-chain transfers page * cross-chain transfers on tx page * cross-chain messages on tx page * cross-chain tx page * cross-chain tx details token transfers * stats and counters for lists * migrate to new API version * add swagger * mobile lists * placeholder views on address page * tests * fix adaptive tabs initial state when there is only one tab in the list * tweaks * bug fixes * fix tests * update screenshots * migrate to new api version * add chain label tooltip, copy button to txs in lists and same address highlight * list views on address page * fix tests * fix links to current address in the list views * update tooltips * update tables layout * review fixes * fix spelling * update screenshots * update screenshot
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import type { JsxStyleProps } from '@chakra-ui/react';
|
|
import { Grid, GridItem } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { CollapsibleDetailsProps } from 'toolkit/chakra/collapsible';
|
|
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
|
|
import { Hint } from 'toolkit/components/Hint/Hint';
|
|
import { TruncatedText } from 'toolkit/components/truncation/TruncatedText';
|
|
|
|
interface ContainerProps extends CollapsibleDetailsProps {}
|
|
|
|
export const Container = ({ children, ...rest }: ContainerProps) => {
|
|
return (
|
|
<CollapsibleDetails noScroll variant="secondary" display="block" textStyle={ undefined } fontSize="sm" { ...rest }>
|
|
<Grid
|
|
gridTemplateColumns="max-content minmax(0px, 1fr)"
|
|
alignItems="start"
|
|
textStyle="sm"
|
|
bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
|
|
w="100%"
|
|
p={{ base: 2, lg: 3 }}
|
|
mt={ 1 }
|
|
columnGap={ 3 }
|
|
rowGap={ 4 }
|
|
borderBottomRightRadius="base"
|
|
borderBottomLeftRadius="base"
|
|
>
|
|
{ children }
|
|
</Grid>
|
|
</CollapsibleDetails>
|
|
);
|
|
};
|
|
|
|
interface RowProps extends JsxStyleProps {
|
|
label: string;
|
|
hint?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Row = ({ label, hint, children, ...rest }: RowProps) => {
|
|
return (
|
|
<>
|
|
<GridItem color="text.secondary" display="flex" alignItems="center" { ...rest }>
|
|
{ hint && <Hint label={ hint } boxSize={ 4 } mr={ 1 }/> }
|
|
<TruncatedText text={ label } maxW={{ base: '130px', lg: 'unset' }}/>
|
|
</GridItem>
|
|
{ children }
|
|
</>
|
|
);
|
|
};
|