New favicon and FlatDetails card

src/App.js

@@ -2,12 +2,7 @@ import { React, useState } from 'react';
 
 import {
   ChakraProvider,
-  Box,
   Text,
-  Link,
-  VStack,
-  Code,
-  Grid,
   theme,
   Select,
   Card,
@@ -15,7 +10,10 @@ import {
   Heading,
   CardBody,
   Center,
+  SimpleGrid,
 } from '@chakra-ui/react';
+
+import { FlatDetails } from './Solimieten';
 import { ColorModeSwitcher } from './ColorModeSwitcher';
 import { flatData } from './Data';
 
@@ -23,6 +21,7 @@ function App() {
   const [levelOptions, setLevelOption] = useState([{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]);
   const [flatOptions, setFlatOptions] = useState([]);
   const [selectedBuilding, setSelectedBuilding] = useState();
+  const [selectedFlat, setSelectedFlat] = useState();
 
   function buildingSelected(e) {
     var newOptions;
@@ -42,28 +41,38 @@ function App() {
       setFlatOptions(flatData[selectedBuilding][e.target.value]);
     }
   }
+
+  function flatSelected(e) {
+    var index = e.target.value;
+
+    setSelectedFlat(flatOptions[index]);
+  }
+
   return (
 
     <ChakraProvider theme={theme}>
       <Center>
-        <Card>
-          <CardHeader>
-            <Heading size='md'>Wohnungsauswahl</Heading>
-          </CardHeader>
-          <CardBody>
-            <Text>View a summary of all your customers over the last month.</Text>
-            <Select placeholder='Gebäude auswählen' onChange={buildingSelected}>
-              <option value='north'>Nordbau</option>
-              <option value='south'>Südbau</option>
-            </Select>
-            <Select placeholder='Etage auswählen' onChange={levelSelected}>
-              {levelOptions.map(({ value, label }, index) => <option value={value} >{label}</option>)}
-            </Select>
-            <Select placeholder='Wohnung auswählen'>
-              {flatOptions.map((flat) => <option value={flat} >{flat.print()}</option>)}
-            </Select>
-          </CardBody>
-        </Card>
+        <SimpleGrid columns={2} spacing={4}>
+          <Card>
+            <CardHeader>
+              <Heading size='md'>Wohnungsauswahl</Heading>
+            </CardHeader>
+            <CardBody>
+              <Text>View a summary of all your customers over the last month.</Text>
+              <Select placeholder='Gebäude auswählen' onChange={buildingSelected}>
+                <option value='north'>Nordbau</option>
+                <option value='south'>Südbau</option>
+              </Select>
+              <Select placeholder='Etage auswählen' onChange={levelSelected}>
+                {levelOptions.map(({ value, label }, index) => <option value={value} >{label}</option>)}
+              </Select>
+              <Select placeholder='Wohnung auswählen' onChange={flatSelected}>
+                {flatOptions.map((flat, index) => <option value={index} >{flat.print()}</option>)}
+              </Select>
+            </CardBody>
+          </Card>
+          <FlatDetails flat={selectedFlat} />
+        </SimpleGrid>
       </Center>
     </ChakraProvider >
   );