diff options
author | Fabio Berger <me@fabioberger.com> | 2018-01-28 17:29:15 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-01-28 17:29:15 +0800 |
commit | dd9f5adc2e771f3602461ae708d44536f146b902 (patch) | |
tree | f5d11f3bc288a9711af4ff3c5091f78a8ccc8eb4 /packages/website/ts/components/top_bar/top_bar_menu_item.tsx | |
parent | 748d805a32ad7a1ee5f5a212d383b95460d3d828 (diff) | |
download | dexon-sol-tools-dd9f5adc2e771f3602461ae708d44536f146b902.tar dexon-sol-tools-dd9f5adc2e771f3602461ae708d44536f146b902.tar.gz dexon-sol-tools-dd9f5adc2e771f3602461ae708d44536f146b902.tar.bz2 dexon-sol-tools-dd9f5adc2e771f3602461ae708d44536f146b902.tar.lz dexon-sol-tools-dd9f5adc2e771f3602461ae708d44536f146b902.tar.xz dexon-sol-tools-dd9f5adc2e771f3602461ae708d44536f146b902.tar.zst dexon-sol-tools-dd9f5adc2e771f3602461ae708d44536f146b902.zip |
Initial Ledger support implementation
Diffstat (limited to 'packages/website/ts/components/top_bar/top_bar_menu_item.tsx')
-rw-r--r-- | packages/website/ts/components/top_bar/top_bar_menu_item.tsx | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx new file mode 100644 index 000000000..96ee86142 --- /dev/null +++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx @@ -0,0 +1,52 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { colors } from 'ts/utils/colors'; + +const DEFAULT_STYLE = { + color: colors.darkestGrey, +}; + +interface TopBarMenuItemProps { + title: string; + path?: string; + isPrimary?: boolean; + style?: React.CSSProperties; + className?: string; + isNightVersion?: boolean; +} + +interface TopBarMenuItemState {} + +export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarMenuItemState> { + public static defaultProps: Partial<TopBarMenuItemProps> = { + isPrimary: false, + style: DEFAULT_STYLE, + className: '', + isNightVersion: false, + }; + public render() { + const primaryStyles = this.props.isPrimary + ? { + borderRadius: 4, + border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`, + marginTop: 15, + paddingLeft: 9, + paddingRight: 9, + width: 77, + } + : {}; + const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color; + const linkColor = _.isUndefined(menuItemColor) ? colors.darkestGrey : menuItemColor; + return ( + <div + className={`center ${this.props.className}`} + style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }} + > + <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}> + {this.props.title} + </Link> + </div> + ); + } +} |