Esqueletos de tablas de grados dias y precipitacinoes

app/src/components/data/DegreeDay/index.tsx

@@ -1,6 +1,54 @@
 import React, { FC } from "react";
+import * as classes from "../tables.module.css";
 
-const DegreeDay: FC = () => {
-  return null;
+interface DegreeDayProps {
+  title: String;
+  periodString: String;
+}
+
+const DegreeDay: FC<DegreeDayProps> = ({ title, periodString }) => {
+  const suffix = "Precipitaciones mensuales";
+  return (
+    <section>
+      <h3>{`${title} - ${suffix}`}</h3>
+
+      <table className={classes.table}>
+        <thead>
+          <tr>
+            <th className={classes.cell}>{periodString}</th>
+            <td className={classes.cell}>Octubre</td>
+            <td className={classes.cell}>Noviembre</td>
+            <td className={classes.cell}>Diciembre</td>
+            <td className={classes.cell}>Enero</td>
+            <td className={classes.cell}>Febrero</td>
+            <td className={classes.cell}>Marzo</td>
+            <td className={classes.cell}>Precipitaciones acumuladas [mm]</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th className={classes.cell}>Temporada 2020-2021-Vendimia 2021</th>
+            <td className={classes.cell}>4,44</td>
+            <td className={classes.cell}>5,02</td>
+            <td className={classes.cell}>11,02</td>
+            <td className={classes.cell}>14,02</td>
+            <td className={classes.cell}>12,02</td>
+            <td className={classes.cell}>8,02</td>
+            <td className={classes.cell}>205</td>
+          </tr>
+          <tr>
+            <th className={classes.cell}>Temporada 2020-2021-Vendimia 2021</th>
+            <td className={classes.cell}>4,44</td>
+            <td className={classes.cell}>5,02</td>
+            <td className={classes.cell}>11,02</td>
+            <td className={classes.cell}>14,02</td>
+            <td className={classes.cell}>12,02</td>
+            <td className={classes.cell}>8,02</td>
+            <td className={classes.cell}>440</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+  );
 };
 export default DegreeDay;

app/src/components/data/Precipitation/index.tsx

@@ -1,6 +1,51 @@
 import React, { FC } from "react";
+import * as classes from "../tables.module.css";
 
-const Precipitation: FC = () => {
-  return null;
+interface PrecipitationProps {
+  title: String;
+  periodString: String;
+}
+
+const Precipitation: FC<PrecipitationProps> = ({ title, periodString }) => {
+  const suffix = "Grados días promedios mensuales";
+  return (
+    <section>
+      <h3>{`${title} - ${suffix}`}</h3>
+
+      <table className={classes.table}>
+        <thead>
+          <tr>
+            <th className={classes.cell}>{periodString}</th>
+            <td className={classes.cell}>Octubre</td>
+            <td className={classes.cell}>Noviembre</td>
+            <td className={classes.cell}>Diciembre</td>
+            <td className={classes.cell}>Enero</td>
+            <td className={classes.cell}>Febrero</td>
+            <td className={classes.cell}>Marzo</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th className={classes.cell}>Temporada 2020-2021-Vendimia 2021</th>
+            <td className={classes.cell}>4,44</td>
+            <td className={classes.cell}>5,02</td>
+            <td className={classes.cell}>11,02</td>
+            <td className={classes.cell}>14,02</td>
+            <td className={classes.cell}>12,02</td>
+            <td className={classes.cell}>8,02</td>
+          </tr>
+          <tr>
+            <th className={classes.cell}>Temporada 2020-2021-Vendimia 2021</th>
+            <td className={classes.cell}>4,44</td>
+            <td className={classes.cell}>5,02</td>
+            <td className={classes.cell}>11,02</td>
+            <td className={classes.cell}>14,02</td>
+            <td className={classes.cell}>12,02</td>
+            <td className={classes.cell}>8,02</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+  );
 };
 export default Precipitation;

app/src/components/pages/Home.tsx

@@ -76,8 +76,14 @@ const Home: FC = () => {
       <section className="row">
         <div className="col-xl-6">
           <TemperaturePerSeason />
-          <DegreeDay />
-          <Precipitation />
+          <DegreeDay
+            title={"Vista flores"}
+            periodString={"1ro Octubre - 31 Marzo"}
+          />
+          <Precipitation
+            title={"Maipú"}
+            periodString={"1ro Octubre - 31 Marzo"}
+          />
         </div>
         <div className="col-xl-6">
           <TemperaturePerSector />