components stacking-layout.tsx

0% Statements 0/7

100% Branches 0/0

0% Functions 0/1

0% Lines 0/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Screen } from '@components/screen';
import { Box, Flex } from '@stacks/ui';
import React, { FC } from 'react';
 
type StackingComponents = 'intro' | 'stackingInfoPanel' | 'stackingForm';
 
type StackingLayoutProps = Record<StackingComponents, JSX.Element>;
 
export const StackingLayout: FC<StackingLayoutProps> = props => {
  const { intro, stackingInfoPanel, stackingForm } = props;
  return (
    <Screen pt="80px" mb="extra-loose">
      <Flex
        flexDirection={['column-reverse', 'column-reverse', 'row']}
        justifyContent="space-between"
      >
        <Box maxWidth={[null, null, '544px']} mr={[null, null, 'extra-loose']}>
          {intro}
          <Box display={['block', null, 'none']} mt={['extra-loose', null, null, null, 'base']}>
            {stackingInfoPanel}
          </Box>
          {stackingForm}
        </Box>
        <Box display={['none', null, 'block']}>{stackingInfoPanel}</Box>
      </Flex>
    </Screen>
  );
};