V0.2 Repaginada com uma Api

matheus1994santos · Aug 29, 2022 · 612c35b · 612c35b
1 parent c01842c
commit 612c35b
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 136 deletions.
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import Banner from './banner/Banner';
 import styles from './Header.module.css'
 import Marca from './Logo/Marca';
 import Menu from './menu/Menu';
@@ -11,7 +10,6 @@ const Header = () => {
         <Marca/>
         <Menu/>
       </header>
-      <Banner/>
     </section>
   )
 }

diff --git a/src/components/Header/banner/Banner.js b/src/components/Header/banner/Banner.js
@@ -1,17 +1,32 @@
 import React from 'react'
 import styles from './Banner.module.css'
-import NightSky from '../../../images/NightSky.jpeg'
+import NightSky from '../../../images/Banner/NightSky.jpeg'
+import Hubble from '../../../images/Banner/Hubble.jpg'
+import HubbleJupiter from '../../../images/Banner/HubbleJupiter.jpg'
 
 const Banner = () => {
   return (
       <div className={styles.Banner}>
-        <a>&#10094;</a>
         <div className={styles.mySlides}>
           <div>1 / 3</div>
           <img src={NightSky}/>
           <div>Nome</div>
         </div>
-        <a>&#10095;</a>
+
+        <div className={styles.mySlides}>
+          <div>2 / 3</div>
+          <img src={Hubble}/>
+          <div>Nome</div>
+        </div>
+
+        <div className={styles.mySlides}>
+          <div>3 / 3</div>
+          <img src={HubbleJupiter}/>
+          <div>Nome</div>
+        </div>
+
+        <a className={styles.Ant}>&#10094;</a>
+        <a className={styles.Next}>&#10095;</a>
       </div>
   )
 }

diff --git a/src/components/Header/banner/Banner.module.css b/src/components/Header/banner/Banner.module.css
@@ -7,15 +7,32 @@
     position: relative;
     margin: auto;
     height: 600px;
-    background-color: rgb(36, 36, 36);
+    background-color: rgba(36, 36, 36, 0.915);
     color: whitesmoke;
+    position:relative;
 }
 
 div.Banner > div.mySlides{
-
+    position: absolute;
+    left: auto;
+    margin: 0 2%;
 }
 
 div.Banner > div.mySlides > img{
     height: 480px;
     max-width:1000px;
+    width: 100%;
+    margin: auto;
+}
+
+div.Banner > a.Ant{
+    position: absolute;
+    left: 20%;
+    margin: 0 4%;
 }
+
+div.Banner > a.Next{
+    position: absolute;
+    right: 20%;
+    margin: 0 4%;
+}
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
@@ -1,113 +1,41 @@
 import React from 'react'
 import styles from './Main.module.css';
