Termine los componentes employeeList y companieList y sus respectivos…

… repositories, y les di estilos

pages/company.js

@@ -1,11 +1,8 @@
 import React from 'react'
 import Layout from '../src/components/Layout'
-// import Company from '../src/components/Company'
 import CompanyList from '../src/components/CompanyList'
 import Head from 'next/head'
 
-// Aqui dejare de renderizar company y cambiare por companyList
-
 const company = () => {
     return (
         <Layout>
@@ -14,8 +11,7 @@ const company = () => {
               <meta name="description" content="Empresas" />
               <link rel="icon" href="/favicon.svg" />
           </Head>
-          <div >
-            {/* <Company/> */}
+          <div>
             <CompanyList />
           </div>  
         </Layout>

pages/employee.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Layout from '../src/components/Layout'
-import Employee from '../src/components/Employee'
+import EmployeeList from '../src/components/EmployeeList'
 import Head from 'next/head'
 
 const employee = () => {
@@ -11,8 +11,8 @@ const employee = () => {
               <meta name="description" content="Empleados" />
               <link rel="icon" href="/favicon.svg" />
           </Head>
-          <div >
-            <Employee/>
+          <div>
+            <EmployeeList />
           </div>  
         </Layout>
         );

src/components/Buttons.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Buttons = () => {
+  return (
+    <div className='container flex justify-end mt-3 h-10'>
+          <button className='bg-blue-500 rounded-md text-white w-15 h-8 pl-2 pr-2'>Editar</button>
+          <button className='bg-red-500 rounded-md text-white w-15 h-8 ml-5 pl-2 pr-2'>Eliminar</button>
+    </div>
+  )
+}
+
+export default Buttons

src/components/Company.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
+import Buttons from './Buttons'
 
-const Company = () => {
+const Company = ({name, website, foundation}) => {
   return (
-    <div className="text-3xl font-bold underline">
-        <h2>Company</h2>
+    <div className="container mt-3 mb-3 p-2 shadow rounded-md bg-white">
+        <h3 className=' text-[#B1DE97] font-bold'>{name}</h3>
+        <p>Sitio web: {website}</p>
+        <p>Año de fundación: {foundation}</p>
+        <Buttons />
     </div>
   )
 }

src/components/CompanyList.jsx

@@ -1,5 +1,6 @@
 import React, {useState, useEffect} from 'react'
 import * as CompanyServer from '../utils/CompanyServer'
+import Company from './Company'
 
 const CompanyList = () => {
 
@@ -17,15 +18,23 @@ const CompanyList = () => {
   }
 
   useEffect(()=>{
-    listCompanies()
+    listCompanies();
   },[])
 
   return (
     <div>
-        <h2>Company list</h2>
-        {companies.map(companie => (
-          <p key={companie.id}>{companie.name}</p>
-        ))}
+        <div className='container w-100 mt-[35px] mb-[35px] flex justify-center'>
+          <h2 className='font-bold text-xl'>EMPRESAS</h2>
+        </div>
+        <div className="grid gap-x-8 gap-y-4 md:grid-cols-2 lg:grid-cols-3 justify-items-center pl-8 pr-8">
+          {companies.map(companie => (
+            <Company key={companie.id}
+              name={companie.name} 
+              website={companie.webSite} 
+              foundation={companie.foundation}
+            />
+          ))}
+        </div>
     </div>
   )
 }

src/components/Employee.jsx

@@ -1,9 +1,13 @@
 import React from 'react'
+import Buttons from './Buttons'
 
-const Employee = () => {
+const Employee = ({name, lastName, age}) => {
   return (
-    <div>
-        <h2>Employee</h2>
+    <div className="container mt-3 mb-3 p-2 shadow rounded-md bg-white">
+        <h3 className=' text-[#B1DE97] font-bold'>{name}</h3>
+        <p>Apellidos: {lastName}</p>
+        <p>Edad: {age} años</p>
+        <Buttons />
     </div>
   )
 }

src/components/EmployeeList.jsx

@@ -1,11 +1,42 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
+import * as EmployeeServer from '../utils/EmployeeServer'
+import Employee from './Employee'
 
 // Aqui renderizaré el componente Employee
 
 const EmployeeList = () => {
+
+  const [employees, setEmployees] = useState([]);
+
+  const listEmployees = async () => {
+    try {
+      const response = await EmployeeServer.listEmployees()
+      const data = await response.json()
+
+      setEmployees(data.employees);
+    } catch (error) {
+      console.log('FETCH ERROR: ', error)
+    }
+  }
+
+  useEffect(()=>{
+    listEmployees();
+  }, [])
+
   return (
     <div>
-        <h2>Employee List</h2>
+        <div className='container w-100 mt-[35px] mb-[35px] flex justify-center'>
+          <h2 className='font-bold text-xl'>EMPLEADOS</h2>
+        </div>
+        <div className="grid gap-x-8 gap-y-4 md:grid-cols-2 lg:grid-cols-3 justify-items-center pl-8 pr-8">
+          {employees.map(employee => (
+            <Employee key={employee.id}
+              name={employee.name} 
+              lastName={employee.lastName} 
+              age={employee.age}
+            />
+          ))}
+        </div>
     </div>
   )
 }

src/repositories/employeesRepository.js

@@ -0,0 +1,10 @@
+import Repository from "./Repository";
+
+let endpoint = "employees/";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+    getEmployees(){
+        return Repository.request(endpoint, {})
+    }
+}

src/utils/EmployeeServer.js

@@ -0,0 +1,5 @@
+import employeeRepository from '../repositories/employeesRepository';
+
+export const listEmployees = async () => {
+    return await employeeRepository.getEmployees()
+}