From e847deecdfd1d8e3838f6b12dfa1cde6a65c5dab Mon Sep 17 00:00:00 2001 From: Niklas Meinzer Date: Mon, 20 May 2024 17:14:45 +0200 Subject: [PATCH] New favicon and FlatDetails card --- public/favicon.ico | Bin 3870 -> 7518 bytes src/App.js | 55 ++++++++++++++++++++-------------- src/Solimieten.js | 73 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 105 insertions(+), 23 deletions(-) create mode 100644 src/Solimieten.js diff --git a/public/favicon.ico b/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..c668d656c8275a1805a41866e4f11e4c294421fd 100644 GIT binary patch literal 7518 zcmeHKc{r5o`ycyqRD@8<5J#3VJ7Y4GT{W^VS!c!!V;Rh1kYuZjU6y30lx&GCNkx*7 z7KJE#SwghfOW&c+Ii2hG{pVcQ@B81G>w0J2_jx||=eh6CeZSA#56jHdXq(_}K>z@- z&BR#Wg8d8Jy!d(9-?ZT1F93i*TdT7|l4|Byl#=+lXXz^D{>B?H6En8{y8f07>a13|&b{=u$ad7Jlc&IavP;nKH=bW2 zsN7izF`GdS4Yj?lDd=?3Xpmo6(pr`5i}2b%ug1E+ddFpF(fN1Sn&;P3T9B!E-w7H)xM+O4iU?>hg6#DslStxd>*RYJiNxlKH$XS2(@y6ME1e6tCcw81h>1 zR<@y{h4ikK8r<&aR}3j6g-d71#U-YcuerV}+q`mLSGL1VkGv=EG@j+Ml9%FwRmKMZ zqW*M!$(h3=#`+mpWBDhn8c7(JnE}10`m}Q$o;(VhR&>c&s-0ZIQgm^sSf+K=bp_Zu<>9mo(pISf*#w z+H2~^3g+#iUz|UxR73S3PIkQSh&qwwb@$9J2hVP*%9Wmk^)Jr|$DM*d6!ndsmEm47 z)-&8kd`VWUK(xfcu@{5V?IkK|zY3~U+|(faaRkm`v zxyyK{{?_T3Z1bs5)*D62aDh7F=$H6cQfED1wuqiOYQwmAuVsDUN)4kXAOJD?9)9BU z)H8Jq@yNSqb2(VzkmX+K17yde>2tpY2iq6T74A0C(w|fpRaCfeNflvu<87NcA=P|b zuq~a1(Eikit?1R_8*n^eVXJ*RkCvEVPc`;=Qq9%nazv)5{%9fW^`VT6vkqfEK94L6 zPd@5yU0!rt>d*Ai@0me}3|vvC*1Wowz*8GES|p+;9wg~W%DYP;<#Lsl_fPb!YAq=~ zN@{*A8f$qYy*BNJ!E2klNR>O^+dFK%mO^7*1@r|eTLT0aj0VsG=xZH{8`E}CZ`(){ zJXL!jFIQEPf{+!O81psisC)nL>+&-lGK~>Cvsm`xetS~AN_R~ACbrJGjLc5+U_VEF zp1*X3PsHo$Ue>rtJY?eimxS)lG1R?99dZAl9@V1*h0^U$?&@ePO}}ajn5CoDi$`C5 z+_Q2$Qlmp0U;q?4{80-rx0DD?8t zzNV)MdAg93c$eROU$^q#O0Il(}^@(;KDHmUd%V@VB%W2f;H8Uo^KHTo=^y&HIH(IH0E^T}MP^rj$?o6>n z46!p4*#vbl>^{N}gnK}-K zd{41DUbT{ZwCj5NVq5LDNH_zpmvh8dpL<0aR{DV4Q+2h!YVUN5b6Y3E<6HP%C z=chk7ZStb_d3xU<-r@N>T;r85nSIY>f=$oN4kg5-TLcF=7#2V9E6L_%wR_)f5qf4{ zx}aYHeQmw%d9hv;PQ{O}29Z{SlB(xH`Uzrpoxa+>XeFpSRl#GVoI0|uCS?N?Y3X~h zU_Z~5XsmOPp+zX5&Dij+Sx}mSt8&rfzmvcYG~J1)h`Z#TwAS6qc}0f z%d`Z|uWn`Bo+4E({Lbg|2IZxDJjK*Ux9^Emz}+@EQruQ{2cmJ1fe{=}d2F4))4KhG zR&2uq6BSqYn_#SZuvNJKX5Aux%e&??4i}JDvx=*g z{SgczY(C>oQc%Bs%`*pM3P)Yz}pnY4V=iB_#tjxX*9ZK$Srk*g`G+F)>uwYR@yv*@=Xp*_tvlJYXMOt zgs2ezk_()yM1hxltJ-?|tI|EB} zI^dk9^D*9Mqd&gu>v5F!bC3GuUc|+;B(elUjJR5!+az@VkSvp=h;KD`Rnk?d7E6yE zHl;Q}QuJ$frlzzT3ky$)^4SWY>K*f>7EDjCYfOSgObf$bB?$HJ$j*CG$BO2na&h{^{2KmX(F0&s`3~6sua3mNOjIDsr zN<7MX+a4DS0B}T+_4Le4^z{B{>DY~2_Nioyamyj;Ru{{o1`g7*z%k(hw7syn|4U`D z0^MTq6AZ|$FTZ6XFoRY=A*Gqd$(+%glek zd>G=;z4I7R>LvY*{`#2082UeS}$O6G|<-C>FyNF449s$q{k;(4`5~a9hF) z6vx-6O=&|*w(pxBD^Azc?!s`c)rQB;)Lxn8xNxwkDMdD`N@bNSxT>`fYB-$Av*sI~ zTSM|KKb5TwAiq}*;*yr;yu{Ptyd216y8C|5B`+>>i78OS7xP>b*{%0(GP}jL!yZEu ze0|h#ZoYV;TA+^~y9EaTv~&Xfa0D+R9f&8olPMUv`P=v8fMhp}oGlUy!TRYDJ;=tv zRH9|DsTCpEi=gQyr=u;X6^LdN_z>whV4#mTg@z8q$ZheW+4q~nU^(Cxgzklrv%{JJ z^?a#BAVLkH1_2oak^^9J+JZnWsv8Myp>Oz;g8hV%^PtoH&|ol=$y8&))qJV$V5p|1 zCKv((!(bpb0z?a<&~bqv3T^);#SadBB8@;L`_ak16yPQ&4)4pLW8~!6^T0p+^YO!C z|D>nTeyYIM100C+14GpyU>_gwuNE}AK>(ZNr$hhMf@Z}&semnrG+zdlKr{#-Qt11C zrEnwsY469NdT)i}MgSANi9T#7jlC-LZ%Z1PV9oxt*p$GX?Blm(#TNT-NIIGHmso%E zZF6QToL?PboBzrCH}oH|Z-Ln;EEcWrOJHoeXQGdh+gu;*=1U;Ep|@@|ac*uf93BpW zspHf^2n{#{geT&mAR^3-pbo?1kt7YxU#LtdG&+t#AZ}8z$<@eg9t}+#3PvCiKqw>x z0YVVmU?3C}g#fXc2^yLtO(+ueE5>nO&7Q?_a&zq;g|ZA>2rCbq!582#u4jNGOJz)j1o@&;=CNQyC;#zq8f zR{YPJw3`Qc$2rLfWWP?MdJuR7NOw+h;Ca8vF(0L5j=1dcOv`!{#j6ejFbOM zveZ!!5*)(LG7OGjCku*1g78oR9;6P3yP@z<5{X14{GFZVOQJJzRN`TGcBJfR*afr| z4e-F0luCa`Gd+l#IzeCv5CjQ=z^tH1G#r73K~x|xGz20C{uwZM^R50PVlD9h(L`$t z@XI#9w)-*0-d@ZfL#GX4)gKXdUvT!Bsf?;`(5-+$%$SFV4gz&`^2TV4Ok z^^X+zN8o>}>;FwI!M_eXL<+kLVzQ4j$a=ji?4uAb{-}}u)}aWns(1S|`%b{m*q#Oe zsO{gpI0B1w0@#CmbQ7!r-xLq$HaW4;OhyBHNQ!P?N7wW9+3cGETkRat4ag+ZJ%F3- zoNf4a2>^f_W1@f9%C4p6!bxvShFF`18W?hO6TPIl z2IucnPpzHM^ZzqOMh9-W#GfWGe%vQmfhlI|1j+}Cpg^&4@JK6<-IC z;d+u?5ZfeLQpot`3t)rX4|ye^c^=t6EiWnDtBL~T4Lfjs-Trc--(ASVOdO=;0HEf6 zT>m85*J>^F#>tGAZ6YV)VVbhoU%}7WRZ{rP>Hx1Zr*uj+G8PB6 ztMV*yp5qq9j(ylkSou2S)I=SzZc)y;C^o)q{&m?`VUvJxEm;YZ-(+XyD=(mUMaxWp2V-&i`w-+8??IgE-)%bL6(IY)fZq+ z2P`{E8kxR-@#S<{kLaF;cnQt$vYE^Btfaxib=47_wOO+^QYcPG7}tp4ad24pK#{jg zV{YABo=3sEv&&{4#~KAev>xb fRu$>hHB9P6-f?<%(AhO)bAK{1Fx9Wnb&dEB3G-i? literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/src/App.js b/src/App.js index 36df68e..ea4b9dd 100644 --- a/src/App.js +++ b/src/App.js @@ -2,12 +2,7 @@ import { React, useState } from 'react'; import { ChakraProvider, - Box, Text, - Link, - VStack, - Code, - Grid, theme, Select, Card, @@ -15,7 +10,10 @@ import { Heading, CardBody, Center, + SimpleGrid, } from '@chakra-ui/react'; + +import { FlatDetails } from './Solimieten'; import { ColorModeSwitcher } from './ColorModeSwitcher'; import { flatData } from './Data'; @@ -23,6 +21,7 @@ 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(); function buildingSelected(e) { var newOptions; @@ -42,28 +41,38 @@ function App() { setFlatOptions(flatData[selectedBuilding][e.target.value]); } } + + function flatSelected(e) { + var index = e.target.value; + + setSelectedFlat(flatOptions[index]); + } + return (
- - - Wohnungsauswahl - - - View a summary of all your customers over the last month. - - - - - + + + + Wohnungsauswahl + + + View a summary of all your customers over the last month. + + + + + + +
); diff --git a/src/Solimieten.js b/src/Solimieten.js new file mode 100644 index 0000000..486d952 --- /dev/null +++ b/src/Solimieten.js @@ -0,0 +1,73 @@ +import { + Card, + CardHeader, + Heading, + CardBody, + Stack, + StackDivider, + Box, + Text, + Badge +} from '@chakra-ui/react'; + +export function FlatDetails({ flat }) { + var body = + Bitte auswählen + ; + + var badges = ""; + + if (flat) { + body = + + } spacing='4'> + + + + Bezeichnung + + + {flat.name} + + + + + Zimmeranzahl + + + {flat.numRooms} + + + + + Private Fläche + + + {flat.sizePrivate} m² + + + + ; + + if (flat.isWbs) { + badges = + mit WBS + ; + } else { + badges = + ohne WBS + ; + } + } + + return ( + + + + {badges} + Wohnungsdetails + + {body} + + ); +}