-import CrewNews from '../../images/00.main/CrewNews.jpg'
-import Perseverance from '../../images/00.main/Perseverance.jpg'
-import China from '../../images/00.main/China.jpg'
 
 const Main = () => {
-  return (
-    <main>
-      <section className={styles.sec1}>
-          <h2>NASA convida mídia para o lançamento da A missão SpaceX Crew-5</h2>
-          <div>
-            <img src={CrewNews}/>
-            <h5>
-            A missão SpaceX Crew-5 da NASA levará dois astronautas da NASA, Nicole Mann e
-            o piloto Josh Cassada, juntamente com o astronauta koichi Wakata, da JAXA
-            (Agência de Exploração Aeroespacial do Japão), e a cosmonauta da Roscosmos,
-            Anna Kikina. Na foto da esquerda estão Anna Kikina, Josh Cassada, Nicole Mann
-            e Koichi Wakata.
-            <i> Créditos: NASA</i>
-            </h5>
-          </div> 
-        <article>
-          <p>A acreditação da mídia está agora aberta para o lançamento da quinta
-             espaçonave SpaceX Dragon e do foguete Falcon 9 que levarão astronautas 
-             à Estação Espacial Internacional para uma missão de expedição científica
-            como parte do Programa de Tripulação Comercial da NASA.</p>
-          <p>A data de lançamento mais antiga da missão é quinta-feira, 29 de
-             setembro, do Complexo de Lançamento 39A no Centro Espacial Kennedy da 
-             NASA, na Flórida.</p>
-          <p>
-          O lançamento da Crew-5 levará dois astronautas da NASA, Nicole Mann e o 
-          piloto Josh Cassada, juntamente com o astronauta Koichi Wakata e a
-          cosmonauta da Roscosmos Anna Kikina, que servirão como especialistas da 
-          missão. Este é o primeiro voo espacial para Mann, Cassada e Kikina. É a 
-          quinta viagem para Wakata.
-          </p>
-          <p>
-          Após um período de entrega da tripulação, astronautas da missão SpaceX Crew-4 da NASA estão programados para retornar à Terra em outubro a bordo de sua SpaceX Dragon Freedom.
-          </p>
-        </article>
-      </section>
-
-      <section className={styles.sec1}>
-          <h2>O Rover Perseverance Agora Consegue Escolher Seus Próprios Alvos</h2>
-          <div>
-            <img src={Perseverance}/>
-            <h5>
-              <b>Fonte: </b>
-              <a>https://spacetoday.com.br/o-rover-perseverance-agora-consegue-escolher-seus-proprios-alvos/</a>
-            </h5>
-          </div> 
-        <article>
-          <p>Para fazer isso, o Perseverance usa um pacote de software que permite a
-            seleção de alvos e que é chamado de Autonomous Exploration for Gathering
-            Increased Science, ou AEGIS, e foi desenvolvido pelo pessoal do JPL para
-           missões de rovers anteriores e que foi adaptado para a SuperCam do Perseverance. O AEGIS precisa de imagens feitas pela NavCam, então, ele
-           analisa as imagens para encontrar rochas e priorizá-las para análises, isso 
-          é feito com base no tamanho, brilho e em outras características. Depois disso
-           se inicia uma sequência de processos onde a SuperCam atira seu laser para 
-           determinar a composição química de um ou de dois alvos mais prioritários 
-           selecionados com base nas imagens da NavCam.
+  const [dados, setDados] = React.useState(null)
 
-            </p>
-          <p>
-            O teste do AEGIS começou em março onde foram usadas imagens coletadas pelo SuperCam 
-            Remote Micro-Imager, ou RMI, mas nesses testes iniciais não foi atirado o laser para as
-            análises químicas. Depois de pesquisar por alguns parâmetros em testes sucessivos, o 
-            laser foi usado pelo AEGIS com sucesso, na última semana. As imagens de acompanhamento 
-            mostram que as rochas foram selecionadas e atiradas. As imagens com o RMI foram então 
-            feitas depois do laser ter sido usado para comprovar onde o laser acertou as rochas. 
-            Com esse teste bem sucedido, a equipe do Perseverance pretende agora usar o AEGIS com 
-            mais frequência, para agilizar todo o processo realizado pelo rover em Marte, 
-            adquirindo dados de forma mais veloz e tomando decisões mais ágeis. Vamos
-              acompanhando, esse verdadeiro robô que temos hoje em Marte.
+  React.useEffect(() => {
+   fetch(`https://api.spaceflightnewsapi.net/v3/articles`)
+   .then(promisse => promisse.json())
+   .then(json => setDados(json))
 
-          </p>
-        </article>
-      </section>
+  },[dados])
 
-      <section className={styles.sec1}>
-          <h2>China Lança Trio de Satélites Espiões Pela Terceira Vez Em 2021</h2>
-          <div>
-            <img src={China}/>
-            <h5>
-              <b>Fonte: </b>
-              <a>https://spacetoday.com.br/china-lanca-trio-de-satelites-espioes-pela-terceira-vez-em-2021/</a>
-            </h5>
-          </div> 
-        <article>
-          <p>Três satélites militares da China foram lançados na sexta-feira, dia 12 de março de 2021 (hora de Brasília), a bordo de um foguete Long March 4C, se juntando a outros seis que a China já tinha lançado anteriormente.
+  React.useEffect(() => {
+    fetch(`https://api.spaceflightnewsapi.net/v3/articles`)
+    .then(promisse => promisse.json())
+    .then(json => console.log(json))
+
+   },[])
 
-Os três satélites da série Yaogan 31 foram lançados 23:19, hora de Brasília, da sexta-feira, dia 12 de março de 2021 desde a base de lançamento de Jiuquan no deserto de Gobi no noroeste da China, de acordo com o que foi repassado pela China Aerospace Science and Technology Corp. ou CASC a principal empresa estatal que presta serviço para o programa espacial chinês.
-
-O foguete Long March 4C de 3 estágios movido a combustível líquido colocou o trio de satélites Yaogan 31 em uma órbita de aproximadamente 1100 km de altura com uma inclinação de 63.4 graus com relação ao equador. As circunstâncias de lançamento foram bem parecidas com as anteriores do Long March 4C, um que foi lançado em 29 de janeiro de 2021 e outro em 24 de fevereiro de 2021, que também levaram 3 satélites Yaogan 31 cada um para o espaço.
-
-            </p>
+  return (
+    <main>
+      { dados && dados.map( ({id, imageUrl, newsSite, publisheAt, summary, title, updateAt, url }) => (
+        <section key={id} className={id % 2 != 0 ? styles.container0 : styles.container1}>
+          <div className={styles.cont}>
+            <h1>{title}</h1>
+            <p>Reportagem do <span><b>{newsSite}</b></span></p>
+            <p>{updateAt}</p>
+            <div>
+              <p>{'-'} {summary}</p>
+              <img src={imageUrl} />
+            </div>
+          </div>
           <p>
-          O nome Yaogan é usado para os satélites militares chineses. Os satélites Yaogan carregam um radar, um sistema óptico de alta resolução, e instrumentos de sinais de inteligência, e coletam informações que são posteriormente analisadas pelas agências militares e de inteligência da China.
-
-Especialistas no programa espacial chinês acreditam que os satélites Yaogan 31 são desenhados para detectar sinais de rádio para ajudar a localizar forças navais estrangeiras. Antes dos 3 lançamentos dos satélites Yaogan 31 desse ano, a China tinha lançado um trio similar desses satélites em abril de 2018, também a bordo do foguete Long March 4C.
-
-Antes de 2018, a China lançou cinco foguetes Long March 4C com trios de satélites Yaogan na mesma órbita de 1100 km de altura usada pelos satélites Yaogan 31. Esses lançamentos podem ter entregue na órbita uma geração anterior de satélites de vigilância marinha.
-
-O lançamento do dia 12 de março de 2021, do foguete Long March 4C foi a sétima tentativa de lançamento orbital da China em 2021. Seis missões foram realizadas com sucesso.
-c
-
+            Link da fonte: <a href={url}>{url}</a>
           </p>
-        </article>
-      </section>
+        </section>
+      ) ) }
     </main>
   )
 }

diff --git a/src/components/Main/Main.module.css b/src/components/Main/Main.module.css
@@ -1,49 +1,55 @@
-main{
-    /* margin-top: 16px; */
-    padding: 8px 2%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: rgba(204, 204, 204, 0.481);
+.container0{
+    max-width: 1280px;
+    background-color: rgba(221, 255, 71, 0.419);
+    margin: 4px auto;
+    padding: 24px 2%;
+}
+
+
+/* -------------------------------------------------------------------------- */
+
+.container1{
+    max-width: 1280px;
+    background-color: rgba(255, 102, 71, 0.334);
+    margin: 4px auto;
+    padding: 24px 2%;
 }
 
-main > section.sec1{
+/* -------------------------------------------------------------------------- */
+
+.cont{
     display: flex;
     flex-direction: column;
+    justify-content: center;
     align-items: center;
+    padding: 4% 0;
 }
 
-main > section.sec1{
-
+.cont > h1{
+    text-align: center;
+    margin-bottom: 12px;
 }
 
-main > section.sec1 > h2{
-    max-width: 670px;
+.cont > p{
     text-align: center;
-    margin: 12px 0;
+    margin-bottom: 12px;
 }
 
-main > section.sec1 > div{
-    margin: 14px 0;
+.cont > div{
     display: flex;
-    flex-direction: column;
+    text-align: justify;
     align-items: center;
+    max-width: 760px;
+    gap: 12px;
 }
 
-main > section.sec1 > div > img{
-    width: 460px;
-    height: 340px;
-    margin-bottom: 8px;
-}
-
-main > section.sec1 > div > h5{
-    max-width: 640px;
+.cont > div > p{
     text-align: justify;
+    font-size: 18px;
 }
 
-main > section.sec1 > article > p{
-    font-size: 18px;
-    max-width: 1200px;
-    margin-bottom: 12px;
-    text-align: justify;
+.cont > div > img{
+    max-width: 440px;
+    max-height: 280px;
+    border: 0.3px solid rgb(135, 218, 235);
 }
diff --git a/src/images/00.main/China.jpg b/src/images/00.main/China.jpg
diff --git a/src/images/00.main/CrewNews.jpg b/src/images/00.main/CrewNews.jpg
diff --git a/src/images/00.main/Perseverance.jpg b/src/images/00.main/Perseverance.jpg
diff --git a/src/images/NightSky.jpeg b/src/images/NightSky.jpeg