garima33

const HtmlWebPackPlugin = require("html-webpack-plugin");

var path= require('path');

// this will create index.html file containing script
// source in dist folder dynamically
const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",

garima33

// this is the rollup plugin that adds babel as a compilation stage.
import babel from 'rollup-plugin-babel';

//Convert CommonJS modules to ES6, 
// so they can be included in a Rollup bundle
import commonjs from 'rollup-plugin-commonjs'

// Locate modules using the Node resolution algorithm,
// for using third party modules in node_modules
import nodeResolve from 'rollup-plugin-node-resolve'

garima33

import React from "react";
import { Data, Label, Flex, CardContainer } from "../styled-components";

export class Card extends React.Component {
  render() {
    const { cardData } = this.props;
    return (
      <CardContainer>
      // justify we are passing as props 
        <Flex justify="space-between">

garima33

import styled, { css } from "react-emotion";

export const Flex = styled("div")`
  display: flex;
  flex-wrap: wrap;
// all the below styles can be customized using prop values
  flex-direction: ${props => props.direction || "row"};
  justify-content: ${props => props.justify || "space-between"};
  font-family: ${props => props.font || "roboto"};
  font-size: ${props => props.fontSize || "medium"};

garima33

import React, { Component } from "react";
import { Flex, DataWrapper } from "./styled-components/index";
import { data } from "./utils/data";
import { Card } from "./components/Card";
import "./App.css";

class App extends Component {
  render() {
    let items = data.map((item, index) => {
      return (