diff --git a/src/App.js b/src/App.js index 70fbf35..be33e91 100644 --- a/src/App.js +++ b/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 = () => { - {/*
*/} - - - +
); }; diff --git a/src/components/Card.js b/src/components/Card.js index 62e3377..a5c076e 100644 --- a/src/components/Card.js +++ b/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 (
diff --git a/src/components/Main.js b/src/components/Main.js index 74718e7..b1e4e2f 100644 --- a/src/components/Main.js +++ b/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 (
- {/*
*/} + + {STORE.map((article) => { + if (dateTitle1 == article.date){ + return + } + })} + + + {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 + } + + })} +
); }; diff --git a/src/store.js b/src/store.js index 8cde747..7713659 100644 --- a/src/store.js +++ b/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: '', }, diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css new file mode 100644 index 0000000..e494070 --- /dev/null +++ b/src/stylesheets/main.css @@ -0,0 +1,3 @@ +.main { + padding-bottom: 55px; +} \ No newline at end of file