Add a new component for schedule list

components/CountrySchedule.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+const countryZones = [
+  {
+    'gmt': -3,
+    'countries': 'chile, argentina, brazil, uruguay',
+  },
+  {
+    'gmt': -5,
+    'countries': 'colombia, ecuador, peru',
+  },
+  {
+    'gmt': -4,
+    'countries': 'bolivia, paraguay, venezuela',
+  },
+  {
+    'gmt': -7,
+    'countries': 'mexico',
+  },
+  {
+    'gmt': 2,
+    'countries': 'usa',
+  }
+];
+
+function CountryTimesListItem({gmtItem}) {
+  const countryFlags = gmtItem.countries.split(',').map((country) => {
+    return <span className={`flag-${country.trim()}`}></span>
+  });
+  return (
+    <li>
+    <span className="flags">
+    {countryFlags}
+    </span>
+    <span className="times">
+    GMT {gmtItem.gmt.toString()}
+    </span>
+    </li>
+  );
+}
+
+const CountrySchedule = () => {
+  const listItmes = countryZones.map((gmtItem) => {
+    return <CountryTimesListItem gmtItem={gmtItem} />
+  });
+
+  return (
+    <ul className="is-size-6 stream-times">
+    {listItmes}
+    </ul>
+  );
+}
+
+export default CountrySchedule;

components/Grid.jsx

@@ -1,5 +1,7 @@
 import React from "react";
 import Link from "next/link";
+import CountrySchedule from "./CountrySchedule";
+
 import {
   faTwitch,
   faYoutube,
@@ -9,6 +11,7 @@ import {
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+
 const Grid = () => (
   <div className="section-grid">
     <div className="tile">
@@ -22,32 +25,7 @@ const Grid = () => (
               <span className="ml-3">Twitch</span>
             </p>
             <p className="is-size-6">En vivo cada Jueves</p>
-            <ul className="is-size-6 stream-times">
-              <li>
-                <span className="flags">🇨🇱🇦🇷🇧🇷🇺🇾</span>
-                <span className="times">9 pm GMT-3</span>
-              </li>
-              <li>
-                <span className="flags">🇨🇴🇪🇨🇵🇪</span>{" "}
-                <span className="times">7 pm GMT-5</span>
-              </li>
-              <li>
-                <span className="flags">🇧🇴🇵🇾🇻🇪</span>
-                <span className="times">8 pm GMT-4</span>
-              </li>
-              <li>
-                <span className="flags">🇲🇽</span>
-                <span className="times">6 pm CST GMT-7</span>
-              </li>
-              <li>
-                <span className="flags">🇪🇸</span>
-                <span className="times">2 am GMT+2</span>
-              </li>
-              <li>
-                <span className="flags">🇺🇸</span>
-                <span className="times">5 pm PDT GMT-7</span>
-              </li>
-            </ul>
+            <CountrySchedule />
           </a>
         </article>
         <article className="tile is-child box discord-tile">

styles/globals.css

@@ -175,10 +175,53 @@ a {
 .stream-times .times {
   flex: 5;
 }
+.stream-next-session-notice {
+  font-size: 10px;
+  margin-top: 1rem;
+}
 
 @media (max-width: 768px) {
   .footer-container {
     position: relative;
     margin-top: 3rem;
   }
 }
+
+
+.flag-chile:before {
+   content: '🇨🇱';
+}
+.flag-argentina:before {
+  content: '🇦🇷';
+}
+.flag-brazil:before {
+   content: '🇧🇷';
+}
+.flag-uruguay:before {
+   content: '🇺🇾';
+}
+.flag-colombia:before {
+   content: '🇨🇴';
+}
+.flag-ecuador:before {
+   content: '🇪🇨';
+}
+.flag-peru:before {
+   content: '🇵🇪';
+}
+.flag-bolivia:before {
+   content: '🇧🇴';
+}
+.flag-paraguay:before {
+  content: '🇵🇾';
+}
+.flag-venezuela:before {
+  content: '🇻🇪';
+}
+.flag-mexico:before {
+  content: '🇲🇽';
+}
+.flag-usa:before {
+  content: '🇺🇸';
+}
+