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>
+        <SimpleGrid columns={2} spacing={4}>
-          <CardHeader>
+          <Card>
-            <Heading size='md'>Wohnungsauswahl</Heading>
+            <CardHeader>
-          </CardHeader>
+              <Heading size='md'>Wohnungsauswahl</Heading>
-          <CardBody>
+            </CardHeader>
-            <Text>View a summary of all your customers over the last month.</Text>
+            <CardBody>
-            <Select placeholder='Gebäude auswählen' onChange={buildingSelected}>
+              <Text>View a summary of all your customers over the last month.</Text>
-              <option value='north'>Nordbau</option>
+              <Select placeholder='Gebäude auswählen' onChange={buildingSelected}>
-              <option value='south'>Südbau</option>
+                <option value='north'>Nordbau</option>
-            </Select>
+                <option value='south'>Südbau</option>
-            <Select placeholder='Etage auswählen' onChange={levelSelected}>
+              </Select>
-              {levelOptions.map(({ value, label }, index) => <option value={value} >{label}</option>)}
+              <Select placeholder='Etage auswählen' onChange={levelSelected}>
-            </Select>
+                {levelOptions.map(({ value, label }, index) => <option value={value} >{label}</option>)}
-            <Select placeholder='Wohnung auswählen'>
+              </Select>
-              {flatOptions.map((flat) => <option value={flat} >{flat.print()}</option>)}
+              <Select placeholder='Wohnung auswählen' onChange={flatSelected}>
-            </Select>
+                {flatOptions.map((flat, index) => <option value={index} >{flat.print()}</option>)}
-          </CardBody>
+              </Select>
-        </Card>
+            </CardBody>
+          </Card>
+          <FlatDetails flat={selectedFlat} />
+        </SimpleGrid>
       </Center>
     </ChakraProvider >
   );

src/Solimieten.js

@@ -0,0 +1,73 @@
+import {
+    Card,
+    CardHeader,
+    Heading,
+    CardBody,
+    Stack,
+    StackDivider,
+    Box,
+    Text,
+    Badge
+} from '@chakra-ui/react';
+
+export function FlatDetails({ flat }) {
+    var body = <CardBody>
+        Bitte auswählen
+    </CardBody>;
+
+    var badges = "";
+
+    if (flat) {
+        body = <CardBody>
+
+            <Stack divider={<StackDivider />} spacing='4'>
+
+                <Box>
+                    <Heading size='xs' textTransform='uppercase'>
+                        Bezeichnung
+                    </Heading>
+                    <Text pt='2' fontSize='sm'>
+                        {flat.name}
+                    </Text>
+                </Box>
+                <Box>
+                    <Heading size='xs' textTransform='uppercase'>
+                        Zimmeranzahl
+                    </Heading>
+                    <Text pt='2' fontSize='sm'>
+                        {flat.numRooms}
+                    </Text>
+                </Box>
+                <Box>
+                    <Heading size='xs' textTransform='uppercase'>
+                        Private Fläche
+                    </Heading>
+                    <Text pt='2' fontSize='sm'>
+                        {flat.sizePrivate} m²
+                    </Text>
+                </Box>
+            </Stack>
+        </CardBody>;
+
+        if (flat.isWbs) {
+            badges = <Badge colorScheme='blue'>
+                mit WBS
+            </Badge>;
+        } else {
+            badges = <Badge colorScheme='yellow'>
+                ohne WBS
+            </Badge>;
+        }
+    }
+
+    return (
+        <Card>
+
+            <CardHeader>
+                {badges}
+                <Heading size='md'>Wohnungsdetails</Heading>
+            </CardHeader>
+            {body}
+        </Card>
+    );
+}