diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components/call_to_action.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/call_to_action.tsx | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/call_to_action.tsx b/packages/dev-tools-pages/ts/components/call_to_action.tsx new file mode 100644 index 000000000..3805a7c8c --- /dev/null +++ b/packages/dev-tools-pages/ts/components/call_to_action.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { ContextInterface, ThemeContext } from 'ts/context'; + +import { Button } from './button'; + +const CallToAction: React.StatelessComponent<ContextInterface> = ({ children }) => ( + <ThemeContext.Consumer> + {({ docLink }: ContextInterface) => ( + <StyledCallToAction> + <CallToActionContainer> + <Button as="a" href={docLink} target="_blank" large={true}> + Read the Docs + </Button> + </CallToActionContainer> + {children} + </StyledCallToAction> + )} + </ThemeContext.Consumer> +); + +const StyledCallToAction = styled.section` + text-align: center; + padding-top: 0; + padding-bottom: 1rem; + padding-left: 2.5rem; + padding-right: 2.5rem; + min-height: min-content; + max-height: 37.5rem; + height: 20vh; + position: relative; +`; + +const CallToActionContainer = styled.div` + margin: 0 auto; + max-width: 590px; +`; + +export { CallToAction }; |