2022-04-16 12:50:42 -05:00
|
|
|
import { useEffect, useState } from 'react';
|
2022-04-09 03:14:50 -05:00
|
|
|
import './App.css';
|
2022-04-16 12:50:42 -05:00
|
|
|
import List from './componets/List';
|
2022-04-09 03:14:50 -05:00
|
|
|
|
|
|
|
function App() {
|
2022-04-16 12:50:42 -05:00
|
|
|
const [data, setData] = useState([]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
async function fetchData() {
|
|
|
|
const res = await fetch('https://api.github.com/users');
|
|
|
|
const resJSON = await res.json();
|
|
|
|
// data.sort((b, a) => new Date(b.Date) - new Date(a.Date)) // Sort by date
|
|
|
|
setData(resJSON);
|
|
|
|
}
|
|
|
|
|
|
|
|
fetchData();
|
|
|
|
}, []);
|
|
|
|
|
2022-04-09 03:14:50 -05:00
|
|
|
return (
|
|
|
|
<div className="App">
|
2022-04-14 09:10:27 -05:00
|
|
|
<div className="head">
|
|
|
|
<input className="search" type="search" placeholder="Search bookmarks"/>
|
2022-04-16 12:50:42 -05:00
|
|
|
<button className="search-btn"><span className="material-icons-outlined md-36">search</span></button>
|
|
|
|
<button className="add-btn"><span className="material-icons-outlined md-36">add</span></button>
|
|
|
|
<button className="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
|
2022-04-14 09:10:27 -05:00
|
|
|
</div>
|
2022-04-16 12:50:42 -05:00
|
|
|
<List data={data} />
|
2022-04-09 03:14:50 -05:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-04-16 12:50:42 -05:00
|
|
|
export default App;
|