diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 05:45:29 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-06 18:53:46 +0800 |
commit | 3dcb874e08389f82d66e8b3458863509ec525a02 (patch) | |
tree | e818a763fb685903a3d25665f6e287169ac88e3b /packages/website/ts/pages/instant/action_link.tsx | |
parent | 6b952c4236b6268537afc6169ac003ffa089f6cd (diff) | |
download | dexon-sol-tools-3dcb874e08389f82d66e8b3458863509ec525a02.tar dexon-sol-tools-3dcb874e08389f82d66e8b3458863509ec525a02.tar.gz dexon-sol-tools-3dcb874e08389f82d66e8b3458863509ec525a02.tar.bz2 dexon-sol-tools-3dcb874e08389f82d66e8b3458863509ec525a02.tar.lz dexon-sol-tools-3dcb874e08389f82d66e8b3458863509ec525a02.tar.xz dexon-sol-tools-3dcb874e08389f82d66e8b3458863509ec525a02.tar.zst dexon-sol-tools-3dcb874e08389f82d66e8b3458863509ec525a02.zip |
feat: factor out ActionLink component from features
Diffstat (limited to 'packages/website/ts/pages/instant/action_link.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/action_link.tsx | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/packages/website/ts/pages/instant/action_link.tsx b/packages/website/ts/pages/instant/action_link.tsx new file mode 100644 index 000000000..8a0bf24ff --- /dev/null +++ b/packages/website/ts/pages/instant/action_link.tsx @@ -0,0 +1,51 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; +import { utils } from 'ts/utils/utils'; + +export interface ActionLinkProps { + displayText: string; + linkSrc?: string; + onClick?: () => void; + fontSize?: number; + color?: string; + className?: string; +} + +export class ActionLink extends React.Component<ActionLinkProps> { + public static defaultProps = { + fontSize: 16, + color: colors.white, + }; + public render(): React.ReactNode { + const { displayText, fontSize, color, className } = this.props; + return ( + <Container + className={`flex items-center ${className}`} + marginRight="32px" + onClick={this._handleClick} + cursor="pointer" + > + <Container> + <Text fontSize="16px" fontColor={color}> + {displayText} + </Text> + </Container> + <Container paddingTop="1px" paddingLeft="6px"> + <i className="zmdi zmdi-chevron-right bold" style={{ fontSize, color }} /> + </Container> + </Container> + ); + } + + private _handleClick = (event: React.MouseEvent<HTMLElement>) => { + if (!_.isUndefined(this.props.onClick)) { + this.props.onClick(); + } else if (!_.isUndefined(this.props.linkSrc)) { + utils.openUrl(this.props.linkSrc); + } + }; +} |