V0.3 Migrando para o Styled Components

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -7,7 +7,7 @@ function App() {
     <div>
       <Header/>
       <Main/>
-      <Footer/>
+      {/* <Footer/> */}
     </div>
   );
 }

src/components/Header/Header.js

@@ -2,14 +2,15 @@ import React from 'react'
 import styles from './Header.module.css'
 import Marca from './Logo/Marca';
 import Menu from './menu/Menu';
+import { HeaderContainer } from './StylesHeader';
 
 const Header = () => {
   return (
-    <section>
-      <header>
+    <section className={styles.Container}>
+      <HeaderContainer>
         <Marca/>
         <Menu/>
-      </header>
+      </HeaderContainer>
     </section>
   )
 }

src/components/Header/Header.module.css

@@ -2,34 +2,19 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    color: white;
 }
 
-section > header{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    padding: 0 2%;
-    border: 1px solid rgba(255, 192, 203, 0.422);
-    margin-bottom: 8px;
+body{
+    background-color: #000049;
 }
 
-section > header > h1{
-    color: pink;
-}
-
-section > header > img{
-    width: 150px;
-    height: 80px;
-}
-
-section >header > nav{
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    justify-content: space-around;
-}
-
-section >header > nav > a{
-    font-size: 18px;
+.Container{
+    /* padding: 0 2%; */
+    margin: 8px 0;
 }
 
+.col{
+
+background-color: #3811e7;
+}

src/components/Header/Logo/Marca.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import LogoSite from '../../../images/LogoSite.png'
+import LogoSite from '../../../images/LogoSite.svg'
 
 const Marca = () => {
   return (

src/components/Header/StylesHeader.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const HeaderContainer = styled.header`
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #00006D;
+    border: 1px solid rgba(255, 192, 203, 0.422);
+    border-radius: 18px;
+    box-shadow: -2px 2px 5px rgba(255, 192, 203, 0.622);
+    margin-bottom: 8px;
+
+    & img{
+        width: 150px;
+        height: 80px;
+    }
+
+    & nav{
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        justify-content: space-around;
+        background-color: none;
+
+        & a{
+            font-size: 18px;
+            cursor: pointer;
+            color: white;
+            background-color: none;
+
+            :hover{
+                border-bottom: 1px solid white;
+            }
+        }
+
+    }
+`;

src/components/Header/menu/Menu.js

@@ -2,22 +2,14 @@ import React from 'react'
 
 const Menu = () => {
   return (
-    <nav>
-    <a>Home |</a>
-    <a>
-      <label>Telescopios Espaciais |</label>
-      {/* <select>
-        <option value="hubble">Hubble</option>
-        <option value="james webb">James Webb</option>
-        <option value="chandra">Chandra</option>
-        <option value="Kepler">Kepler</option>
-        <option value="Spitzer">Spitzer</option>
-        <option value="Fermi">Fermi</option>
-      </select> */}
-    </a>
-
-    <a>R.E News |</a>
-    <a>Sobre |</a>
+  <nav>
+    <a>Home</a>
+    <span>|</span>
+    {/* <a>Telescopios Espaciais |</a>
+    <a>R.E News |</a> */}
+    <a>Contatos</a>
+    <span>|</span>
+    <a>Sobre</a>
   </nav>
   )
 }

src/components/Main/Main.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import styles from './Main.module.css';
+import { Article, MainA } from './StyleMain';
 
 const Main = () => {
   const [dados, setDados] = React.useState(null)
@@ -19,24 +20,26 @@ const Main = () => {
    },[])
 
   return (
-    <main>
+    <MainA>
       { 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} />
+        // <section className={(id) % 2 != 0 ? styles.container0 : styles.container1}>
+          <Article  key={id}>
+            <div className={`cont`} >
+              <h1>{title}</h1>
+              <p className='Report'>Reportagem do <span><b>{newsSite}</b></span></p>
+              <div>
+                <p>{'-'} {summary}</p>
+                <img src={imageUrl} />
+              </div>
+              <p className="LinkP">
+                Link da fonte: <a href={url}>{url}</a>
+              </p>
             </div>
-          </div>
-          <p>
-            Link da fonte: <a href={url}>{url}</a>
-          </p>
-        </section>
+
+          </Article>
+        // </section>
       ) ) }
-    </main>
+    </MainA>
   )
 }