ohansemmanuel

<section class="card">
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>

ohansemmanuel

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;

ohansemmanuel

.card {
  background-color: #fff;
  min-width: 100%;
  min-height: 200px;
}

ohansemmanuel

.card--content {
  background-color: #e74c3c;
  min-width: 200px;
  margin: 5px;
}

ohansemmanuel

.facebook {
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238,238,238 ,1);
  border-radius: 5px;
  background: rgba(59,89,153 ,1);
  color: #fff;
  font-size: 0.9em;
  box-shadow: 5px 10px 20px -20px rgba(59,89,153 ,1)

ohansemmanuel

export function updateCardTextReducer(cardId, event) {
  event.persist();
  return function updateCard(state) {
    const {cards, cardIds} = state;
    const index = cardIds.indexOf(cardId);
    const card = getCardById(cardId, cards);
    const newCardUpdatedText = {
            ...card,
            text: event.target.value
      };

ohansemmanuel

export const DEFAULT_STATE = {
      cards: [
        {
          id: 1234,
          text: defaultTextForCards,
          isActiveCard: true
        },
        {
          id: '12d3x4',
          text: defaultTextForCards,

ohansemmanuel

export function getCardById (id, cards)  {
    const cardArr = cards.filter(card => {
      return card.id === id; 
    });
    return cardArr[0];   
}

ohansemmanuel

// An example of an action 
const action = { 
  type: "WITHDRAW_MONEY",
  amount: "$10,000"
}

// A basic reducer. Takes in two parameters: state, and action. 
const reducer = (state, action) => {
  return state;
};

ohansemmanuel

.twitter {
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238,238,238 ,1);
  border-radius: 5px;
  color: rgba(117,117,117 ,1);
  box-shadow: 5px 10px 20px -20px rgba(85,172,238 ,1);
}
.twitter li {