first commit

package.json

@@ -8,9 +8,11 @@
     "start": "next start"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "cors": "^2.8.5",
     "next": "11.0.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "styled-components": "^5.3.0"
   }
 }

pages/index.js

@@ -1,10 +1,31 @@
-import Head from "next/head";
-import styles from "../styles/Home.module.css";
+import { useEffect, useState } from "react"
+import RightSection from "../src/molecules/RightSection"
+import LeftSection from "../src/molecules/LeftSection"
+import CenterContent from "../src/organism/Home/CenterContent"
+
+
+
 
 export default function Home() {
+  const [data, setData] = useState()
+  const [selectedElement, setSelectedElement] = useState()
+  useEffect(async () => {
+
+   const res = await fetch('http://localhost:3000/api/containers')
+   const response = await res.json()
+   setData(response.data.containers)
+
+  }, [])
+  const selectElement = (element) => {
+    const selectedData = data.filter((item) => item.name === element)
+    setSelectedElement(selectedData[0])
+  }
+
   return (
-    <div className={styles.mainTitle}>
-      <h1>99minutos Fast Frontend Test</h1>
-    </div>
+    <CenterContent>
+        <LeftSection items={data} selectElement={selectElement} selectedElement={selectedElement} />
+
+        <RightSection selectedElement={selectedElement} />
+    </CenterContent>
   );
 }