estados y checkbox primer estilo

app/src/components/UI/checkbox/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+interface checkProps {
+    changeSeason:any;
+    changeDegree:any;
+    changePrep:any;
+
+}
+
+
+const Checkbox: FC<checkProps> = ({changeSeason,changeDegree,changePrep,...props }) => {
+    return (    
+        <section className="row p-lg-4 p-md-3 p-2">
+            <div className="btn-group col-8" role="group" aria-label="Basic checkbox toggle button group">
+                {/* 
+                {list.map((tittle:any) =>
+                    <input type="checkbox" className="btn-check" id="btncheck1" autoComplete="off"/>
+                    <label className="btn btn-outline-primary" htmlFor="btncheck1">{tittle}</label>
+                ): null} */}
+                <input type="checkbox" className="btn-check"  id="btncheckSeason" autoComplete="off"/>
+                <label className="btn btn-outline-primary" onClick={changeSeason} htmlFor="btncheckSeason">GeneralPerSeason</label>
+
+                <input type="checkbox" className="btn-check" id="btncheckDegree" autoComplete="off"/>
+                <label className="btn btn-outline-primary" onClick={changeDegree} htmlFor="btncheckDegree">DegreeDay</label>
+
+                <input type="checkbox" className="btn-check" id="btncheckPre" autoComplete="off"/>
+                <label className="btn btn-outline-primary" onClick={changePrep} htmlFor="btncheckPre">Precipitation</label>
+
+            </div>
+        </section>     
+  );
+};
+
+export default Checkbox;
+

app/src/components/pages/Home.tsx

@@ -1,16 +1,27 @@
-import React, { useContext, FC } from "react";
+import React, { useContext, FC, useState } from "react";
 // import DegreeDay from "../data/DegreeDay";
 // import TemperaturePerSeason from "../data/TemperaturePerSeason";
 import GeneralPerSector from "../data/GeneralPerSector";
+import GeneralPerSeason from "../data/GeneralPerSeason";
+import DegreeDay from "../data/DegreeDay";
+import HeatMap from "../data/HeatMap";
+import Precipitation from "../data/Precipitation";
 // import Precipitation from "../data/Precipitation";
 import { UserStateContext } from "../../context/auth/AuthProvider";
 import DashboardProvider from "../../context/dashboard/Provider";
 import { Redirect } from "react-router-dom";
 import Layout from "../layout";
 import Cockpit from "../UI/dashboard/cockpit";
+import Checkbox from "../UI/checkbox";
 
 const Home: FC = () => {
   const userState = useContext(UserStateContext);
+  const [getViewSeasonState, setViewSeasonState] = useState<Boolean>(false);
+  const [getViewDegreeState, setViewDegreeState] = useState<Boolean>(false);
+  const [getViewPrepState, setViewPrepState] = useState<Boolean>(false);
+  const changeSeason = () => {if(getViewSeasonState){setViewSeasonState(false)}else{setViewSeasonState(true)}}
+  const changeDegree = () => {if(getViewDegreeState){setViewDegreeState(false)}else{setViewDegreeState(true)}}
+  const changePrep = () => {if(getViewPrepState){setViewPrepState(false)}else{setViewPrepState(true)}}
 
   if (!userState.loggedIn) {
     return <Redirect to="/login" />;
@@ -26,6 +37,31 @@ const Home: FC = () => {
               <GeneralPerSector />
             </div>
           </section>
+
+          <Checkbox changeSeason={changeSeason} changeDegree={changeDegree} changePrep={changePrep}/>
+
+          { getViewSeasonState ?
+          <section className="row">
+            <div className="col-xl-8">
+              <GeneralPerSeason />
+            </div>
+          </section>
+          : null }
+          { getViewDegreeState ?  
+          <section className="row">
+            <div className="col-xl-8">
+              <DegreeDay title="hola" periodString="0/0/0" />
+            </div>
+          </section> 
+          : null }
+          { getViewPrepState ?
+          <section className="row">
+            <div className="col-xl-8">
+              <Precipitation title="hola" periodString="0/0/0" />
+            </div>
+          </section>
+          : null }
+
         </DashboardProvider>
       </Layout>
     </>