Nueva barra con calendarios y mas responsiva

app/src/components/UI/forms/calendarInput.tsx

@@ -0,0 +1,24 @@
+import React, { FC, useState } from "react";
+
+interface calendarInputProps {
+    onChange: Function;
+    name: string;
+    value?: string;
+    min?: string;
+    max?: string;
+    [index: string]: any;
+}
+
+const CalendarInput: FC<calendarInputProps> = ({ className, ...props }) => {
+
+    const [startDate, setStartDate] = useState(new Date());
+
+    return (
+        <input {...(props as any)}
+            defaultValue={startDate.toISOString().substr(0, 10)}
+            className={`form-control ${className}`}
+            type="date" id="start" />
+    );
+};
+
+export default CalendarInput;

app/src/components/UI/forms/select.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 
 interface selectProps {
-  list: string[] | number[];
+  list?: string[] | number[];
   onChange: Function;
   placeholder: string;
   name: string;
@@ -11,10 +11,10 @@ interface selectProps {
 // En las props hago un "rest", que me da el resto del objeto que estoy desestructurando
 const Select: FC<selectProps> = ({ list, className, ...props }) => {
   return (
-    <select {...(props as any)} className={`form-select ${className}`}>
+    <select {...(props as any)}  className={`form-select ${className}`}>
       {props.placeholder ? <option value="">{props.placeholder}</option> : null}
 
-      {list.map((item) => (
+      {list?.map((item) => (
         <option value={item} key={item}>
           {item}
         </option>

app/src/components/pages/Home.tsx

@@ -4,76 +4,61 @@ import DegreeDay from "../data/DegreeDay";
 import TemperaturePerSeason from "../data/TemperaturePerSeason";
 import TemperaturePerSector from "../data/TemperaturePerSector";
 import Precipitation from "../data/Precipitation";
+import CalendarInput from "../UI/forms/calendarInput";
 
 const Home: FC = () => {
-  let optionList: string[] | number[] = ["a", "b", "c", "d"];
+  let fincaList: string[] | number[] = ["a", "b", "c", "d"];
   let campaignList: string[] | number[] = ["2018", "2019", "2020", "2021"];
-  let monthList: string[] | number[] = [
-    "Enero",
-    "Febrero",
-    "Marzo",
-    "Abril",
-    "Mayo",
-    "Junio",
-    "Julio",
-    "Agosto",
-    "Septiembre",
-    "Octubre",
-    "Noviembre",
-    "Diciembre",
-  ];
 
   return (
     <>
       <section className="row p-lg-4 p-md-3 p-2">
-        <div className="row mb-2 mb-md-4">
-          <div className="col-12 col-lg-1 mb-2 mb-sm-3 mb-md-0 align-self-center">
-            Titulo
-          </div>
 
-          <div className="col-12 col-sm-4 col-lg-3 mb-2 mb-sm-0">
+          <div className="col-12 col-lg-4 mb-2 col-xl-3 mb-xl-0">
             <Select
-              list={optionList}
+              list={fincaList}
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 console.log(e.target.value)
               }
               name="Comparación"
-              placeholder="Selección de finca"
-              data-algo="algo"
+              placeholder="Fincas"
             />
           </div>
-          <div className="col-6 col-sm-3 col-lg-2 mb-2 mb-sm-0">
-            <Select
-              list={campaignList}
+          <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+            <CalendarInput
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                console.log(e.target.value)
+              }
+              name="Comparación"
+            />
+          </div>
+          <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
+            <CalendarInput
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 console.log(e.target.value)
               }
               name="Comparación"
-              placeholder="Campaña"
-              data-algo="algo"
             />
           </div>
-          <div className="col-6 col-sm-3 col-lg-2 mb-2 mb-sm-0">
+          <div className="col-6 col-lg-4 mb-2 col-xl-auto mb-xl-0">
             <Select
-              list={monthList}
+              list={campaignList}
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 console.log(e.target.value)
               }
               name="Comparación"
-              placeholder="Mes"
-              data-algo="algo"
+              placeholder="Año historicos"
             />
           </div>
 
-          <div className="col-12 col-sm-2 col-lg-2">
+          <div className="col-auto">
             <button type="button" className="btn btn-primary">
-              Buscar
+              Aplicar
             </button>
           </div>
-        </div>
       </section>
 
-      <section className="row">
+      {/* <section className="row">
         <div className="col-xl-6">
           <TemperaturePerSeason />
           <DegreeDay
@@ -88,7 +73,7 @@ const Home: FC = () => {
         <div className="col-xl-6">
           <TemperaturePerSector />
         </div>
-      </section>
+      </section> */}
     </>
   );
 };