Add income and result card.

src/App.js

@@ -3,7 +3,7 @@ import { React, useState } from 'react';
 import {
   ChakraProvider,
   Text,
-  theme,
+  extendTheme,
   Select,
   Card,
   CardHeader,
@@ -11,11 +11,21 @@ import {
   CardBody,
   Center,
   SimpleGrid,
+  Box,
+  Stack,
+  NumberInput,
+  NumberInputField,
+  Slider,
+  SliderFilledTrack,
+  SliderMark,
+  SliderTrack,
+  SliderThumb,
+  Tooltip
 } from '@chakra-ui/react';
 
-import { FlatDetails } from './Solimieten';
-import { ColorModeSwitcher } from './ColorModeSwitcher';
+import { FlatDetails, ResultsCard } from './Solimieten';
 import { flatData } from './Data';
+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" }]);
@@ -23,6 +33,28 @@ function App() {
   const [selectedBuilding, setSelectedBuilding] = useState();
   const [selectedFlat, setSelectedFlat] = useState();
 
+  const [income, setIncome] = useState(0);
+
+  const [sliderValue, setSliderValue] = useState(30)
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  const theme = extendTheme({
+    "colors": {
+      "gray": {
+        "50": "#F3FEE7",
+        "100": "#DEFCBB",
+        "200": "#C8FA8F",
+        "300": "#B3F862",
+        "400": "#9DF636",
+        "500": "#88F50A",
+        "600": "#6DC408",
+        "700": "#529306",
+        "800": "#366204",
+        "900": "#1B3102"
+      }
+    }
+  });
+
   function buildingSelected(e) {
     var newOptions;
     if (e.target.value === "south") {
@@ -48,30 +80,102 @@ function App() {
     setSelectedFlat(flatOptions[index]);
   }
 
+  const formatEuro = (val) => val + ' €';
+  const parseEuro = (val) => val.replace(/^€/, '')
+
+
+
   return (
 
     <ChakraProvider theme={theme}>
+      <Nav></Nav>
       <Center>
         <SimpleGrid columns={2} spacing={4}>
+          <Heading>Wohnung</Heading>
+          <Box></Box>
+
           <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>
+              <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} />
+
+          <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} />
         </SimpleGrid>
       </Center>
     </ChakraProvider >