import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, TutorialInfo } from 'ts/types'; import { Translate } from 'ts/utils/translate'; export interface TutorialButtonProps { translate: Translate; tutorialInfo: TutorialInfo; } export interface TutorialButtonState { isHovering: boolean; } export class TutorialButton extends React.Component { constructor(props: TutorialButtonProps) { super(props); this.state = { isHovering: false, }; } public render(): React.ReactNode { return (
{this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)} {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)}
); } private _onHover(_event: React.FormEvent): void { if (this.state.isHovering) { return; } this.setState({ isHovering: true, }); } private _onHoverOff(): void { this.setState({ isHovering: false, }); } }