javascriptecuador · thegreatyamori · Mar 18, 2021 · Mar 24, 2021 · Mar 25, 2021 · Mar 28, 2021
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-gatsby": "^0.5.14",
+    "classnames": "^2.2.6",
     "gatsby": "^2.24.85",
     "gatsby-legacy-polyfills": "0.0.5",
     "gatsby-plugin-manifest": "2.4.31",

diff --git a/src/components/UI/blog-entries/blog-entries.js b/src/components/UI/blog-entries/blog-entries.js
@@ -0,0 +1,160 @@
+import React from "react";
+import CardFactory from "../card/card-factory";
+import { generateDistribution } from "./utils";
+import { BlogGrid, BlogCard } from "./styles";
+
+// replace this fakeData with Graphql data
+const fakeCardsData = [
+  {
+    id: 1,
+    title: "Titulo post",
+    subtitle: null,
+    url_img:
+      "https://javascriptecuador.netlify.app/static/quito-605ac9d2e0009a60014111b3bedf73c9.jpg",
+    description_title: "Descripción",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, voluptas. Aperiam cumque minus eius itaque odio ullam quam repudiandae delectus. Totam, eveniet deserunt. Nobis, mollitia natus! Architecto alias asperiores rerum.",
+    url_entry: "!#",
+    author: "Jerson Morocho",
+    date: "Marzo 17, 2021",
+    timeago: "5 min. Lectura",
+    type: "blog",
+  },
+  {
+    id: 2,
+    title: "Titulo post",
+    subtitle: null,
+    url_img:
+      "https://javascriptecuador.netlify.app/static/quito-605ac9d2e0009a60014111b3bedf73c9.jpg",
+    description_title: "Descripción",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, voluptas. Aperiam cumque minus eius itaque odio ullam quam repudiandae delectus. Totam, eveniet deserunt. Nobis, mollitia natus! Architecto alias asperiores rerum.",
+    url_entry: "!#",
+    author: "Jerson Morocho",
+    date: "Marzo 17, 2021",
+    timeago: "5 min. Lectura",
+    type: "blog",
+  },
+  {
+    id: 3,
+    title: "Titulo post",
+    subtitle: null,
+    url_img:
+      "https://javascriptecuador.netlify.app/static/quito-605ac9d2e0009a60014111b3bedf73c9.jpg",
+    description_title: "Descripción",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, voluptas. Aperiam cumque minus eius itaque odio ullam quam repudiandae delectus. Totam, eveniet deserunt. Nobis, mollitia natus! Architecto alias asperiores rerum.",
+    url_entry: "!#",
+    author: "Jerson Morocho",
+    date: "Marzo 17, 2021",
+    timeago: "5 min. Lectura",
+    type: "blog",
+  },
+  {
+    id: 4,
+    title: "Titulo post",
+    subtitle: null,
+    url_img:
+      "https://javascriptecuador.netlify.app/static/quito-605ac9d2e0009a60014111b3bedf73c9.jpg",
+    description_title: "Descripción",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, voluptas. Aperiam cumque minus eius itaque odio ullam quam repudiandae delectus. Totam, eveniet deserunt. Nobis, mollitia natus! Architecto alias asperiores rerum.",
+    url_entry: "!#",
+    author: "Jerson Morocho",
+    date: "Marzo 17, 2021",
+    timeago: "5 min. Lectura",
+    type: "blog",
+  },
+  {
+    id: 5,
+    title: "Titulo post",
+    subtitle: null,
+    url_img:
+      "https://javascriptecuador.netlify.app/static/quito-605ac9d2e0009a60014111b3bedf73c9.jpg",
+    description_title: "Descripción",
+    description:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, voluptas. Aperiam cumque minus eius itaque odio ullam quam repudiandae delectus. Totam, eveniet deserunt. Nobis, mollitia natus! Architecto alias asperiores rerum.",
+    url_entry: "!#",
+    author: "Jerson Morocho",
+    date: "Marzo 17, 2021",
+    timeago: "5 min. Lectura",
+    type: "blog",
+  },
+  // {
+  //   id: 5,
+  //   title: "Trabajo Remoto",
+  //   subtitle: "Enero 16 - 17:00",
+  //   url_img:
+  //     "https://javascriptecuador.netlify.app/static/quito-605ac9d2e0009a60014111b3bedf73c9.jpg",
+  //   description_title: "Disertantes",
+  //   description: "Crysfel Villa, Freddy Santacruz",
+  //   url_entry: "!#",
+  //   type: "event",
+  // },
+  // {
+  //   id: 6,
+  //   title: "Guayaquil.js",
+  //   subtitle: null,
+  //   url_img:
+  //     "https://javascriptecuador.netlify.app/static/quito-605ac9d2e0009a60014111b3bedf73c9.jpg",
+  //   description_title: "Descripción",
+  //   description:
+  //     "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, voluptas. Aperiam cumque minus eius itaque odio ullam quam repudiandae delectus. Totam, eveniet deserunt. Nobis, mollitia natus! Architecto alias asperiores rerum.",
+  //   url_entry: "!#",
+  //   author: "Crysfel Villa, Freddy Santacruz",
+  //   type: "city",
+  // },
+];
+
+const BlogEntries = () => {
+  let subIndex1 = 0,
+    subIndex2 = 0,
+    subIndex3 = 0;
+  const dist = generateDistribution(fakeCardsData.length);
+  const cards = fakeCardsData.map((card, index) => {
+    let styles = {
+      flexDirection: "column",
+      paddingLeft: 0,
+    };
+    let rowStart = 0;
+    let rowEnd = 0;
+
+    if (index < dist[0][1] && index >= dist[0][0]) {
+      rowStart = 2 * subIndex1 + 1;
+      rowEnd = rowStart + 2;
+      styles.gridRow = `${rowStart} / ${rowEnd}`;
+      styles.gridColumn = "1 / 2";
+      subIndex1++;
+    }
+    if (index < dist[1][1] && index >= dist[1][0]) {
+      styles.gridRow = `${subIndex2 + 1} / ${subIndex2 + 2}`;
+      styles.gridColumn = "2 / 3";
+      styles.flexDirection = "row";
+      styles.paddingLeft = 1;
+      subIndex2++;
+    }
+    if (index < dist[2][1] && index >= dist[2][0]) {
+      rowStart = 2 * subIndex3 + 1;
+      rowEnd = rowStart + 2;
+      styles.gridRow = `${rowStart} / ${rowEnd}`;
+      styles.gridColumn = "3 / 4";
+      subIndex3++;
+    }
+
+    return (
+      <BlogCard
+        gridRow={styles.gridRow}
+        gridColumn={styles.gridColumn}
+        flexDirection={styles.flexDirection}
+        paddingLeft={styles.paddingLeft}
+        key={card.id}
+      >
+        <CardFactory entry={card} />
+      </BlogCard>
+    );
+  });
+
+  return <BlogGrid>{cards}</BlogGrid>;
+};
+
+export default BlogEntries;
diff --git a/src/components/UI/blog-entries/styles.js b/src/components/UI/blog-entries/styles.js
@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import { Card, CardContent } from "../card/styles";
+
+const BlogGrid = styled.div`
+  display: grid;
+  grid-column-gap: 3%;
+  grid-row-gap: 15px;
+  grid-template-rows: auto;
+
+  /* Small devices (landscape phones, 320px and up) */
+  @media (min-width: 320px) {
+    & {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* Extra arge devices (extra large desktops, 1201px and up) */
+  @media (min-width: 1201px) {
+    & {
+      grid-template-columns: 20% 54% 20%;
+    }
+  }
+`;
+const BlogCard = styled.div`
+  grid-row: ${(props) => props.gridRow};
+  grid-column: ${(props) => props.gridColumn};
+
+  & > ${Card} {
+    flex-direction: ${(props) => props.flexDirection};
+  }
+
+  & ${CardContent} {
+    padding-left: ${(props) => props.paddingLeft}em;
+  }
+
+  /* Small devices (landscape phones, 320px and up) */
+  @media (min-width: 320px) {
+    & {
+      grid-area: auto;
+    }
+
+    & > ${Card} {
+      flex-direction: column;
+    }
+
+    & ${CardContent} {
+      padding-left: 0;
+    }
+  }
+
+  /* Extra large devices (extra large desktops, 1201px and up) */
+  @media (min-width: 1201px) {
+    & {
+      grid-row: ${(props) => props.gridRow};
+      grid-column: ${(props) => props.gridColumn};
+    }
+
+    & > ${Card} {
+      flex-direction: ${(props) => props.flexDirection} !important;
+    }
+
+    & ${CardContent} {
+      padding-left: ${(props) => props.paddingLeft}em !important;
+    }
+  }
+
+  /* large devices (large desktops, 768px and up) */
+  @media (min-width: 768px) {
+    & > ${Card} {
+      flex-direction: row;
+    }
+
+    & ${CardContent} {
+      padding-left: 1em;
+    }
+  }
+`;
+
+export { BlogGrid, BlogCard };
diff --git a/src/components/UI/blog-entries/utils.js b/src/components/UI/blog-entries/utils.js
@@ -0,0 +1,23 @@
+const generateDistribution = (cardsLength) => {
+  const states = [
+    [0, 0, 0],
+    [0, 1, 0],
+    [1, 1, 0],
+    [1, 1, 1],
+  ];
+  // jumps indica la distribucion de las tarjetas para llenar todos los espacios
+  const jumps = [1, 2, 1];
+  const statePos = cardsLength % states.length;
+  const blockPos = Math.trunc(cardsLength / states.length);
+
+  let aux = 0,
+    cant = 0;
+
+  return states[statePos].map((el, i) => {
+    cant = el + jumps[i] * blockPos;
+    aux += cant;
+    return [aux - cant, aux];
+  });
+};
+
+export { generateDistribution };
diff --git a/src/components/UI/card/card-design.js b/src/components/UI/card/card-design.js
@@ -0,0 +1,72 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Card,
+  CardImg,
+  CardBody,
+  CardContent,
+  CardTitle,
+  CardSubtitle,
+  DescriptionTitle,
+  CardDescription,
+  ReadMoreLink,
+  CardFooter,
+  FooterLine,
+} from "./styles";
+
+export const CardDesign = ({ data, optionalData, styles }) => {
+  const {
+    id,
+    title,
+    subtitle,
+    description,
+    description_title,
+    url_img,
+    url_entry,
+  } = data;
+  const optDataKeys = Object.keys(optionalData);
+  const hasOptData = optDataKeys.length > 0;
+  const printSubtitle = subtitle && (
+    <CardSubtitle fontSize={styles.subtitle_size} as="h6">
+      {subtitle}
+    </CardSubtitle>
+  );
+  const printFooterLines = optDataKeys.map((name, index) => (
+    <FooterLine pos={index} key={name}>
+      {optionalData[name]}
+    </FooterLine>
+  ));
+
+  return (
+    <Card bgColor={styles.bg_color} allPadding={styles.padding}>
+      <CardImg bgImg={url_img} maxHeight={styles.viewport_img_height}></CardImg>
+      <CardBody>
+        <CardContent>
+          <CardTitle
+            fontSize={styles.title_size}
+            paddingBottom={styles.spacing}
+          >
+            {title}
+          </CardTitle>
+          {printSubtitle}
+          <CardDescription>
+            <DescriptionTitle>{description_title}:</DescriptionTitle>{" "}
+            {description}{" "}
+          </CardDescription>
+          <ReadMoreLink to={url_entry} color={styles.link_color}>
+            Leer más
+          </ReadMoreLink>
+          {hasOptData && <CardFooter>{printFooterLines}</CardFooter>}
+        </CardContent>
+      </CardBody>
+    </Card>
+  );
+};
+
+CardDesign.propTypes = {
+  data: PropTypes.object.isRequired,
+  optionalData: PropTypes.object,
+  styles: PropTypes.object.isRequired,
+};
+
+export default CardDesign;