Permalink
Browse files

Step 1: Create '~/components/Card.jsx' component and refactor 'Static…

…MiniDashboard.jsx' to use it.
  • Loading branch information...
embengineering committed May 20, 2016
1 parent e3ffb5b commit 80ce25506d71929e1d752e6d64d11c41094f8a5d
Showing with 16 additions and 14 deletions.
  1. +13 −0 src/components/Card.jsx
  2. +3 −14 src/components/StaticMiniDashboard.jsx
@@ -0,0 +1,13 @@
import React from 'react';
const Card = ({className, imgUrl, title, msg}) => (
<div className={className}>
<div className="mdl-card__title"
style={{background: 'url(' + imgUrl + ') center/cover'}}>
<h2 className="mdl-card__title-text">{title}</h2>
</div>
<div className="mdl-card__supporting-text">{msg}</div>
</div>
);
export default Card;
@@ -1,26 +1,15 @@
import React from 'react';
import Card from '../components/Card.jsx';
export default ({ welcomeMsg, cards }) => (
<div className="mdl-layout__container">
<div className="mdl-layout">
<div className="mdl-layout mdl-color--grey-100">
<div className="dashboard-wrapper">
<div className="welcome-card">
<div className="mdl-card__title"
style={{background: 'url(' + welcomeMsg.imgUrl + ') center/cover'}}>
<h2 className="mdl-card__title-text">{welcomeMsg.title}</h2>
</div>
<div className="mdl-card__supporting-text">{welcomeMsg.msg}</div>
</div>
<Card className="welcome-card" {...welcomeMsg} />
<div className="cards-wrapper">
{cards.map((card, index) => (
<div key={index} className="card-item">
<div className="mdl-card__title"
style={{background: 'url(' + card.imgUrl + ') center/cover'}}>
<h2 className="mdl-card__title-text">{card.title}</h2>
</div>
<div className="mdl-card__supporting-text">{card.msg}</div>
</div>
<Card key={index} className="card-item" {...card} />
))}
</div>
</div>

0 comments on commit 80ce255

Please sign in to comment.