split location onChange to separate function. added temperature toggle

src/components/MainContent/MainContent.tsx

@@ -1,21 +1,30 @@
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState, ChangeEventHandler } from 'react';
 import LocationSelector from '../LocationSelector';
+import TemperatureToggle from '../TemperatureToggle';
 import { TemperatureUnit, Location } from '../../sharedTypes';
 import './MainContent.css';
 
 const MainContent: FunctionComponent = () => {
   const [location, setLocation] = useState<Location>('lisbon');
   const [temperatureUnit, setTemperatureUnit] = useState<TemperatureUnit>('celsius');
 
+  const handleLocationChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
+    const value = event.target.value as Location;
+    setLocation(value);
+  };
+
   return (
     <main className="main-content">
-      <LocationSelector
-        value={location}
-        onChange={(event) => {
-          const value = event.target.value as Location;
-          setLocation(value);
-        }}
-      />
+      <section className="controls-section">
+        <LocationSelector
+          value={location}
+          onChange={handleLocationChange}
+        />
+        <TemperatureToggle
+          value={temperatureUnit}
+          onToggle={setTemperatureUnit}
+        />
+      </section>
     </main>
   );
 };