1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-13 20:08:56 +00:00

Create coin link styled components for aside panel

This commit is contained in:
Vasek Mlejnsky 2018-08-14 21:58:07 +02:00
parent 82cbdcffdf
commit 7497c78a39
6 changed files with 162 additions and 0 deletions

View File

@ -0,0 +1,52 @@
import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'components/common/Icon';
import colors from 'config/colors';
import { FONT_SIZE, TRANSITION_TIME } from 'config/variables';
import { coinProp } from './common';
import CoinLogo from './CoinLogo';
const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
cursor: pointer;
font-size: ${FONT_SIZE.BASE};
transition: background-color ${TRANSITION_TIME.BASE}, color ${TRANSITION_TIME.BASE};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
`;
const CoinLink = ({ coin, iconRight }) => (
<Wrapper>
<CoinLogo
coinImg={coin.img}
text={coin.name}
/>
{iconRight ? (
<Icon
icon={iconRight.type}
color={iconRight.color}
/>
) : null}
</Wrapper>
);
CoinLink.propTypes = {
...coinProp,
iconRight: PropTypes.shape({
type: PropTypes.string.isRequired,
color: PropTypes.string.isRequired,
}),
};
export default CoinLink;

View File

@ -0,0 +1,44 @@
import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import colors from 'config/colors';
import { ICON_SIZE } from 'config/variables';
const Wrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
p {
color: ${colors.TEXT_PRIMARY};
}
`;
const Logo = styled.div`
height: ${ICON_SIZE.BASE};
width: ${ICON_SIZE.BASE};
margin-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: auto ${ICON_SIZE.BASE};
background-image: url('images/${props => props.coinImg}-logo.png');
`;
const CoinLogo = ({ coinImg, text }) => (
<Wrapper>
<Logo
coinImg={coinImg}
/>
<p>{text}</p>
</Wrapper>
);
CoinLogo.propTypes = {
coinImg: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
};
export default CoinLogo

View File

@ -0,0 +1,32 @@
import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import ICONS from 'constants/icons';
import colors from 'config/colors';
import { coinProp } from './common';
import CoinLink from './CoinLink';
const A = styled.a`
display: block;
`;
const ExternalCoinLink = ({ coin, url }) => (
<A href={url}>
<CoinLink
coin={coin}
iconRight={{
type: ICONS.REDIRECT,
color: colors.TEXT_SECONDARY,
}}
/>
</A>
);
ExternalCoinLink.propTypes = {
...coinProp,
url: PropTypes.string,
};
export default ExternalCoinLink;

View File

@ -0,0 +1,24 @@
import styled from 'styled-components';
import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import { coinProp } from './common';
import CoinLink from './CoinLink';
const Wrapper = styled(NavLink)`
display: block;
`;
const WalletCoinLink = ({ coin, url }) => (
<Wrapper to={url}>
<CoinLink coin={coin}/>
</Wrapper>
);
WalletCoinLink.propTypes = {
...coinProp,
url: PropTypes.string.isRequired,
};
export default WalletCoinLink;

View File

@ -0,0 +1,8 @@
import PropTypes from 'prop-types';
export const coinProp = {
coin: PropTypes.shape({
img: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
}).isRequired,
};

View File

@ -0,0 +1,2 @@
export { default as ExternalCoinLink } from './ExternalCoinLink';
export { default as WalletCoinLink } from './WalletCoinLink';