Merge pull request #1 from Franppires/debug

test image

src/api/news.tsx

@@ -0,0 +1,36 @@
+'use client' 
+import { useEffect, useState } from 'react';
+import { Root } from '@/interface/interfaceNews'; // Certifique-se de que o caminho para a interface está correto
+
+export default function NewsApi() {
+  // const apiKey = process.env.REACT_APP_NEWS_API_KEY;
+  const [dataNews, setDataNews] = useState<Root | null>(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const responseNews = await fetch(
+          `https://newsapi.org/v2/top-headlines?sources=google-news-br&apiKey=8c18442db94a48f5a1149d114f75ddef`
+        );
+
+
+        console.log('1',responseNews)
+        if (!responseNews.ok) {
+          throw new Error('Erro ao buscar notícias');
+        }
+
+        console.log('2',responseNews)
+
+        const data: Root = await responseNews.json();
+        console.log('2',responseNews)
+        setDataNews(data);
+      } catch (error) {
+        console.error('Erro ao buscar notícias:', error);
+        setDataNews(null);
+      }
+    }
+    fetchData();
+  }, []);
+
+  return dataNews;
+}

src/app/contato/page.tsx

@@ -1,7 +1,9 @@
 export default function Contato() {
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>
-      Contato
-    </div>
+    <>
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Contato</h1>
+      </div>
+    </>
   );
 }

src/app/edicoes/page.tsx

@@ -1,7 +1,9 @@
 export default function Edicoes() {
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>
-      Edições
-    </div>
+    <>
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Edições</h1>
+      </div>
+    </>
   );
 }

src/app/editoriais/automobilismo/page.tsx

@@ -1,7 +1,9 @@
 export default function Automobilismo() {
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>
-      Automobilismo
-    </div>
+    <>
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Automobilismo</h1>
+      </div>
+    </>
   );
 }

src/app/editoriais/brasil/page.tsx

@@ -1,7 +1,11 @@
 export default function Brasil() {
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>
-      Brasil
-    </div>
+    <>
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Brasil</h1>
+      </div>
+
+    </>
+
   );
 }

src/app/entretenimento/page.tsx

@@ -1,35 +1,32 @@
+'use client'
 import React from 'react';
-import { Article, Root } from '@/interface/interfaceNews';
+import { Article } from '@/interface/interfaceNews';
+import NewsApi from '@/api/news';
 
