on 59995bf help sign in
43 lines 1.0 kB history raw
1import React from 'react';
2import cn from 'classnames';
3import { Flex } from 'indigo-react';
5import Footer from './Footer';
6import useBreakpoints from 'lib/useBreakpoints';
8// View is a top-level component that all Views must render to inherit styling
9function View({ className, children, inset = false, full = false, ...rest }) {
10 const isMobile = useBreakpoints([true, false, false]);
11 const shouldInset = inset && !isMobile;
13 return (
14 <Flex
15 col
16 justify="between"
17 className={cn(
18 'minh-100 ph5',
19 {
20 mw1: !full,
21 'mw2 ph9-md ph10-lg': full,
22 },
23 className
24 )}
25 {...rest}>
26 <Flex.Item
27 className={cn('pb5', {
28 pt10: shouldInset,
29 pt5: !shouldInset,
30 })}>
31 {children}
32 </Flex.Item>
33 <Footer.Target />
34 </Flex>
35 );
38// View.Full is sugar for <View full /> to help with readability
39View.Full = function FullView(props) {
40 return <View full {...props} />;
41};
43export default View;