Move all cards into their own components

src/App.js

@@ -2,41 +2,23 @@ import { React, useState } from 'react';
 
 import {
   ChakraProvider,
-  Text,
   extendTheme,
-  Select,
-  Card,
-  CardHeader,
   Heading,
-  CardBody,
   Center,
   SimpleGrid,
   Box,
-  Stack,
-  NumberInput,
-  NumberInputField,
-  Slider,
-  SliderFilledTrack,
-  SliderMark,
-  SliderTrack,
-  SliderThumb,
-  Tooltip
+
 } from '@chakra-ui/react';
 
-import { FlatDetails, ResultsCard } from './Solimieten';
-import { flatData } from './Data';
+import { FlatSelectionCard, FlatDetailsCard, SelfEvaluationCard, ResultsCard } from './Solimieten';
+
 import { Nav } from './Nav';
 
 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();
 
-  const [income, setIncome] = useState(0);
-
-  const [sliderValue, setSliderValue] = useState(30)
-  const [showTooltip, setShowTooltip] = useState(false)
+  const [rent, setRent] = useState(0);
 
   const theme = extendTheme({
     "colors": {
@@ -55,33 +37,6 @@ function App() {
     }
   });
 
-  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]);
-    }
-  }
-
-  function flatSelected(e) {
-    var index = e.target.value;
-
-    setSelectedFlat(flatOptions[index]);
-  }
-
-  const formatEuro = (val) => val + ' €';
-  const parseEuro = (val) => val.replace(/^€/, '')
 
 
 
@@ -91,91 +46,18 @@ function App() {
       <Nav></Nav>
       <Center>
         <SimpleGrid columns={2} spacing={4}>
+
           <Heading>Wohnung</Heading>
           <Box></Box>
 
-          <Card>
-            <CardHeader>
-              <Heading size='md'>Wohnungsauswahl</Heading>
-            </CardHeader>
-            <CardBody>
-              <Stack spacing={4} w="500px">
-                <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>
-              </Stack>
-            </CardBody>
-          </Card>
-          <FlatDetails flat={selectedFlat} />
+          <FlatSelectionCard setSelectedFlat={setSelectedFlat} />
+          <FlatDetailsCard flat={selectedFlat} />
 
           <Heading>Selbsteinschätzung</Heading>
           <Box></Box>
 
-          <Card>
-            <CardBody maxW={500}>
-              <Stack spacing={3}>
-                <Text>Wie hoch ist euer/dein Haushaltsnetto? Beachtet dabei alle regelmäßigen Einkünfte wie Gehalt, Rente, Mieteinkünfte oder Kapitalerträge </Text>
-                <NumberInput
-                  onChange={(valueString) => setIncome(parseEuro(valueString))}
-                  value={formatEuro(income)}
-                >
-                  <NumberInputField />
-                </NumberInput>
-
-                <Text>Wie viel Prozent eures/deines Nettoeinkommens kannst du für Miete aufbringen?</Text>
-                <Slider
-                  id='slider'
-                  defaultValue={30}
-                  min={10}
-                  max={50}
-                  mb={5}
-                  colorScheme='teal'
-                  onChange={(v) => setSliderValue(v)}
-                  onMouseEnter={() => setShowTooltip(true)}
-                  onMouseLeave={() => setShowTooltip(false)}
-                >
-                  <SliderMark value={10} mt='1' ml='-2.5' fontSize='sm'>
-                    10%
-                  </SliderMark>
-                  <SliderMark value={20} mt='1' ml='-2.5' fontSize='sm'>
-                    20%
-                  </SliderMark>
-                  <SliderMark value={30} mt='1' ml='-2.5' fontSize='sm'>
-                    30%
-                  </SliderMark>
-                  <SliderMark value={40} mt='1' ml='-2.5' fontSize='sm'>
-                    40%
-                  </SliderMark>
-                  <SliderMark value={50} mt='1' ml='-2.5' fontSize='sm'>
-                    50%
-                  </SliderMark>
-                  <SliderTrack>
-                    <SliderFilledTrack />
-                  </SliderTrack>
-                  <Tooltip
-                    hasArrow
-                    bg='teal.500'
-                    color='white'
-                    placement='top'
-                    isOpen={showTooltip}
-                    label={`${sliderValue}%`}
-                  >
-                    <SliderThumb />
-                  </Tooltip>
-
-
-                </Slider>
-              </Stack>
-            </CardBody>
-          </Card>
-          <ResultsCard income={income} percentage={sliderValue} flat={selectedFlat} />
+          <SelfEvaluationCard rent={rent} setRent={setRent} />
+          <ResultsCard rent={rent} flat={selectedFlat} />
         </SimpleGrid>
       </Center>
     </ChakraProvider >