First version with flat picker

src/App.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { React, useState } from 'react';
+
 import {
   ChakraProvider,
   Box,
@@ -8,34 +9,63 @@ import {
   Code,
   Grid,
   theme,
+  Select,
+  Card,
+  CardHeader,
+  Heading,
+  CardBody,
+  Center,
 } from '@chakra-ui/react';
 import { ColorModeSwitcher } from './ColorModeSwitcher';
-import { Logo } from './Logo';
+import { flatData } from './Data';
 
 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();
+
+  function buildingSelected(e) {
+    var newOptions;
+    if (e.target.value === "south") {
+      newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }];
+    } else {
+      newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }];
+    }
+    setLevelOption(newOptions);
+    setSelectedBuilding(e.target.value);
+  };
+
+
+  function levelSelected(e) {
+    var newData = flatData[selectedBuilding][e.target.value];
+    if (newData) {
+      setFlatOptions(flatData[selectedBuilding][e.target.value]);
+    }
+  }
   return (
+
     <ChakraProvider theme={theme}>
-      <Box textAlign="center" fontSize="xl">
-        <Grid minH="100vh" p={3}>
-          <ColorModeSwitcher justifySelf="flex-end" />
-          <VStack spacing={8}>
-            <Logo h="40vmin" pointerEvents="none" />
-            <Text>
-              Edit <Code fontSize="xl">src/App.js</Code> and save to reload.
-            </Text>
-            <Link
-              color="teal.500"
-              href="https://chakra-ui.com"
-              fontSize="2xl"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Learn Chakra
-            </Link>
-          </VStack>
-        </Grid>
-      </Box>
-    </ChakraProvider>
+      <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>
+      </Center>
+    </ChakraProvider >
   );
 }