diff --git a/package-lock.json b/package-lock.json index 65b813d..c95c05b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "allmende-solimieten", "version": "0.1.0", "dependencies": { + "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", @@ -2313,6 +2314,18 @@ "react": ">=18" } }, + "node_modules/@chakra-ui/icons": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz", + "integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==", + "dependencies": { + "@chakra-ui/icon": "3.2.0" + }, + "peerDependencies": { + "@chakra-ui/system": ">=2.0.0", + "react": ">=18" + } + }, "node_modules/@chakra-ui/image": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz", diff --git a/package.json b/package.json index 550d2af..acc6adb 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.2", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..404c67e Binary files /dev/null and b/public/logo.png differ diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/src/App.js b/src/App.js index ea4b9dd..c26f34a 100644 --- a/src/App.js +++ b/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 ( +
+ Wohnung + + Wohnungsauswahl - View a summary of all your customers over the last month. - - - + + + + + + + Selbsteinschätzung + + + + + + Wie hoch ist euer/dein Haushaltsnetto? Beachtet dabei alle regelmäßigen Einkünfte wie Gehalt, Rente, Mieteinkünfte oder Kapitalerträge + setIncome(parseEuro(valueString))} + value={formatEuro(income)} + > + + + + Wie viel Prozent eures/deines Nettoeinkommens kannst du für Miete aufbringen? + setSliderValue(v)} + onMouseEnter={() => setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + > + + 10% + + + 20% + + + 30% + + + 40% + + + 50% + + + + + + + + + + + + + +
diff --git a/src/Nav.js b/src/Nav.js new file mode 100644 index 0000000..15458c6 --- /dev/null +++ b/src/Nav.js @@ -0,0 +1,88 @@ +import { ReactNode } from 'react'; +import { + Box, + Flex, + Avatar, + Link, + Button, + Menu, + MenuButton, + MenuList, + MenuItem, + MenuDivider, + useDisclosure, + useColorModeValue, + Stack, + useColorMode, + Center, + Image, +} from '@chakra-ui/react'; +import { MoonIcon, SunIcon } from '@chakra-ui/icons'; + +const NavLink = ({ children }) => ( + + {children} + +); + +export function Nav() { + const { colorMode, toggleColorMode } = useColorMode(); + const { isOpen, onOpen, onClose } = useDisclosure(); + return ( + <> + + + + + + + + + {/* + + + + +
+
+ +
+
+
+

Username

+
+
+ + Your Servers + Account Settings + Logout + + */} + + + + + + ); +} diff --git a/src/Solimieten.js b/src/Solimieten.js index 486d952..6c99597 100644 --- a/src/Solimieten.js +++ b/src/Solimieten.js @@ -7,7 +7,13 @@ import { StackDivider, Box, Text, - Badge + Badge, + Stat, + StatLabel, + StatNumber, + StatHelpText, + StatArrow, + StatGroup } from '@chakra-ui/react'; export function FlatDetails({ flat }) { @@ -71,3 +77,28 @@ export function FlatDetails({ flat }) { ); } + +export function ResultsCard({ income, percentage, flat }) { + var body = + if (flat) { + var rent = income * percentage / 100; + var relativeRent = rent / flat.sizePrivate; + body = + + + Miete + {rent} € + + + + Pro m² + {relativeRent.toFixed(2)} € + + + ; + } + + return + {body} + +} \ No newline at end of file