Filtros del Home

app/src/components/pages/Home.tsx

@@ -0,0 +1,71 @@
+import React, { ChangeEvent, FC } from "react";
+import Select from "../UI/forms/select";
+
+const Home: FC = () => {
+    let optionList: 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 (
+        <div 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">
+                    <Select
+                        list={optionList}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            console.log(e.target.value)
+                        }
+                        name="Comparación"
+                        placeholder="Selección de finca"
+                        data-algo="algo"
+                    />
+                </div>
+                <div className="col-6 col-sm-3 col-lg-2 mb-2 mb-sm-0">
+                    <Select
+                        list={campaignList}
+                        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">
+                    <Select
+                        list={monthList}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            console.log(e.target.value)
+                        }
+                        name="Comparación"
+                        placeholder="Mes"
+                        data-algo="algo"
+                    />
+                </div>
+
+                <div className="col-12 col-sm-2 col-lg-2">
+                    <button type="button" className="btn btn-primary">Buscar</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Home;
+