import React, { useEffect, useState } from "react";
import axios from "axios";
import { NewsType } from "./types";
function App() {
const API_KEY = "xxxxx";
const [news, setNews] = useState<NewsType | null>(null);
const getApi = async () => {
const { data } = await await axios.get<NewsType>(
`https://newsapi.org/v2/everything?domains=wsj.com&apiKey=${API_KEY}`
);
setNews(data);
};
useEffect(() => {
getApi();
}, []);
return (
<div className="App">
<>
<h1 className="text-5xl m-3 text-center font-bold mb-10">NEWS</h1>
<div className="flex flex-row flex-wrap gap-5 justify-center">
{news?.articles.map((item, i) => {
return (
<div className="max-w-[350px]" key={i}>
<h2 className="font-bold text-xl mb-4">
{item.title.substring(0, 44)}
</h2>
<img src={item.urlToImage} alt="" />
<p className="py-2">
{item.description.substring(0, 75) + " [...]"}
</p>
<p className="float-right">{item.author}</p>
</div>
);
})}
</div>
</>
</div>
);
}
export default App;