Retornando o primeiro objeto

Benevanio · Feb 26, 2023 · fe0bd4a · fe0bd4a
1 parent 7cf7bea
commit fe0bd4a
Show file tree

Hide file tree

Showing 15 changed files with 158 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
+    "sass": "^1.58.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/Logo/Nasa.gif b/public/Logo/Nasa.gif
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="Logo/Nasa.gif" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Bene Tesla  dev"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+
+    <title>✨Astro Api✨</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,20 @@
 
 import './App.css';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Navbar from './components/Navbar';
+import Home from './components/Home';
+import Nasa from './components/Nasa';
 
 function App() {
   return (
     <div className="App">
-      <Navbar />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" exact element={<Home />} />
+          <Route path="/nasa" element={<Nasa />} />
+          <Route path="/navbar" element={<Navbar />} />
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

diff --git a/src/Img/NasaApi.jfif b/src/Img/NasaApi.jfif
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import './Home.scss'
+const Home = () => {
+    return (
+        <div>
+            <Link to="/nasa">
+                <i className="fas fa-rocket"> </i>
+               <h1> Nasa</h1>
+            </Link>
+        </div>
+    )
+}
+
+export default Home
diff --git a/src/components/Home.scss b/src/components/Home.scss
@@ -0,0 +1,67 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius:5px;
+    background: linear-gradient(145deg, #cacaca, #f0f0f0);
+    box-shadow: 20px 20px 60px #bebebe,
+        -20px -20px 60px #ffffff;
+    color: white;
+    font-size: calc(10px + 2vmin);
+    text-align: center;
+
+    .card {
+        width: 100%;
+        max-width: 500px;
+        margin: 20px;
+        padding: 20px;
+        border-radius: 50px;
+        background: linear-gradient(145deg, #f0f0f0, #cacaca);
+        box-shadow: 20px 20px 60px #bebebe,
+            -20px -20px 60px #ffffff;
+        color: #000;
+        border-radius: 5px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+
+        img {
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .title {
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+        }
+
+        .description {
+            font-size: 1rem;
+            margin-bottom: 20px;
+        }
+
+        .link {
+            text-decoration: none;
+            color: #000;
+            font-size: 1rem;
+            margin-bottom: 20px;
+        }
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        .card {
+            width: 100%;
+            max-width: 500px;
+            margin: 20px;
+            padding: 20px;
+            border-radius: 50px;
+            background: linear-gradient(145deg, #f0f0f0, #cacaca);
+            box-shadow: 20px 20px 60px #bebebe,
+                -20px -20px 60px #ffffff;
+            color: #000;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        }
+    }
+}
diff --git a/src/components/Nasa.jsx b/src/components/Nasa.jsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+
+const Nasa = () => {
+    const [nasa, setNasa] = useState(null)
+
+    useEffect(() => {
+        getNasa()
+        async function getNasa() {
+            const res = await fetch('https://api.nasa.gov/planetary/apod?api_key=a2Szsr8EIoCS091sCRc2ztF5DT2R14EDu9gbLPha')
+            const data = await res.json()
+            setNasa(data)
+        }
+    }, [])
+    if (!nasa) return <div>Loading...</div>
+    return (
+        <div className='container'>
+            <div className='card'>
+                <img
+                    src={nasa.url}
+                    alt={nasa.title}
+                    className='img-fluid'
+                />
+                <div className='card-body'>
+                    <h2 className='card-title'>{nasa.title}</h2>
+                    <p className='card-text'>{nasa.explanation}</p>
+                    <p className='card-text'>{nasa.date}</p>
+                    <p className='card-text'>{nasa.media_type}</p>
+                    <p className='card-text'>{nasa.service_version}</p>
+                </div>
+
+            </div>
+
+        </div>
+    )
+}
+
+export default Nasa
diff --git a/src/index.css b/src/index.css
@@ -11,3 +11,4 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,4 @@ code {
		font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
		monospace;
		}