-export default async function Entertainment() {
-  const apiKey = process.env.REACT_APP_NEWS; //chave no arquivo env
-  const responseNews = await fetch(
-    `https://newsapi.org/v2/top-headlines?sources=google-news-br&apiKey=${apiKey}`,
-    { next: { revalidate: 3600 } }
-  );
-  const dataNews: Root = await responseNews.json(); //analisa a resposta como tipo Root
 
-  console.log(dataNews);
+export default function Entertainment() {
+  const dataNews = NewsApi();
 
   return (
     <>
       <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
         <h1 className="text-2xl font-bold uppercase">Entretenimento</h1>
       </div>
-      <div className="bg-black-800">
+      <div className="bg-gray-800">
         <div className="container mx-auto py-8">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {dataNews.articles.map((article: Article, index: number) => (
-              <div key={index} className="bg-white p-4 rounded-lg shadow-md flex">
-                <img className="w-32 h-auto mr-4" src='https://picsum.photos/200/300?random=1' alt={article.title} />
+            {dataNews?.articles.map((article: Article, index: number) => (
+              <div key={index} className="bg-gray-700 p-4 rounded-lg shadow-md flex">
+                <img className="w-32 h-auto mr-4" src='' alt={article.author} />
                 <div>
                   <h2 className="text-xl font-semibold mb-2">{article.title}</h2>
                   <p className="text-gray-600">{article.description}</p>
                   <p className=''>{article.author}</p>
                   <a href={article.url} target='_blank' className="hover:text-blue-500">Saber mais</a>
                 </div>
               </div>
-            ))}
+              )
+            )}
           </div>
         </div>
       </div>

src/app/esportes/page.tsx

@@ -1,7 +1,9 @@
 export default function Esportes() {
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>
-      Esportes
-    </div>
+    <> 
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Esportes</h1>
+      </div>
+    </>
   );
 }

src/app/header.tsx

@@ -45,7 +45,7 @@ export default async function Header() {
           <Facebook />
         </nav>
       </div>
-      <div className='flex items-center justify-between h-26 p-4 bg-gray-100 '>
+      <div className='flex items-center justify-between h-26 p-4 bg-gray-600 '>
 
 
         {/* <p>{JSON.stringify(data.main.temp)}ºC</p> */}
@@ -56,12 +56,12 @@ export default async function Header() {
           <Search className='bg-red-800 rounded-r-md px-1 cursor-pointer' size={32} />
         </div>
       </div>
-      <div className='flex items-center justify-between h-14 bg-gray-100 border-t-2 '>
+      <div className='flex items-center justify-between h-14 bg-gray-800 border-t-2 '>
         <div className='flex gap-1 hover:bg-red-800 p-4 '>
           <HomeIcon size={20} />
           <Link className='hover:underline' href='/'>Home</Link>
         </div>
-        <div className='flex gap-1 bg-red-800 p-4'>
+        <div className='flex gap-1 hover:bg-red-800 p-4'>
           <ClipboardEdit size={20} />
           <Folder title='Editoriais' >
             <Link className='hover:underline' href='/editoriais/saude'>Saúde</Link>
@@ -108,5 +108,6 @@ export default async function Header() {
         </div>
       </div>
     </div>
+
   );
 }

src/app/midiakit/page.tsx

@@ -1,5 +1,9 @@
 export default function Midiakit() { 
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>Mídiakit</div>
+    <>
+    <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+      <h1 className="text-2xl font-bold uppercase">Midiakit</h1>
+    </div>
+  </>
   )
 }

src/app/multmidia/page.tsx

@@ -1,8 +1,10 @@
 export default function Multmidia() {
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>
-      Multmídia
-    </div>
+    <>
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Multmidia</h1>
+      </div>
+    </>
   );
 }
 

src/app/page.tsx

@@ -1,43 +1,42 @@
-import { Article, Root } from '@/interface/interfaceNews';
+'use client'
+import NewsApi from '@/api/news';
+import { Article } from '@/interface/interfaceNews';
+import Image from 'next/image';
 import React from 'react';
 
-export default async function Home() {
-  const apiKey = process.env.REACT_APP_NEWS; //chave no arquivo env
-  const responseNews = await fetch(
-    `https://newsapi.org/v2/top-headlines?sources=google-news-br&apiKey=${apiKey}`,
-    { next: { revalidate: 3600 } }
-  );
-  const dataNews: Root = await responseNews.json(); //analisa a resposta como tipo Root
+export default function Home() {
+  const dataNews = NewsApi();
 
+  if (!dataNews) {
+    return <p>Carregando...</p>;
+  }
+
   const mainArticle = dataNews.articles[0];
   const otherArticles = dataNews.articles.slice(1);
 
-  console.log(dataNews);
-
   return (
     <div className="bg-gray-100">
-      <div className="flex items-center justify-center bg-red-800 h-20">
-        <h1 className="text-2xl font-bold uppercase text-white">Notícias do Dia</h1>
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Notícias do Dia</h1>
       </div>
-
-      <div className="p-4">
+      <div className="p-4 bg-gray-800">
         <div className="flex flex-wrap">
-          <div className="w-full md:w-2/3 relative ">
+          <div className="w-full md:w-2/3 relative">
             <h3 className="text-4xl font-semibold mb-2">Principal </h3>
-            <img src="https://picsum.photos/900?grayscale" alt="Imagem da Notícia" className="w-full h-auto" />
+            <Image src="" alt="Imagem da Notícia" className="w-full h-auto" />
             <div className="absolute inset-0 bg-opacity-50 flex flex-col justify-center p-6 text-white">
               <h2 className="text-5xl font-bold mb-2">{mainArticle.title}</h2>
               <p>{mainArticle.description}</p>
-              <a href={mainArticle.url} className="hover:text-blue-500 text-3xl">Saber mais</a>
+              <a href={mainArticle.url}  target='_blank' className="hover:text-blue-500 text-3xl">Saber mais</a>
             </div>
           </div>
           <div className="w-full md:w-1/3 pl-3">
             <h3 className="text-4xl font-semibold mb-2">Outras </h3>
             <ul className="space-y-2">
               {otherArticles.map((article: Article, index: number) => (
-                <li key={index} className="bg-gray-200 hover:bg-red-800 rounded flex flex-col p-2">
+                <li key={index} className="bg-gray-700 hover:bg-red-800 rounded flex flex-col p-2 ">
                   <a href="#" >{article.title}</a>
-                  <a href={article.url} className="hover:text-blue-500">Saber mais</a>
+                  <a href={article.url} target='_blank' className="hover:text-blue-500">Saber mais</a>
                 </li>
               ))}
             </ul>

src/app/servicos/page.tsx

@@ -1,7 +1,9 @@
 export default function Servicos() {
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>
-      Serviços
-    </div>
+    <>
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Servicos</h1>
+      </div>
+    </>
   );
 }

src/app/video/page.tsx

@@ -1,7 +1,9 @@
 export default function Video() {
   return (
-    <div className='flex items-center justify-between bg-black-800 w-5/6 mx-auto'>
-      Video
-    </div>
+    <>
+      <div className='flex items-center justify-center bg-red-800 h-12 p-8'>
+        <h1 className="text-2xl font-bold uppercase">Vídeos</h1>
+      </div>
+    </>
   );
 }