Which.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React from "react";
import styled from "styled-components";

const parcas = [
  { parceiro: "- Portal do Profesor" },
  { parceiro: "- Domínio Público;" },
  { parceiro: "- Banco internacional de objetos educacionais;" },
  { parceiro: "- TV Escola;" }
];

export default function Which(props) {
  return (
    <Card>
      <link
        href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
        rel="stylesheet"
      />
      <div style={{ marginBottom: "9px" }}>
        <span>{props.title}</span>
      </div>
      <p>
        A plataforma integra os Recursos Educacionais Digitais dos principais
        portais abertos. Conheça alguns deles:
      </p>
      <ul>
        {parcas.map(item => (
          <li>{item.parceiro}</li>
        ))}
      </ul>
    </Card>
  );
}

const Card = styled.div`
  margin-bottom: 5px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 30px;
  color: #666;
  span {
    font-size: 14px;
    font-weight: bold;
  }

  ul {
    padding-left: 0 !important;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.42857143;
  }

  li {
    list-style-type: none;
    font-size: 14px;
  }

  p {
    margin: 0 0 10px;
    font-size: 15px;
  }
`;