From abb270eeea87d142f9755088594ddd7bb52c0c41 Mon Sep 17 00:00:00 2001 From: Robert Date: Fri, 19 Feb 2021 21:31:29 -0500 Subject: [PATCH 1/3] Add component section in main --- src/App.js | 12 ++++-------- src/components/Main.js | 7 ++++++- src/components/Section.js | 15 +++++++++++++++ src/store.js | 6 ++++-- 4 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 src/components/Section.js diff --git a/src/App.js b/src/App.js index 0398b2c..8a67d76 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,9 @@ 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"; */ +import Main from "./components/Main"; +/* Fuente */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faBell, faCommentDots, faUser } from '@fortawesome/free-solid-svg-icons' @@ -23,12 +23,8 @@ const App = () => { - {/*
*/} - +
+ ); }; diff --git a/src/components/Main.js b/src/components/Main.js index 74718e7..ff1342e 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1,8 +1,13 @@ +import Section from "./Section"; +import { STORE } from "../store"; const Main = () => { return (
- {/*
*/} +
+ { STORE.forEach((article) => { + return (

{article}

) + })}
); }; diff --git a/src/components/Section.js b/src/components/Section.js new file mode 100644 index 0000000..548b606 --- /dev/null +++ b/src/components/Section.js @@ -0,0 +1,15 @@ +import Card from "./Card"; + +const Section = () => { + return ( +
+ +
+ ); +}; + +export default Section; \ No newline at end of file diff --git a/src/store.js b/src/store.js index 2643637..8cde747 100644 --- a/src/store.js +++ b/src/store.js @@ -1,4 +1,4 @@ -const store = [ +const STORE = [ { title: 'Para dias más productivos', description: 'Agendas y bullet journals', @@ -48,4 +48,6 @@ const store = [ img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613787095/agenda_7.png', size: '', }, -] \ No newline at end of file +] + +export { STORE }; \ No newline at end of file From 8ced1c804817c589ece6823bc06928eff9dcf5b5 Mon Sep 17 00:00:00 2001 From: Robert Date: Fri, 19 Feb 2021 23:05:17 -0500 Subject: [PATCH 2/3] Show cards with data STORE --- src/components/Card.js | 3 ++- src/components/Main.js | 8 +++----- src/components/Section.js | 33 +++++++++++++++++++++++++-------- src/store.js | 14 +++++++------- 4 files changed, 37 insertions(+), 21 deletions(-) diff --git a/src/components/Card.js b/src/components/Card.js index 62e3377..b37549f 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,7 +1,8 @@ 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" : ""; + console.log(src) return (
diff --git a/src/components/Main.js b/src/components/Main.js index ff1342e..ec1a451 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1,13 +1,11 @@ import Section from "./Section"; -import { STORE } from "../store"; + const Main = () => { return (
-
- { STORE.forEach((article) => { - return (

{article}

) - })} +
+
); }; diff --git a/src/components/Section.js b/src/components/Section.js index 548b606..b5dd1cf 100644 --- a/src/components/Section.js +++ b/src/components/Section.js @@ -1,15 +1,32 @@ import Card from "./Card"; +import { STORE } from "../store"; -const Section = () => { - return ( + +const Section = ({dateTitle}) => { + + return (
- +

{dateTitle}

+ {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 (dateTitle == article.date){ + return + } + + })}
- ); + + + + ) + }; export default Section; \ No newline at end of file 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: '', }, From a413bd19d7c33929540869ff673aa57bceb8715f Mon Sep 17 00:00:00 2001 From: Robert Date: Fri, 19 Feb 2021 23:30:48 -0500 Subject: [PATCH 3/3] Make filter articles with container in main --- src/App.js | 17 +------------- src/components/Card.js | 1 - src/components/Main.js | 47 ++++++++++++++++++++++++++++++++++++--- src/components/Section.js | 32 -------------------------- src/stylesheets/main.css | 3 +++ 5 files changed, 48 insertions(+), 52 deletions(-) delete mode 100644 src/components/Section.js create mode 100644 src/stylesheets/main.css diff --git a/src/App.js b/src/App.js index 13cbd30..be33e91 100644 --- a/src/App.js +++ b/src/App.js @@ -26,22 +26,7 @@ const App = () => {
-
- - {/*
*/} - - - +
); }; diff --git a/src/components/Card.js b/src/components/Card.js index b37549f..a5c076e 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -2,7 +2,6 @@ import styles from "./../stylesheets/Card.css" const Card = ({className, description, title, size, src,...props}) => { const sizeClassName = size ? "card--large" : ""; - console.log(src) return (
diff --git a/src/components/Main.js b/src/components/Main.js index ec1a451..b1e4e2f 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1,11 +1,52 @@ -import Section from "./Section"; +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/components/Section.js b/src/components/Section.js deleted file mode 100644 index b5dd1cf..0000000 --- a/src/components/Section.js +++ /dev/null @@ -1,32 +0,0 @@ -import Card from "./Card"; -import { STORE } from "../store"; - - -const Section = ({dateTitle}) => { - - return ( -
-

{dateTitle}

- {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 (dateTitle == article.date){ - return - } - - })} -
- - - - ) - -}; - -export default Section; \ No newline at end of file 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