60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import { colors, Link } from '@0x/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';
|