diff options
author | Kadinsky <kandinsky454@protonmail.ch> | 2018-10-18 19:20:50 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-18 19:20:50 +0800 |
commit | 325af82217e994fdde8e904b93a76e6e3461f85a (patch) | |
tree | c51543ab9038ce0a3d42e4f0b7f6e257a2368c08 /packages/website/ts/components/documentation/tutorial_button.tsx | |
parent | ea65fa4f6560264b8aee6b4b1c9272a0efa82b12 (diff) | |
parent | 47dc384ea36fecbcf01eb9b3f20936331b43a0c6 (diff) | |
download | dexon-sol-tools-325af82217e994fdde8e904b93a76e6e3461f85a.tar dexon-sol-tools-325af82217e994fdde8e904b93a76e6e3461f85a.tar.gz dexon-sol-tools-325af82217e994fdde8e904b93a76e6e3461f85a.tar.bz2 dexon-sol-tools-325af82217e994fdde8e904b93a76e6e3461f85a.tar.lz dexon-sol-tools-325af82217e994fdde8e904b93a76e6e3461f85a.tar.xz dexon-sol-tools-325af82217e994fdde8e904b93a76e6e3461f85a.tar.zst dexon-sol-tools-325af82217e994fdde8e904b93a76e6e3461f85a.zip |
Merge pull request #1154 from 0xProject/dev-section-redesign
[BASE_BRANCH] Developer section redesign
Diffstat (limited to 'packages/website/ts/components/documentation/tutorial_button.tsx')
-rw-r--r-- | packages/website/ts/components/documentation/tutorial_button.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx new file mode 100644 index 000000000..dc00bf743 --- /dev/null +++ b/packages/website/ts/components/documentation/tutorial_button.tsx @@ -0,0 +1,59 @@ +import { colors, Link } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { Deco, Key, TutorialInfo } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +import { styled } from 'ts/style/theme'; + +export interface TutorialButtonProps { + className?: string; + translate: Translate; + tutorialInfo: TutorialInfo; +} + +const PlainTutorialButton: React.StatelessComponent<TutorialButtonProps> = ({ translate, tutorialInfo, className }) => ( + <Container className={className}> + <Link to={tutorialInfo.link.to} shouldOpenInNewTab={tutorialInfo.link.shouldOpenInNewTab}> + <div className="flex relative"> + <div className="col col-1 flex items-center sm-pr3"> + <img src={tutorialInfo.iconUrl} height={40} /> + </div> + <div className="lg-pl2 md-pl2 sm-pl3 col col-10"> + <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold"> + {translate.get(tutorialInfo.link.title as Key, Deco.Cap)} + </Text> + <Text Tag="div" fontColor={colors.grey750} fontSize="16"> + {translate.get(tutorialInfo.description as Key, Deco.Cap)} + </Text> + </div> + <div className="col col-1 flex items-center justify-end"> + <div className="right"> + <i + className="zmdi zmdi-chevron-right bold" + style={{ fontSize: 26, color: colors.lightLinkBlue }} + /> + </div> + </div> + </div> + </Link> + </Container> +); + +export const TutorialButton = styled(PlainTutorialButton)` + border-radius: 4px; + border: 1px solid ${colors.grey325}; + background-color: ${colors.white}; + &:hover { + border: 1px solid ${colors.lightLinkBlue}; + background-color: ${colors.lightestBlue}; + } + padding: 20px; + margin-bottom: 15px; +`; + +TutorialButton.defaultProps = {}; + +TutorialButton.displayName = 'TutorialButton'; |