AboutCarouselPartner.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 "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import './AboutCarouselPartner.css'

//Image Import
import { LogoPortalDoProfessor } from "ImportImages.js";
import { LogoBioe } from "ImportImages.js";
import { LogoDominioPublico } from "ImportImages.js";
import { LogoTvEscola } from "ImportImages.js";
import { Safer } from "ImportImages.js";
import { FundacaoLemann } from "ImportImages.js";
import { InstitutoCrescer } from "ImportImages.js";
import { RedeEscola } from "ImportImages.js";
import { Educagital } from "ImportImages.js";
import { EnefAef } from "ImportImages.js";
import { Impa } from "ImportImages.js";
import { Futura } from "ImportImages.js";
import { Impulsiona } from "ImportImages.js";
import { InstPeninsula } from "ImportImages.js";
import { Telefonica } from "ImportImages.js";

function AboutCarouselPartner() {


  const items = [
    <a href="http://portaldoprofessor.mec.gov.br/index.html" rel="noreferrer" target="_blank">
      <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor" />
    </a>,
    <a href="http://objetoseducacionais2.mec.gov.br/" rel="noreferrer" target="_blank">
      <img src={LogoBioe} alt="LogoBioe" />
    </a>,
    <a href="http://www.dominiopublico.gov.br/pesquisa/PesquisaObraForm.jsp" rel="noreferrer" target="_blank">
      <img src={LogoDominioPublico} alt="LogoDominioPublico" />
    </a>,
    <a href="https://tvescola.org.br/" rel="noreferrer" target="_blank">
      <img src={LogoTvEscola} alt="LogoTvEscola" />
    </a>,
    <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank">
      <img style={{ align: "middle" }} src={FundacaoLemann} alt="FundacaoLemann" />
    </a>,
    <a href="http://new.safernet.org.br/" rel="noreferrer" target="_blank">
      <img src={Safer} alt="Safer" />
    </a>,
    <a href="http://institutocrescer.org.br/" rel="noreferrer" target="_blank">
      <img src={InstitutoCrescer} alt="InstitutoCrescer" />
    </a>,
    <a href="http://escoladigital.org.br/" rel="noreferrer" target="_blank">
      <img src={RedeEscola} alt="RedeEscola" />
    </a>,
    <a href="http://educadigital.org.br" rel="noreferrer" target="_blank">
      <img src={Educagital} alt="Educagital" />
    </a>,
    <a href="http://www.aefbrasil.org.br" rel="noreferrer" target="_blank">
      <img style={{ filter: "grayscale(1)" }} src={EnefAef} alt="EnefAef" />
    </a>,
    <a href="https://impa.br/" rel="noreferrer" target="_blank">
      <img src={Impa} alt="Impa" />
    </a>,
    <a href="http://futura.org.br/" rel="noreferrer" target="_blank">
      <img src={Futura} alt="Futura" />
    </a>,
    <a href="http://impulsiona.org.br/" rel="noreferrer" target="_blank">
      <img src={Impulsiona} alt="Impulsiona" />
    </a>,
    <a href="http://www.institutopeninsula.org.br/" rel="noreferrer" target="_blank">
      <img src={InstPeninsula} alt="InstPeninsula" />
    </a>,
    <a href="http://fundacaotelefonica.org.br/" rel="noreferrer" target="_blank">
      <img src={Telefonica} alt="Telefonica" />
    </a>
  ]
  const partnerPerPage = (() => {
    var pageWidth = window.innerWidth
    if (pageWidth >= 1200) {
      return 3
    }
    else {
      return 1
    }
  })
  var rows = []
  var partner_per_page = partnerPerPage()
  for(let i = 0; i < 15/partner_per_page; i++){
    rows.push(items.slice(i*partner_per_page, partner_per_page*(i+1)))
  }

  return (
    <div id="Partner-Caroussel">
      <Carousel
        showThumbs={false}
        showStatus={false}
        showIndicators={true}
        interval={4500}
        transitionTime={1000}
        autoPlay
        infiniteLoop

      >
        {
          rows.map((row, index) => (
            <div key={(index + 1)} style={{ display: 'inline-flex', paddingTop: 100 }}>
              {
                row.map((partner, index2) => (
                  <div
                    key={index + (index2 * 10)}
                    style={{ marginLeft: 10, display: 'flex', maxWidth: 300 }}
                  >
                    {
                      partner
                    }
                  </div>
                ))
              }
            </div>
          ))
        }
      </Carousel>
    </div>

  );
}

export default AboutCarouselPartner;