base frontend w/ table

src/App.css

@@ -1,11 +1,6 @@
 .App {
   padding: 2vh;
-  text-align: center;
   background-color: #1f2c38;
-  min-height: 96vh;
-  display: flex;
-  flex-direction: column;
-  font-size: calc(10px + 2vmin);
   color: white;
 }
 
@@ -31,14 +26,14 @@
   padding: 5px;
   border-radius: 10px;
   color: #1f2c38b6;
-  margin-left: auto;
 }
 
 .add-btn {
   padding: 5px;
   border-radius: 10px;
   color: #1f2c38b6;
-  margin-left: 10px;
+  margin-left: auto;
+  margin-right: 10px;
 }
 
 textarea:focus, input:focus{
@@ -47,15 +42,17 @@ textarea:focus, input:focus{
 
 .material-icons-outlined.md-36 { font-size: 36px; }
 
-.lables {
+.table {
-  display: flex;
+  text-align: left;
+  padding-top: 20px;
+}
+
+.table td {
   font-size: 1.3rem;
+  padding: 5px;
 }
 
-.lable {
+.table th {
-  padding-right: 15%;
+  font-size: 1.6rem;
-}
+  padding: 5px;
-
-#id {
-  padding-right: 20px;
 }

src/App.js

@@ -1,20 +1,30 @@
+import { useEffect, useState } from 'react';
 import './App.css';
+import List from './componets/List';
 
 function App() {
+  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();
+  }, []);
+  
   return (
     <div className="App">
       <div className="head">
         <input className="search" type="search" placeholder="Search bookmarks"/>
-        <button className="search-btn"><span class="material-icons-outlined md-36">search</span></button>
+        <button className="search-btn"><span className="material-icons-outlined md-36">search</span></button>
-        <button className="add-btn"><span class="material-icons-outlined md-36">add</span></button>
+        <button className="add-btn"><span className="material-icons-outlined md-36">add</span></button>
-        <button className="settings-btn"><span class="material-icons-outlined md-36">settings</span></button>
+        <button className="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
-      </div>
-      <div className="lables">
-        <p id="id">#</p>
-        <p className="lable">Name</p>
-        <p className="lable">Title</p>
-        <p className="lable">Link</p>
       </div>
+      <List data={data} />
     </div>
   );
 }

src/componets/List.js

@@ -0,0 +1,28 @@
+const List = ({data}) => {
+    console.log(data)
+
+  return (
+    <table className="table">
+        <thead>
+            <tr>
+                <th>#</th>
+                <th>Name</th>
+                <th>Title</th>
+                <th>Link</th>
+            </tr>
+        </thead>
+        <tbody>
+        {data.map((e, i) => {
+            return <tr key={i}>
+                <td>{i + 1}</td>
+                <td>{e.login}</td>
+                <td>{e.node_id}</td>
+                <td>{e.html_url}</td>
+            </tr>
+        })}
+        </tbody>
+    </table>
+  )
+}
+
+export default List