add store data in container

src/App.js

@@ -1,8 +1,10 @@
 import React from "react";
 import Header from "./components/Header";
 import Link from "./components/Link";
-import Card from "./components/Card";
 import SearchBar from "./components/SearchBar";
+import Main from "./components/Main";
+/* Fuente */
+import Card from "./components/Card";
 import Container from "./components/Container";
 /* import Main from "./components/Main"; */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -24,20 +26,7 @@ const App = () => {
           <FontAwesomeIcon icon={faUser} />
         </div>
       </Header>
-      {/* <Main /> */}
-      <Container title="Hola Como estas">
-        <Card description="Una Foto"
-        title="Intereses, el nuevo widget de pinterest"
-        src="https://i.picsum.photos/id/0/536/354.jpg?hmac=pYva7VotLDyw33JFwZdFMkf5Egtdk2Z6p7Rr8nO6ngs"
-        /><Card description="Una Foto"
-        title="Intereses, el nuevo widget de pinterest"
-        src="https://i.picsum.photos/id/0/536/354.jpg?hmac=pYva7VotLDyw33JFwZdFMkf5Egtdk2Z6p7Rr8nO6ngs"
-        /><Card description="Una Foto"
-        title="Intereses, el nuevo widget de pinterest"
-        src="https://i.picsum.photos/id/0/536/354.jpg?hmac=pYva7VotLDyw33JFwZdFMkf5Egtdk2Z6p7Rr8nO6ngs"
-        size="large"
-        />
-      </Container>
+      <Main />   
     </>
   );
 };

src/components/Card.js

@@ -1,6 +1,6 @@
 import styles from "./../stylesheets/Card.css"
 
-const Card = ({className, description, title, size, src, ...props}) => {
+const Card = ({className, description, title, size, src,...props}) => {
   const sizeClassName = size ? "card--large" : "";
   return (
     <div className={`card ${className} ${sizeClassName}`}>

src/components/Main.js

@@ -1,8 +1,52 @@
+import styles from "./../stylesheets/main.css"
+import Container from "./Container";
+import Card from "./Card";
+import { STORE } from "../store";
+
+function dateTitle(date){
+  var options = { year: 'numeric', month: 'long', day: 'numeric' };
+  let [a,m,d]= date.split("-");
+  let dateArticle = new Date(a,m-1,d);
+  return dateArticle.toLocaleDateString("es-ES", options)
+}
 
 const Main = () => {
+  let dateTitle1 = '2021-02-18';
+  let dateTitle2 = '2021-02-17';
+  const title1 = dateTitle(dateTitle1); 
+  const title2 = dateTitle(dateTitle1); 
+
+
   return (
     <main className="main">
-     {/*  <Section className="main__section" /> */}
+      <Container title={title1}>
+        {STORE.map((article) => {
+          if (dateTitle1 == article.date){
+            return <Card description={article.description}
+            title = {article.title}
+            src = {article.img_url}
+            size ={article.size}
+            key = {article.title}
+           /> 
+          }
+        })}
+      </Container>
+      <Container title={title2}>
+        {STORE.map((article) => {
+          let [a,m,d]= article.date.split("-");
+          let dateArticle = new Date(a,m-1,d);
+          var options = { year: 'numeric', month: 'long', day: 'numeric' };
+          if (dateTitle2 == article.date){
+            return <Card description={article.description}
+            title = {article.title}
+            src = {article.img_url}
+            size ={article.size}
+            key = {article.title}
+            /> 
+          }
+
+        })}
+      </Container>
     </main>
   );
 };

src/store.js

@@ -2,49 +2,49 @@ const STORE = [
   {
     title: 'Para dias más productivos',
     description: 'Agendas y bullet journals',
-    date: '2020-02-18',
+    date: '2021-02-18',
     img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613786388/image_7_teaj7e.png',
     size: '',
   },
   {
     title: 'Para IOS',
     description: 'Intereses, el nuevo Widget de Pinterest',
-    date: '2020-02-18',
+    date: '2021-02-18',
     img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613786730/image_2_fhq6jo.png',
     size: '',
   },
   {
     title: 'Gafas de Sol',
     description: 'Un accesorio que no puede faltar en tu look',
-    date: '2020-02-18',
+    date: '2021-02-18',
     img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613786735/image_1_cyn7va.png',
     size: 'large',
   },
   {
     title: 'Un viaje por la arquitectura mexicana',
     description: 'Estilo colonial y moderno',
-    date: '2020-02-17',
+    date: '2021-02-17',
     img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613786974/torres_4.png',
     size: '',
   },
   {
     title: 'Espejos con mucho estilo para tu casa',
     description: 'Ideas para decorar',
-    date: '2020-02-17',
+    date: '2021-02-17',
     img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613787059/decorar_5.png',
     size: '',
   },
   {
     title: 'Cómo utilizarla para un mundo mejor',
     description: 'Inteligencia Artificial',
-    date: '2020-02-17',
+    date: '2021-02-17',
     img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613787090/ia_6.png',
     size: '',
   },
   {
     title: 'Por dias más productivos',
     description: 'Agendas y bullet journals',
-    date: '2020-02-17',
+    date: '2021-02-17',
     img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613787095/agenda_7.png',
     size: '',
   },

src/stylesheets/main.css

@@ -0,0 +1,3 @@
+.main {
+  padding-bottom: 55px;
+}