All files / app/pages/home home-layout.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Screen } from '@components/screen';
import { Flex, Box } from '@stacks/ui';
import React, { FC } from 'react';
 
interface HomeLayoutProps {
  balanceCard: JSX.Element;
  transactionList: JSX.Element;
  stackingCard: JSX.Element | null;
  stackingRewardCard: JSX.Element | null;
}
 
export const HomeLayout: FC<HomeLayoutProps> = props => {
  const { balanceCard, transactionList, stackingCard, stackingRewardCard } = props;
 
  return (
    <Screen pt="120px" mb="extra-loose">
      {balanceCard}
      <Flex
        flexDirection={['column', 'column', 'row']}
        justifyContent={[null, null, 'space-between']}
      >
        <Box
          mt="extra-loose"
          maxWidth={[null, null, '720px']}
          flexGrow={1}
          mr={[null, null, 'extra-loose', '72px']}
        >
          {transactionList}
        </Box>
        <Flex flexDirection="column" width={[null, null, '360px', '420px']} mb="extra-loose">
          <Box position="sticky" top="40px">
            {stackingCard}
            {stackingRewardCard}
          </Box>
        </Flex>
      </Flex>
    </Screen>
  );
};