Avatar - Adding custom color and style to avatar component

This commit is contained in:
Alex Windett 2016-10-28 11:21:46 +01:00
parent 8c147e4127
commit 80c596db66
3 changed files with 20 additions and 8 deletions

View File

@ -5,6 +5,7 @@ const React = require('react');
const styles = require('./style.css');
const Avatar = ({
color,
image,
name,
className,
@ -16,6 +17,11 @@ const Avatar = ({
styles.avatar
);
style = {
...style,
background: color
}
const fill = () => {
if ( image ) {
return (
@ -23,18 +29,24 @@ const Avatar = ({
alt={name}
className={styles.picture}
src={image}
style={style}
/>
);
} else {
const letter = name.split('')[0];
return (
<p className={styles.letter}>{letter}</p>
<p
className={styles.letter}
style={style}
>
{letter}
</p>
);
}
}
return (
<div className={cn}>
<div className={cn} style={style}>
{fill()}
</div>
);
@ -42,6 +54,7 @@ const Avatar = ({
Avatar.propTypes = {
className: React.PropTypes.string,
color: React.PropTypes.string,
image: React.PropTypes.string,
name: React.PropTypes.string,
style: React.PropTypes.object

View File

@ -16,10 +16,10 @@ nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Avatar name='Alex' />
<Avatar color='#35a8c0' name='Alex' />
</Column>
<Column>
<Avatar name='Alex' image='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
<Avatar color='#ef6176' name='Alex' image='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
</Column>
</Row>
</Base>
@ -34,8 +34,8 @@ const Avatar = require('ui/avatar');
module.exports = () => {
return (
<Avatar name='Alex' />
<Avatar name='Alex' image='path/to/image.png' />
<Avatar color='#35a8c0' name='Alex' />
<Avatar color='#ef6176' name='Alex' image='path/to/image.png' />
);
}
```

View File

@ -1,5 +1,4 @@
.avatar {
background: red;
border-radius: 50%;
height: remCalc(50);
overflow: hidden;