Add info text and range indicator

src/App.js

@@ -7,6 +7,11 @@ import {
   Center,
   SimpleGrid,
   Box,
+  Text,
+  Stack,
+  useColorModeValue,
+  OrderedList,
+  ListItem,
 
 } from '@chakra-ui/react';
 
@@ -45,20 +50,38 @@ function App() {
     <ChakraProvider theme={theme}>
       <Nav></Nav>
       <Center p={5}>
-        <SimpleGrid columns={{ base: 1, md: 2, lg: 2 }} spacing={4}>
+        <Stack maxWidth={1200}>
+          <Box p={6} borderRadius="lg" bg={useColorModeValue('gray.100', 'gray.200')}>
+            <Text>
+              <Heading>Allemende Solimieten-Helferlein</Heading>
 
-          <Heading>Wohnung</Heading>
-          <Box></Box>
+              Im Rahmen des Konzept für solidarische Mieten, kann jede Partei in der Allmende ihre Miethöhe selbst bestimmen.
+              Dieses Tool soll als Orientierungshilfe bei der Selbsteinschätzung dienen.
+            </Text>
+            <Text pt={3}>Dies geschieht in folgenden Schritten:
+            </Text>
+            <OrderedList pt={3}>
+              <ListItem>Wähle deine Wohnung aus</ListItem>
+              <ListItem>Bestimme das monatliche Haushaltseinkommen</ListItem>
+              <ListItem>Wähle den Prozentsatz des Nettoeinkommens, den du zu zahlen bereit bist aus</ListItem>
+              <ListItem>Nun siehst du den daraus resultierenden Mietpreis absolut und auf den Quadratmeter gerechnet.</ListItem>
+            </OrderedList>
+          </Box>
+          <SimpleGrid pt={5} columns={{ base: 1, md: 2, lg: 2 }} spacing={4}>
 
-          <FlatSelectionCard setSelectedFlat={setSelectedFlat} />
-          <FlatDetailsCard flat={selectedFlat} />
+            <Heading>Wohnung</Heading>
+            <Box></Box>
 
-          <Heading>Selbsteinschätzung</Heading>
-          <Box></Box>
+            <FlatSelectionCard setSelectedFlat={setSelectedFlat} />
+            <FlatDetailsCard flat={selectedFlat} />
 
-          <SelfEvaluationCard rent={rent} setRent={setRent} />
-          <ResultsCard rent={rent} flat={selectedFlat} />
-        </SimpleGrid>
+            <Heading>Selbsteinschätzung</Heading>
+            <Box></Box>
+
+            <SelfEvaluationCard rent={rent} setRent={setRent} />
+            <ResultsCard rent={rent} flat={selectedFlat} />
+          </SimpleGrid>
+        </Stack>
       </Center>
     </ChakraProvider >
   );

src/Data.js

@@ -31,4 +31,7 @@ export const flatData = {
             new Flat("W 2.7", 5, 95.7)
         ]
     }
-}
+}
+
+export const minRent = 9.50;
+export const maxRent = 15.60;

src/Solimieten.js

@@ -14,6 +14,7 @@ import {
     StatNumber,
     StatGroup,
     Select,
+    Progress,
     NumberInput,
     NumberInputField,
     Slider,
@@ -24,7 +25,7 @@ import {
     Tooltip
 } from '@chakra-ui/react';
 
-import { flatData } from './Data';
+import { flatData, minRent, maxRent } from './Data';
 
 export function FlatSelectionCard({ setSelectedFlat }) {
     const [levelOptions, setLevelOption] = useState([{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]);
@@ -222,18 +223,42 @@ export function ResultsCard({ rent, flat }) {
     var body = <CardBody></CardBody>
     if (flat) {
         var relativeRent = rent / flat.sizePrivate;
+        var rangePosition = ((relativeRent - minRent) / (maxRent - minRent)) * 100;
+        if (rangePosition < 0) { rangePosition = 0; }
+        if (rangePosition > 100) { rangePosition = 100; }
+        var color = "green";
+        if (rangePosition > 33) { color = "yellow"; }
+        if (rangePosition > 66) { color = "red"; }
         body = <CardBody>
-            <StatGroup>
-                <Stat>
-                    <StatLabel>Miete</StatLabel>
-                    <StatNumber>{rent} €</StatNumber>
-                </Stat>
+            <Stack>
+                <StatGroup>
+                    <Stat>
+                        <StatLabel>Miete</StatLabel>
+                        <StatNumber>{rent} €</StatNumber>
+                    </Stat>
 
-                <Stat>
-                    <StatLabel>Pro m²</StatLabel>
-                    <StatNumber>{relativeRent.toFixed(2)} € </StatNumber>
-                </Stat>
-            </StatGroup>
+                    <Stat>
+                        <StatLabel>Pro m²</StatLabel>
+                        <StatNumber>{relativeRent.toFixed(2)} € </StatNumber>
+                    </Stat>
+                </StatGroup>
+                <Text>
+                    Im Folgenden siehst du, wo deine Miete auf der Spanne zwischen WBS-Satz und
+                    frei finanzierten Wohnungen ohne Soli-Ausgleich liegen würde.
+                </Text>
+                <Progress colorScheme={color} size='sm' value={rangePosition} />
+                <StatGroup>
+                    <Stat>
+                        <StatLabel>WBS Miete</StatLabel>
+                        <StatNumber>{minRent.toFixed(2)} €</StatNumber>
+                    </Stat>
+
+                    <Stat>
+                        <StatLabel>Max</StatLabel>
+                        <StatNumber>{maxRent.toFixed(2)} € </StatNumber>
+                    </Stat>
+                </StatGroup>
+            </Stack>
         </CardBody>;
     }