Add styling and api keys to .env

nytt-apps · Jun 6, 2022 · 0b9a93d · 0b9a93d
1 parent 7960d9c
commit 0b9a93d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 35 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import Nav from './components/Nav';
 import Card from './components/Card';
-import Temperature from './components/Temperature';
 
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay, Navigation, Pagination } from 'swiper';
@@ -17,44 +16,41 @@ import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 const queryClient = new QueryClient()
 
 function Main() {
-  const fetchApi = async () => {
-    let foo:string = await invoke('fetch_api', { url: "https://newsapi.org/v2/top-headlines?country=br&category=business&apiKey=d2460721257142e6ab02f85d003e882d" })
+  const fetchNews = async () => {
+    let foo:string = await invoke('fetch_api', { url: `https://newsapi.org/v2/top-headlines?sources=google-news-br&apiKey=${process.env.REACT_APP_NEWS_API_KEY}` })
     return JSON.parse(foo)
   }
 
-  const { isLoading, error, data } = useQuery('repoData', fetchApi)
+  const { isLoading, error, data } = useQuery('news', fetchNews)
 
   if (isLoading) return <p>Loading...</p>
   if (error) return <p>Error</p>
 
-  // console.log(data)
-
   return (
+    <div className="p-5 h-screen flex flex-col">
       <Nav />
-      <Swiper
-        className="h-5/6"
-        modules={[Autoplay, Navigation, Pagination]}
-        autoplay={{
-          delay: 5000,
-          disableOnInteraction: false,
-        }}
-        spaceBetween={50}
-        slidesPerView={1}
-        navigation
-        pagination={{
-          clickable: true,
-        }}
-        onSlideChange={() => console.log('slide change')}
-        onSwiper={(swiper) => console.log(swiper)}
-      >
-        { 
-          data.articles.map((article, index) => ( 
-            <SwiperSlide className="">
-              <Card key={index} article={article} />
-            </SwiperSlide>
-          )) 
-        }
-      </Swiper>
+      <div className="h-full">
+        <Swiper
+          className="h-full"
+          modules={[Autoplay, Navigation, Pagination]}
+          autoplay={{
+            delay: 5000,
+            disableOnInteraction: false,
+          }}
+          spaceBetween={0}
+          slidesPerView={1}
+          navigation
+          // pagination={{ clickable: true, }}
+        >
+          { 
+            data.articles.map((article, index) => ( 
+              <SwiperSlide className="">
+                <Card key={index} article={article} />
+              </SwiperSlide>
+            )) 
+          }
+        </Swiper>
+      </div>
     </div>
   )
 }

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -1,13 +1,12 @@
 export default function Card({article}) {
-    console.log(article)
     return (
-        <div className="bg-slate-600 h-full flex gap-3 pb-10">
+        <div className="bg-ttyy h-full flex gap-3">
             <div className="w-3/5 h-full flex justify-center items-center">
                 <img className="object-cover h-full" src={article.urlToImage}></img>
             </div>
-            <div className="w-2/5 h-full flex justify-center items-center flex-col">
-                <h1 className="text-3xl text-cyan-50 font-bold m-2">{article.title}</h1>
-                <p className="text-xl text-cyan-50"> {article.description} </p>
+            <div className="w-2/5 h-full flex justify-start items-center flex-col pr-12 pt-12">
+                <h1 className="text-3xl text-yytt font-bold mb-5 text-left">{article.title}</h1>
+                <p className="text-2xl text-cyan-50 text-left"> {article.description} </p>
             </div>
         </div>
     );