diff --git a/index.html b/index.html index b49298254..deeef21fd 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Lama Real Estate UI + Real estate = 8" } }, + "node_modules/@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "license": "Hippocratic-2.1", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/@remix-run/router": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", + "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz", - "integrity": "sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.0.tgz", + "integrity": "sha512-WTWD8PfoSAJ+qL87lE7votj3syLavxunWhzCnx3XFxFiI/BA/r3X7MUM8dVrH8rb2r4AiO8jJsr3ZjdaftmnfA==", "cpu": [ "arm" ], @@ -940,9 +964,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.0.tgz", - "integrity": "sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.0.tgz", + "integrity": "sha512-a1sR2zSK1B4eYkiZu17ZUZhmUQcKjk2/j9Me2IDjk1GHW7LB5Z35LEzj9iJch6gtUfsnvZs1ZNyDW2oZSThrkA==", "cpu": [ "arm64" ], @@ -953,9 +977,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.0.tgz", - "integrity": "sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz", + "integrity": "sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==", "cpu": [ "arm64" ], @@ -966,9 +990,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.0.tgz", - "integrity": "sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.0.tgz", + "integrity": "sha512-7doS8br0xAkg48SKE2QNtMSFPFUlRdw9+votl27MvT46vo44ATBmdZdGysOevNELmZlfd+NEa0UYOA8f01WSrg==", "cpu": [ "x64" ], @@ -979,9 +1003,22 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.0.tgz", - "integrity": "sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.0.tgz", + "integrity": "sha512-pWJsfQjNWNGsoCq53KjMtwdJDmh/6NubwQcz52aEwLEuvx08bzcy6tOUuawAOncPnxz/3siRtd8hiQ32G1y8VA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.0.tgz", + "integrity": "sha512-efRIANsz3UHZrnZXuEvxS9LoCOWMGD1rweciD6uJQIx2myN3a8Im1FafZBzh7zk1RJ6oKcR16dU3UPldaKd83w==", "cpu": [ "arm" ], @@ -992,9 +1029,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.0.tgz", - "integrity": "sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.0.tgz", + "integrity": "sha512-ZrPhydkTVhyeGTW94WJ8pnl1uroqVHM3j3hjdquwAcWnmivjAwOYjTEAuEDeJvGX7xv3Z9GAvrBkEzCgHq9U1w==", "cpu": [ "arm64" ], @@ -1005,9 +1042,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.0.tgz", - "integrity": "sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.0.tgz", + "integrity": "sha512-cfaupqd+UEFeURmqNP2eEvXqgbSox/LHOyN9/d2pSdV8xTrjdg3NgOFJCtc1vQ/jEke1qD0IejbBfxleBPHnPw==", "cpu": [ "arm64" ], @@ -1017,10 +1054,23 @@ "linux" ] }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.0.tgz", + "integrity": "sha512-ZKPan1/RvAhrUylwBXC9t7B2hXdpb/ufeu22pG2psV7RN8roOfGurEghw1ySmX/CmDDHNTDDjY3lo9hRlgtaHg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.0.tgz", - "integrity": "sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.0.tgz", + "integrity": "sha512-H1eRaCwd5E8eS8leiS+o/NqMdljkcb1d6r2h4fKSsCXQilLKArq6WS7XBLDu80Yz+nMqHVFDquwcVrQmGr28rg==", "cpu": [ "riscv64" ], @@ -1030,10 +1080,23 @@ "linux" ] }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.0.tgz", + "integrity": "sha512-zJ4hA+3b5tu8u7L58CCSI0A9N1vkfwPhWd/puGXwtZlsB5bTkwDNW/+JCU84+3QYmKpLi+XvHdmrlwUwDA6kqw==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz", - "integrity": "sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.0.tgz", + "integrity": "sha512-e2hrvElFIh6kW/UNBQK/kzqMNY5mO+67YtEh9OA65RM5IJXYTWiXjX6fjIiPaqOkBthYF1EqgiZ6OXKcQsM0hg==", "cpu": [ "x64" ], @@ -1044,9 +1107,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz", - "integrity": "sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.0.tgz", + "integrity": "sha512-1vvmgDdUSebVGXWX2lIcgRebqfQSff0hMEkLJyakQ9JQUbLDkEaMsPTLOmyccyC6IJ/l3FZuJbmrBw/u0A0uCQ==", "cpu": [ "x64" ], @@ -1057,9 +1120,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.0.tgz", - "integrity": "sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.0.tgz", + "integrity": "sha512-s5oFkZ/hFcrlAyBTONFY1TWndfyre1wOMwU+6KCpm/iatybvrRgmZVM+vCFwxmC5ZhdlgfE0N4XorsDpi7/4XQ==", "cpu": [ "arm64" ], @@ -1070,9 +1133,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.0.tgz", - "integrity": "sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.0.tgz", + "integrity": "sha512-G9+TEqRnAA6nbpqyUqgTiopmnfgnMkR3kMukFBDsiyy23LZvUCpiUwjTRx6ezYCjJODXrh52rBR9oXvm+Fp5wg==", "cpu": [ "ia32" ], @@ -1083,9 +1146,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz", - "integrity": "sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.0.tgz", + "integrity": "sha512-2jsCDZwtQvRhejHLfZ1JY6w6kEuEtfF9nzYsZxzSlNVKDX+DpsDJ+Rbjkm74nvg2rdx0gwBS+IMdvwJuq3S9pQ==", "cpu": [ "x64" ], @@ -1257,6 +1320,18 @@ "node": ">=4" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -1399,6 +1474,17 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1409,6 +1495,17 @@ "concat-map": "0.0.1" } }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/browserslist": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", @@ -1503,6 +1600,40 @@ "node": ">=4" } }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -1768,9 +1899,9 @@ } }, "node_modules/esbuild": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz", - "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==", + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", + "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", "dev": true, "hasInstallScript": true, "bin": { @@ -1780,29 +1911,29 @@ "node": ">=12" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.19.12", - "@esbuild/android-arm": "0.19.12", - "@esbuild/android-arm64": "0.19.12", - "@esbuild/android-x64": "0.19.12", - "@esbuild/darwin-arm64": "0.19.12", - "@esbuild/darwin-x64": "0.19.12", - "@esbuild/freebsd-arm64": "0.19.12", - "@esbuild/freebsd-x64": "0.19.12", - "@esbuild/linux-arm": "0.19.12", - "@esbuild/linux-arm64": "0.19.12", - "@esbuild/linux-ia32": "0.19.12", - "@esbuild/linux-loong64": "0.19.12", - "@esbuild/linux-mips64el": "0.19.12", - "@esbuild/linux-ppc64": "0.19.12", - "@esbuild/linux-riscv64": "0.19.12", - "@esbuild/linux-s390x": "0.19.12", - "@esbuild/linux-x64": "0.19.12", - "@esbuild/netbsd-x64": "0.19.12", - "@esbuild/openbsd-x64": "0.19.12", - "@esbuild/sunos-x64": "0.19.12", - "@esbuild/win32-arm64": "0.19.12", - "@esbuild/win32-ia32": "0.19.12", - "@esbuild/win32-x64": "0.19.12" + "@esbuild/aix-ppc64": "0.21.5", + "@esbuild/android-arm": "0.21.5", + "@esbuild/android-arm64": "0.21.5", + "@esbuild/android-x64": "0.21.5", + "@esbuild/darwin-arm64": "0.21.5", + "@esbuild/darwin-x64": "0.21.5", + "@esbuild/freebsd-arm64": "0.21.5", + "@esbuild/freebsd-x64": "0.21.5", + "@esbuild/linux-arm": "0.21.5", + "@esbuild/linux-arm64": "0.21.5", + "@esbuild/linux-ia32": "0.21.5", + "@esbuild/linux-loong64": "0.21.5", + "@esbuild/linux-mips64el": "0.21.5", + "@esbuild/linux-ppc64": "0.21.5", + "@esbuild/linux-riscv64": "0.21.5", + "@esbuild/linux-s390x": "0.21.5", + "@esbuild/linux-x64": "0.21.5", + "@esbuild/netbsd-x64": "0.21.5", + "@esbuild/openbsd-x64": "0.21.5", + "@esbuild/sunos-x64": "0.21.5", + "@esbuild/win32-arm64": "0.21.5", + "@esbuild/win32-ia32": "0.21.5", + "@esbuild/win32-x64": "0.21.5" } }, "node_modules/escalade": { @@ -2164,6 +2295,17 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -2219,7 +2361,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -2474,6 +2615,11 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -2572,6 +2718,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-boolean-object": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -2631,7 +2788,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -2667,7 +2823,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -2696,6 +2851,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-number-object": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz", @@ -2947,6 +3110,12 @@ "json-buffer": "3.0.1" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==", + "license": "BSD-2-Clause" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3049,6 +3218,14 @@ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -3257,11 +3434,22 @@ "dev": true }, "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", "dev": true }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/possible-typed-array-names": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", @@ -3272,9 +3460,9 @@ } }, "node_modules/postcss": { - "version": "8.4.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", - "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "version": "8.4.41", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz", + "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==", "dev": true, "funding": [ { @@ -3292,8 +3480,8 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "picocolors": "^1.0.1", + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -3377,6 +3565,20 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "license": "Hippocratic-2.1", + "dependencies": { + "@react-leaflet/core": "^2.1.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -3386,6 +3588,49 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", + "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz", + "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.1", + "react-router": "6.26.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz", @@ -3477,9 +3722,9 @@ } }, "node_modules/rollup": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.0.tgz", - "integrity": "sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==", + "version": "4.21.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz", + "integrity": "sha512-vo+S/lfA2lMS7rZ2Qoubi6I5hwZwzXeUIctILZLbHI+laNtvhhOIon2S1JksA5UEDQ7l3vberd0fxK44lTYjbQ==", "dev": true, "dependencies": { "@types/estree": "1.0.5" @@ -3492,19 +3737,22 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.12.0", - "@rollup/rollup-android-arm64": "4.12.0", - "@rollup/rollup-darwin-arm64": "4.12.0", - "@rollup/rollup-darwin-x64": "4.12.0", - "@rollup/rollup-linux-arm-gnueabihf": "4.12.0", - "@rollup/rollup-linux-arm64-gnu": "4.12.0", - "@rollup/rollup-linux-arm64-musl": "4.12.0", - "@rollup/rollup-linux-riscv64-gnu": "4.12.0", - "@rollup/rollup-linux-x64-gnu": "4.12.0", - "@rollup/rollup-linux-x64-musl": "4.12.0", - "@rollup/rollup-win32-arm64-msvc": "4.12.0", - "@rollup/rollup-win32-ia32-msvc": "4.12.0", - "@rollup/rollup-win32-x64-msvc": "4.12.0", + "@rollup/rollup-android-arm-eabi": "4.21.0", + "@rollup/rollup-android-arm64": "4.21.0", + "@rollup/rollup-darwin-arm64": "4.21.0", + "@rollup/rollup-darwin-x64": "4.21.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.21.0", + "@rollup/rollup-linux-arm-musleabihf": "4.21.0", + "@rollup/rollup-linux-arm64-gnu": "4.21.0", + "@rollup/rollup-linux-arm64-musl": "4.21.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.21.0", + "@rollup/rollup-linux-riscv64-gnu": "4.21.0", + "@rollup/rollup-linux-s390x-gnu": "4.21.0", + "@rollup/rollup-linux-x64-gnu": "4.21.0", + "@rollup/rollup-linux-x64-musl": "4.21.0", + "@rollup/rollup-win32-arm64-msvc": "4.21.0", + "@rollup/rollup-win32-ia32-msvc": "4.21.0", + "@rollup/rollup-win32-x64-msvc": "4.21.0", "fsevents": "~2.3.2" } }, @@ -3566,6 +3814,22 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sass": { + "version": "1.77.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", + "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -3655,10 +3919,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "engines": { "node": ">=0.10.0" } @@ -3791,6 +4054,17 @@ "node": ">=4" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -3943,14 +4217,14 @@ } }, "node_modules/vite": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.4.tgz", - "integrity": "sha512-n+MPqzq+d9nMVTKyewqw6kSt+R3CkvF9QAKY8obiQn8g1fwTscKxyfaYnC632HtBXAQGc1Yjomphwn1dtwGAHg==", + "version": "5.4.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.2.tgz", + "integrity": "sha512-dDrQTRHp5C1fTFzcSaMxjk6vdpKvT+2/mIdE07Gw2ykehT49O0z/VHS3zZ8iV/Gh8BJJKHWOe5RjaNrW5xf/GA==", "dev": true, "dependencies": { - "esbuild": "^0.19.3", - "postcss": "^8.4.35", - "rollup": "^4.2.0" + "esbuild": "^0.21.3", + "postcss": "^8.4.41", + "rollup": "^4.20.0" }, "bin": { "vite": "bin/vite.js" @@ -3969,6 +4243,7 @@ "less": "*", "lightningcss": "^1.21.0", "sass": "*", + "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" @@ -3986,6 +4261,9 @@ "sass": { "optional": true }, + "sass-embedded": { + "optional": true + }, "stylus": { "optional": true }, diff --git a/package.json b/package.json index 84e628e5f..588bd2d49 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,12 @@ "preview": "vite preview" }, "dependencies": { + "leaflet": "^1.9.4", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-leaflet": "^4.2.1", + "react-router-dom": "^6.26.1", + "sass": "^1.77.8" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/public/favicon.png b/public/favicon.png index 5f01b902e..392181bdb 100644 Binary files a/public/favicon.png and b/public/favicon.png differ diff --git a/src/App.jsx b/src/App.jsx index 88a1fa927..51e412029 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,40 @@ +import HomePage from "./router/homePage/homePage"; +import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import ListPage from "./router/listPage/listPage"; +import Layout from "./router/layout/layout"; +import SinglePage from "./router/singlePage/singlePage.jsx"; +import ProfilePage from "./router/profilePage/profilePage.jsx"; + function App() { - return ( -
Hello World
- ) + const router = createBrowserRouter([ + { + path: "/", + element: , + children: [ + { + path: "/", + element: , + }, + { + path: "/list", + element: , + }, + { + path: "/list/:id", + element: , + }, + { + path: "/:id", + element: , + }, + { + path: "/profile", + element: , + }, + ], + }, + ]); + return ; } -export default App \ No newline at end of file +export default App; diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx new file mode 100644 index 000000000..f7e2e1537 --- /dev/null +++ b/src/components/card/card.jsx @@ -0,0 +1,44 @@ +import { Link } from "react-router-dom"; +import "./card.scss"; + +function Card({ item }) { + return ( +
+ + img + +
+

+ {item.title} +

+

+ + {item.address} +

+

${item.price}

+
+
+
+ bed + {item.bedroom} bedroom +
+
+ bath + {item.bathroom} bathroom +
+
+
+
+ save +
+
+ save +
+
+
+
+
+ ); +} + +export default Card; diff --git a/src/components/card/card.scss b/src/components/card/card.scss new file mode 100644 index 000000000..0d5ffadb8 --- /dev/null +++ b/src/components/card/card.scss @@ -0,0 +1,102 @@ +@import "../../responsive.scss"; + +.card { + display: flex; + gap: 20px; + + .imgContainer { + flex: 2; + height: 200px; + + @include sm { + display: none; + } + + img { + height: 100%; + width: 100%; + object-fit: cover; + border-radius: 10px; + } + } + + .textContainer { + flex: 3; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 10px; + + img { + width: 16px; + height: 16px; + } + + .title { + font-size: 20px; + font-weight: 600; + color: #444; + transition: all 0.4 ease; + + &:hover { + color: #000; + scale: 1.01; + } + } + + .address { + font-size: 14px; + display: flex; + align-items: center; + gap: 5px; + color: #888; + } + + .price { + font-size: 20px; + font-weight: 300px; + border-radius: 5px; + padding: 5px; + background-color: rgb(249, 245, 192); + max-width: max-content; + } + + .bottom { + display: flex; + justify-content: space-between; + gap: 10px; + + .features { + display: flex; + gap: 20px; + font-size: 14px; + + .feature { + display: flex; + align-items: center; + gap: 5px; + padding: 5px; + background: whitesmoke; + } + } + + .icons { + display: flex; + gap: 20px; + + .icon { + display: flex; + align-items: center; + border: 1px solid #999; + border-radius: 5px; + padding: 2px 5px; + cursor: pointer; + + &:hover { + background-color: lightgray; + } + } + } + } + } +} diff --git a/src/components/chat/Chat.jsx b/src/components/chat/Chat.jsx new file mode 100644 index 000000000..e187d5392 --- /dev/null +++ b/src/components/chat/Chat.jsx @@ -0,0 +1,141 @@ +import { useState } from "react"; +import "./chat.scss"; + +function Chat() { + const [chat, setChat] = useState(2); + return ( +
+
+

Messages

+
+ + Ferret +

How feel to day?

+
+
+ + Ferret +

How feel to day?

+
+
+ + Ferret +

How feel to day?

+
+
+ + Ferret +

How feel to day?

+
+
+ + Ferret +

How feel to day?

+
+
+ + Ferret +

How feel to day?

+
+
+ + Ferret +

How feel to day?

+
+
+ + Ferret +

How feel to day?

+
+
+ {chat && ( +
+
+
+ + Ferret +
+ setChat(null)}> + X + +
+
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+

Is it near school?

+ 30 minute +
+
+
+ + +
+
+ )} +
+ ); +} + +export default Chat; diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss new file mode 100644 index 000000000..c9a2107e2 --- /dev/null +++ b/src/components/chat/chat.scss @@ -0,0 +1,125 @@ +@import "../../responsive.scss"; +.chat { + height: 100%; + display: flex; + flex-direction: column; + + .messages { + flex: 1; + display: flex; + flex-direction: column; + gap: 20px; + overflow-y: scroll; + height: 100%; + + @include md { + flex: none; + // height: 200px; + overflow-y: hidden; + } + + h1 { + font-weight: bold; + } + + .message { + display: flex; + align-items: center; + gap: 20px; + border-radius: 10px; + padding: 20; + background-color: white; + cursor: pointer; + + img { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + } + + span { + font-weight: bold; + } + } + } + + .chatBox { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: white; + + .top { + background-color: #f7c14b85; + padding: 20px; + font-weight: bold; + display: flex; + align-items: center; + justify-content: space-between; + + .user { + display: flex; + align-items: center; + gap: 20px; + + img { + height: 30px; + width: 30px; + border-radius: 50%; + object-fit: cover; + } + } + + .close { + cursor: pointer; + } + } + .center { + height: 350px; + overflow-y: scroll; + padding: 20px; + display: flex; + flex-direction: column; + gap: 20px; + + .chatMessage { + width: 50%; + + &.own { + align-self: flex-end; + text-align: right; + } + + span { + font-size: 12px; + background-color: #f7c14b85; + padding: 2px; + border-radius: 5px; + } + } + } + .bottom { + border-top: 2px solid #f7c14b85; + height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + + textarea { + flex: 3; + height: 100%; + border: none; + } + + button { + height: 100%; + flex: 1; + background-color: #f7c14b85; + border: none; + cursor: pointer; + } + } + } +} diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx new file mode 100644 index 000000000..84e0b0dd9 --- /dev/null +++ b/src/components/filter/Filter.jsx @@ -0,0 +1,69 @@ +import "./filter.scss"; + +function Filter() { + return ( +
+

+ Search results for VietNam +

+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ ); +} + +export default Filter; diff --git a/src/components/filter/filter.scss b/src/components/filter/filter.scss new file mode 100644 index 000000000..f84fb791b --- /dev/null +++ b/src/components/filter/filter.scss @@ -0,0 +1,54 @@ +.filter { + display: flex; + flex-direction: column; + gap: 10px; + + h1 { + font-weight: 300; + font-size: 24px; + } + + .item { + display: flex; + flex-direction: column; + gap: 2px; + + label { + font-size: 20px; + } + + input, + select { + width: 100px; + border: 1px solid #e0e0ee; + padding: 10px; + border-radius: 5px; + font-size: 14px; + } + } + + .top { + input { + width: 100%; + } + } + + .bottom { + display: flex; + justify-content: space-between; + gap: 20px; + + button { + width: 100px; + padding: 10px; + cursor: pointer; + background-color: #fece51; + border: none; + } + + img { + width: 24px; + height: 24px; + } + } +} diff --git a/src/components/list/List.jsx b/src/components/list/List.jsx new file mode 100644 index 000000000..787169fb3 --- /dev/null +++ b/src/components/list/List.jsx @@ -0,0 +1,15 @@ +import "./list.scss"; +import Card from "../card/card.jsx"; +import { listData } from "../../lib/dummydata.js"; + +function List() { + return ( +
+ {listData.map((item) => ( + + ))} +
+ ); +} + +export default List; diff --git a/src/components/list/list.scss b/src/components/list/list.scss new file mode 100644 index 000000000..e5858282d --- /dev/null +++ b/src/components/list/list.scss @@ -0,0 +1,5 @@ +.list { + display: flex; + flex-direction: column; + gap: 50px; +} diff --git a/src/components/map/Map.jsx b/src/components/map/Map.jsx new file mode 100644 index 000000000..4c5bac1e2 --- /dev/null +++ b/src/components/map/Map.jsx @@ -0,0 +1,25 @@ +import { MapContainer, TileLayer } from "react-leaflet"; +import "./map.scss"; +import "leaflet/dist/leaflet.css"; //css cho map +import Pin from "../pin/Pin"; + +function Map({ items }) { + return ( + + + {items.map((item) => ( + + ))} + + ); +} + +export default Map; diff --git a/src/components/map/map.scss b/src/components/map/map.scss new file mode 100644 index 000000000..8e31bd1b2 --- /dev/null +++ b/src/components/map/map.scss @@ -0,0 +1,5 @@ +.map { + width: 100%; + height: 100%; + border-radius: 20px; +} diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx new file mode 100644 index 000000000..d6f8de755 --- /dev/null +++ b/src/components/navbar/Navbar.jsx @@ -0,0 +1,60 @@ +import { Link } from "react-router-dom"; +import { useState } from "react"; + +import "./navbar.scss"; +function Navbar() { + const [open, setOpen] = useState(false); + + const user = true; + return ( + + ); +} +export default Navbar; diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss new file mode 100644 index 000000000..0b968d272 --- /dev/null +++ b/src/components/navbar/navbar.scss @@ -0,0 +1,152 @@ +@import "../../responsive.scss"; +nav { + // height: 100px; + display: flex; + justify-content: space-between; + align-items: center; + + a { + transition: all 0.4s ease; + + @include sm { + display: none; + } + + &:hover { + scale: 1.05s; + } + } + + .left { + flex: 3; + display: flex; + align-items: center; + gap: 50px; + + .logo { + font-weight: bold; + font-size: 20px; + display: flex; + align-items: center; + gap: 10px; + + img { + width: 28px; + } + + span { + @include md { + display: none; + } + + @include sm { + display: initial; + } + } + } + } + .right { + flex: 2; + display: flex; + align-items: center; + justify-content: flex-end; + background-color: #fcf5f3; + + @include md { + background-color: transparent; + } + + a { + padding: 12px 24px; + margin: 24px; + } + + .user { + display: flex; + align-items: center; + font-weight: bold; + + img { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + margin-right: 20px; + z-index: 1000; + } + span { + @include sm { + display: none; + } + } + + .profile { + padding: 12px 24px; + background-color: #fece51; + cursor: pointer; + position: relative; + + .notification { + top: -8px; + right: -8px; + position: absolute; + width: 24px; + height: 24px; + color: white; + border-radius: 50%; + background-color: red; + display: flex; + align-items: center; + justify-content: center; + } + } + } + + .register { + background-color: #fece51; + } + + .menuIcon { + display: none; + z-index: 1000; + + img { + width: 36px; + height: 36px; + cursor: pointer; + } + + @include sm { + display: inline; + } + } + + .menu { + position: absolute; + top: 0; + right: -50%; + background-color: black; + color: white; + height: 100vh; + width: 50%; + transition: all 1s ease; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 24px; + z-index: 999; + + &.active { + right: 0; + z-index: 999; + } + + @include sm { + a { + display: inherit; + } + } + } + } +} diff --git a/src/components/pin/Pin.jsx b/src/components/pin/Pin.jsx new file mode 100644 index 000000000..b7731a40a --- /dev/null +++ b/src/components/pin/Pin.jsx @@ -0,0 +1,22 @@ +import { Marker, Popup } from "react-leaflet"; +import "./pin.scss"; +import { Link } from "react-router-dom"; + +function Pin({ item }) { + return ( + + +
+ house +
+ {item.title} + {item.bedroom} bedroom + $ {item.price} +
+
+ + + ); +} + +export default Pin; diff --git a/src/components/pin/pin.scss b/src/components/pin/pin.scss new file mode 100644 index 000000000..fb2f8000c --- /dev/null +++ b/src/components/pin/pin.scss @@ -0,0 +1,17 @@ +.popupContainer { + display: flex; + gap: 20px; + + img { + width: 64px; + height: 48px; + object-fit: cover; + border-radius: 5px; + } + + .textContainer { + display: flex; + flex-direction: column; + justify-content: space-between; + } +} diff --git a/src/components/searchbar/SearchBar.jsx b/src/components/searchbar/SearchBar.jsx new file mode 100644 index 000000000..05cebb7b5 --- /dev/null +++ b/src/components/searchbar/SearchBar.jsx @@ -0,0 +1,55 @@ +import { useState } from "react"; +import "./searchBar.scss"; + +const types = ["buy", "rent"]; + +function SearchBar() { + const [query, setQuery] = useState({ + type: "buy", + location: "", + minPrice: 0, + maxPrice: 0, + }); + + const switchType = (val) => { + setQuery((prev) => ({ ...prev, type: val })); + }; + + return ( +
+
+ {types.map((type) => ( + + ))} +
+
+ + + + +
+
+ ); +} + +export default SearchBar; diff --git a/src/components/searchbar/searchBar.scss b/src/components/searchbar/searchBar.scss new file mode 100644 index 000000000..d449309cb --- /dev/null +++ b/src/components/searchbar/searchBar.scss @@ -0,0 +1,94 @@ +@import "../../responsive.scss"; +.searchBar { + .type { + button { + padding: 16px 36px; + border: 1px solid #999; + border-bottom: none; + cursor: pointer; + background-color: white; + text-transform: capitalize; + + &.active { + background-color: black; + color: #fff; + } + + &:first-child { + border-right: none; + border-top-left-radius: 5px; + + @include sm { + // border-bottom: 1px solid #999; + } + } + + &:last-child { + border-left: none; + border-top-right-radius: 5px; + } + } + } + + form { + border: 1px solid #999; + display: flex; + justify-content: space-between; + height: 64px; + gap: 5px; + + @include sm { + flex-direction: column; + border: none; + } + + input { + border: none; + padding: 0px 10px; + width: 200px; + + @include lg { + padding: 0px 5px; + + &:nth-child(2), + &:nth-child(3) { + width: 140px; + } + } + + @include md { + width: 200px; + &:nth-child(2), + &:nth-child(3) { + width: 200px; + } + } + + @include sm { + width: auto; + padding: 20px; + border: 1px solid #999; + &:nth-child(2), + &:nth-child(3) { + width: auto; + } + } + } + + button { + border: none; + cursor: pointer; + background-color: #fece51; + flex: 1; + + @include sm { + padding: 20px; + } + + img { + width: 24px; + height: 24px; + } + } + } +} diff --git a/src/components/slider/Slider.jsx b/src/components/slider/Slider.jsx new file mode 100644 index 000000000..c343f0d8b --- /dev/null +++ b/src/components/slider/Slider.jsx @@ -0,0 +1,66 @@ +import { useState } from "react"; +import "./slider.scss"; + +function Slider({ images }) { + const [imageIndex, setImageIndex] = useState(null); + + const changeSlider = (direction) => { + if (direction === "left") { + if (imageIndex === 0) { + setImageIndex(images.length - 1); + } else { + setImageIndex(imageIndex - 1); + } + } else { + if (imageIndex === images.length - 1) { + setImageIndex(0); + } else { + setImageIndex(imageIndex + 1); + } + } + }; + return ( +
+ {imageIndex !== null && ( +
+
+ < changeSlider("left")} + /> +
+
+ > +
+
+ > changeSlider("right")} + /> +
+
setImageIndex(null)}> + X +
+
+ )} +
+ setImageIndex(0)} /> +
+
+ {images.slice(1).map((image, index) => ( + setImageIndex(index + 1)} + /> + ))} +
+
+ ); +} + +export default Slider; diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss new file mode 100644 index 000000000..14bf6166d --- /dev/null +++ b/src/components/slider/slider.scss @@ -0,0 +1,87 @@ +@import "../../responsive.scss"; + +.slider { + width: 100%; + display: flex; + height: 350px; + gap: 20px; + + .fullSlider { + position: absolute; + width: 100vw; + height: 100vh; + top: 0; + height: 100%; + left: 0; + background-color: black; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 9999; + + .arrow { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 50px; + + @include md { + width: 30px; + } + + @include sm { + width: 20px; + } + + &.right { + transform: rotate(180deg); + } + } + } + + .imgContainer { + flex: 10; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + .close { + position: absolute; + top: 0; + right: 0; + font-size: 36; + font-weight: bold; + color: white; + padding: 50px; + cursor: pointer; + } + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + cursor: pointer; + } + + .bigImg { + flex: 3; + } + + .smallImgs { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 20px; + height: 100px; + } +} diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 000000000..3a9bdae8e --- /dev/null +++ b/src/index.scss @@ -0,0 +1,13 @@ +* { + margin: 0; + padding: 0; + box-sizing: 0; +} +a { + text-decoration: none; + color: inherit; +} +body { + font-family: "Lato", sans-serif; + overflow: hidden; +} diff --git a/src/lib/dummydata.js b/src/lib/dummydata.js new file mode 100644 index 000000000..6eeeccc57 --- /dev/null +++ b/src/lib/dummydata.js @@ -0,0 +1,211 @@ +export const listData = [ + { + id: 1, + title: "A Great Apartment Next to the Beach!", + img: "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 150000, + address: "456 Macauley Street, nigeria", + latitude: 13.7666, + longitude: 109.21522, + }, + { + id: 2, + title: "An Awesome Apartment Near the Park! Almost too good to be true!", + img: "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 15000, + address: "789 Adebowale Street, nigeria", + latitude: 13.77367, + longitude: 109.22534, + }, + { + id: 3, + title: "A New Apartment in the City!", + img: "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 1, + bathroom: 1, + price: 8000, + address: "101 Asaba street, nigeria", + latitude: 13.707, + longitude: 109.2142, + }, + { + id: 4, + title: "Great Location! Great Price! Great Apartment!", + img: "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 5000, + address: "234 Kingsway, nigeria,", + latitude: 13.77367, + longitude: 109.22534, + }, + { + id: 5, + title: "Apartment 5", + img: "https://images.pexels.com/photos/276625/pexels-photo-276625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 27000, + address: "567 Victoria Road, nigeria", + latitude: 13.76859, + longitude: 109.22668, + }, + { + id: 6, + title: "Apartment 6", + img: "https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 1, + bathroom: 1, + price: 8000, + address: "890 Regent Street, nigeria", + latitude: 13.76859, + longitude: 109.2139, + }, + { + id: 7, + title: "Apartment 7", + img: "https://images.pexels.com/photos/2029667/pexels-photo-2029667.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 10000, + address: "112 Piccadilly, nigeria", + latitude: 13.7022, + longitude: 109.22668, + }, + { + id: 8, + title: "Apartment 8", + img: "https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 15000, + address: "8765 Main High Street, nigeria", + latitude: 13.76859, + longitude: 109.22668, + }, +]; + +export const itemsdata = [ + { + id: 1, + title: "A Great Apartment Next to the Beach!", + img: "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 150000, + address: "456 Macauley Street, nigeria", + latitude: 13.76859, + longitude: 109.22668, + }, + { + id: 2, + title: "An Awesome Apartment Near the Park! Almost too good to be true!", + img: "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 15000, + address: "789 Adebowale Street, nigeria", + latitude: 13.76784, + longitude: 109.22483, + }, + { + id: 3, + title: "A New Apartment in the City!", + img: "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 1, + bathroom: 1, + price: 8000, + address: "101 Asaba street, nigeria", + latitude: 13.709, + longitude: 109.2147, + }, + { + id: 4, + title: "Great Location! Great Price! Great Apartment!", + img: "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 5000, + address: "234 Kingsway, nigeria,", + latitude: 13.76784, + longitude: 109.22483, + }, + { + id: 5, + title: "Apartment 5", + img: "https://images.pexels.com/photos/276625/pexels-photo-276625.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 27000, + address: "567 Victoria Road, nigeria", + latitude: 13.702, + longitude: 109.2152, + }, + { + id: 6, + title: "Apartment 6", + img: "https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 1, + bathroom: 1, + price: 8000, + address: "890 Regent Street, nigeria", + latitude: 13.709, + longitude: 109.2153, + }, + { + id: 7, + title: "Apartment 7", + img: "https://images.pexels.com/photos/2029667/pexels-photo-2029667.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 2, + bathroom: 1, + price: 10000, + address: "112 Piccadilly, nigeria", + latitude: 13.7019, + longitude: 109.2157, + }, + { + id: 8, + title: "Apartment 8", + img: "https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + bedroom: 3, + bathroom: 2, + price: 15000, + address: "8765 Main High Street, nigeria", + latitude: 13.701, + longitude: 109.216, + }, +]; + +export const singlePostData = { + id: 1, + title: "Beautiful Apartment", + price: 12000, + images: [ + "https://images.pexels.com/photos/1918291/pexels-photo-1918291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/1428348/pexels-photo-1428348.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/2062426/pexels-photo-2062426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "https://images.pexels.com/photos/2467285/pexels-photo-2467285.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + ], + bedRooms: 2, + bathroom: 1, + size: 861, + latitude: 13.7666, + longitude: 109.21522, + city: "nigeria", + address: "1234 Broadway St", + school: "250m away", + bus: "100m away", + restaurant: "50m away", + description: + "Future alike hill pull picture swim magic chain seed engineer nest outer raise bound easy poetry gain loud weigh me recognize farmer bare danger. actually put square leg vessels earth engine matter key cup indeed body film century shut place environment were stage vertical roof bottom lady function breeze darkness beside tin view local breathe carbon swam declared magnet escape has from pile apart route coffee storm someone hold space use ahead sheep jungle closely natural attached part top grain your grade trade corn salmon trouble new bend most teacher range anybody every seat fifteen eventually", +}; + +export const userData = { + id: 1, + name: "Prince Ojo", + img: "https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", +}; diff --git a/src/main.jsx b/src/main.jsx index 51a8c5825..af80bdf24 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,9 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.jsx"; +import "./index.scss"; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( - , -) + +); diff --git a/src/responsive.scss b/src/responsive.scss new file mode 100644 index 000000000..f4f757722 --- /dev/null +++ b/src/responsive.scss @@ -0,0 +1,17 @@ +@mixin sm { + @media (max-width: 738px) { + @content; + } +} + +@mixin md { + @media (max-width: 1024px) { + @content; + } +} + +@mixin lg { + @media (max-width: 1366px) { + @content; + } +} diff --git a/src/router/homePage/homePage.jsx b/src/router/homePage/homePage.jsx new file mode 100644 index 000000000..d54496b9a --- /dev/null +++ b/src/router/homePage/homePage.jsx @@ -0,0 +1,41 @@ +import SearchBar from "../../components/searchbar/SearchBar.jsx"; +import "./homePage.scss"; + +function HomePage() { + return ( +
+
+
+

Find Real Estate $ Get Your Dream Place

+

+ The Future of Real Estate is a five episode series that profiles + global CEOs on the forces shaping our buildings and cities in a time + of unprecedented change. Each episode explores topics that include + hybrid work, housing affordability, resilience, decarbonization and + real estate in the metaverse. +

+ +
+
+

16+

+

Years of Experience

+
+
+

200

+

Award Gained

+
+
+

2000+

+

Property readly

+
+
+
+
+
+ background +
+
+ ); +} + +export default HomePage; diff --git a/src/router/homePage/homePage.scss b/src/router/homePage/homePage.scss new file mode 100644 index 000000000..d22b1944d --- /dev/null +++ b/src/router/homePage/homePage.scss @@ -0,0 +1,77 @@ +@import "../../responsive.scss"; +.homePage { + display: flex; + height: 100%; + + .textContainer { + flex: 3; + + .wrapper { + padding-right: 100px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 50px; + height: 100%; + + @include md { + padding: 0; + } + + @include sm { + justify-content: flex-start; + } + + .title { + font-size: 64px; + + @include lg { + font-size: 48px; + } + } + + .boxes { + display: flex; + justify-content: space-between; + + @include sm { + display: none; + } + + h1 { + font-size: 36px; + + @include lg { + font-size: 32px; + } + } + h2 { + font-size: 20px; + font-weight: 300; + } + } + } + } + + .imgContainer { + flex: 2; + background-color: #fcf5f3; + position: relative; + display: flex; + align-items: center; + + @include md { + display: none; + } + + img { + width: 115%; + position: absolute; + right: 0; + + @include lg { + width: 105%; + } + } + } +} diff --git a/src/router/layout/layout.jsx b/src/router/layout/layout.jsx new file mode 100644 index 000000000..e9b855b45 --- /dev/null +++ b/src/router/layout/layout.jsx @@ -0,0 +1,18 @@ +import "./layout.scss"; +import Navbar from "../../components/navbar/Navbar"; +import { Outlet } from "react-router-dom"; + +function Layout() { + return ( +
+
+ +
+
+ +
+
+ ); +} + +export default Layout; diff --git a/src/router/layout/layout.scss b/src/router/layout/layout.scss new file mode 100644 index 000000000..70a13c7ad --- /dev/null +++ b/src/router/layout/layout.scss @@ -0,0 +1,33 @@ +@import "../../responsive.scss"; +.layout { + height: 100vh; + max-width: 1366px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + display: flex; + flex-direction: column; + + @include lg { + // background-color: rgb(247, 210, 196); + max-width: 1280px; + } + + @include md { + // background-color: rgb(186, 203, 234); + max-width: 768px; + } + + @include sm { + // background-color: rgb(239, 200, 200); + max-width: 640px; + } + + .content { + // background: #ffeaea; + // flex: 1; + // height: calc(100vh - 100px); phần nội dung toàn màn hình + height: calc(100vh - 100px); + } +} diff --git a/src/router/listPage/listPage.jsx b/src/router/listPage/listPage.jsx new file mode 100644 index 000000000..5876dd42c --- /dev/null +++ b/src/router/listPage/listPage.jsx @@ -0,0 +1,26 @@ +import Filter from "../../components/filter/Filter"; +import "./listPage.scss"; +import { listData } from "../../lib/dummydata"; +import Card from "../../components/card/card"; +import Map from "../../components/map/Map"; + +function ListPage() { + const data = listData; + return ( +
+
+
+ + {data.map((item) => ( + + ))} +
+
+
+ +
+
+ ); +} + +export default ListPage; diff --git a/src/router/listPage/listPage.scss b/src/router/listPage/listPage.scss new file mode 100644 index 000000000..616b0391b --- /dev/null +++ b/src/router/listPage/listPage.scss @@ -0,0 +1,54 @@ +.listPage { + display: flex; + height: 100%; + + .listContainer { + flex: 3; + height: 100%; + + .wrapper { + height: 100%; + padding-right: 50px; + display: flex; + flex-direction: column; + gap: 50px; + padding-bottom: 50px; + overflow-y: scroll; + //scrollbar-width: none; /* Ẩn thanh cuộn trên Firefox */ + box-sizing: content-box; /* Đảm bảo padding không ảnh hưởng đến kích thước tổng thể */ + position: relative; + } + .wrapper::-webkit-scrollbar { + width: 12px; + background: transparent; /* Làm thanh cuộn trong suốt */ + } + + .wrapper::-webkit-scrollbar-thumb { + background-color: rgba( + 0, + 0, + 0, + 0.2 + ); /* Làm thanh trượt trong suốt ban đầu */ + border-radius: 6px; /* Bo góc cho thanh trượt */ + transition: background-color 0.3s ease; /* Hiệu ứng chuyển đổi màu sắc */ + position: absolute; + top: 0; /* Đặt thanh cuộn lên trên cùng */ + } + + .wrapper:hover::-webkit-scrollbar-thumb { + background-color: rgba( + 0, + 0, + 0, + 0.6 + ); /* Hiện thanh trượt rõ hơn khi cuộn */ + } + } + + .mapContainer { + flex: 2; + height: 100%; + background-color: #fcf5f3; + } +} diff --git a/src/router/login/login.jsx b/src/router/login/login.jsx new file mode 100644 index 000000000..201fffbbc --- /dev/null +++ b/src/router/login/login.jsx @@ -0,0 +1,7 @@ +import "./login.scss"; + +function Login() { + return
Login
; +} + +export default Login; diff --git a/src/router/login/login.scss b/src/router/login/login.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/router/profilePage/profilePage.jsx b/src/router/profilePage/profilePage.jsx new file mode 100644 index 000000000..8936be55e --- /dev/null +++ b/src/router/profilePage/profilePage.jsx @@ -0,0 +1,49 @@ +import "./profilePage.scss"; +import List from "../../components/list/List"; +import Chat from "../../components/chat/Chat"; + +function ProfilePage() { + return ( +
+
+
+
+

User Infromation

+ +
+
+ + Avatar: + + + + UserName:

Ferret

+ + + Gmail:

thanhduyly18@gmail.com

+ +
+
+

My List

+ +
+ +
+

Save List

+
+ +
+
+
+
+ +
+
+
+ ); +} + +export default ProfilePage; diff --git a/src/router/profilePage/profilePage.scss b/src/router/profilePage/profilePage.scss new file mode 100644 index 000000000..02f7028ef --- /dev/null +++ b/src/router/profilePage/profilePage.scss @@ -0,0 +1,84 @@ +@import "../../responsive.scss"; + +.profilePage { + display: flex; + height: 100%; + + @include md { + flex-direction: column; + overflow-y: scroll; + } + + .details { + flex: 3; + padding-bottom: 50px; + overflow-y: scroll; + + @include md { + flex: none; + height: max-content; + overflow-y: hidden; + } + + .wrapper { + height: 100%; + padding-right: 50px; + display: flex; + flex-direction: column; + gap: 50px; + + .title { + display: flex; + + justify-content: space-between; + h1 { + font-weight: 300; + } + button { + padding: 12px 24px; + background-color: #fece51; + cursor: pointer; + border: none; + } + } + + .info { + display: flex; + flex-direction: column; + gap: 20px; + + span { + display: flex; + align-items: center; + gap: 10px; + + p { + font-weight: bold; + } + } + + img { + width: 40px; + height: 40px; + border-radius: 50%; + object-fit: cover; + } + } + } + } + .chatContainer { + flex: 2; + background-color: #fcf5f3; + height: 100%; + + @include md { + flex: none; + height: max-content; + } + + .wrapper { + height: 100%; + padding: 0px 20px; + } + } +} diff --git a/src/router/singlePage/singlePage.jsx b/src/router/singlePage/singlePage.jsx new file mode 100644 index 000000000..72c558a2d --- /dev/null +++ b/src/router/singlePage/singlePage.jsx @@ -0,0 +1,118 @@ +import Slider from "../../components/slider/Slider"; +import Map from "../../components/map/Map.jsx"; +import "./singlePage.scss"; +import { singlePostData, userData } from "../../lib/dummydata"; + +function SinglePage() { + return ( +
+
+
+ +
+
+
+

{singlePostData.title}

+
+ + {singlePostData.address} +
+
$ {singlePostData.price}
+
+
+ + {userData.name} +
+
+
{singlePostData.description}
+
+
+
+
+
+

General

+
+
+ +
+ Utilities +

Renter is responsible

+
+
+
+ +
+ Pet Policy +

Pets Allowed

+
+
+
+ +
+ Property Fees +

Must have 3x the rent in total household income

+
+
+
+

Room Sizes

+
+
+ + 80 sqft +
+
+ + 2 bedroom +
+
+ + 1 bathroom +
+
+

Nearby place

+
+
+ +
+ School +

200m away

+
+
+
+ +
+ Bus stop +

100m away

+
+
+
+ +
+ Restaurant +

100m away

+
+
+
+ +

Location

+

+
+ +
+
+ + +
+
+
+
+ ); +} + +export default SinglePage; diff --git a/src/router/singlePage/singlePage.scss b/src/router/singlePage/singlePage.scss new file mode 100644 index 000000000..86cb079e6 --- /dev/null +++ b/src/router/singlePage/singlePage.scss @@ -0,0 +1,181 @@ +@import "../../responsive.scss"; + +.singlePage { + display: flex; + height: 100%; + overflow-y: scroll; + + @include md { + flex-direction: column; + } + + .details { + flex: 3; + height: 100%; + + .wrapper { + padding-right: 50px; + + .info { + margin-top: 50px; + .top { + display: flex; + justify-content: space-between; + .post { + display: flex; + flex-direction: column; + gap: 20px; + h1 { + font-weight: 400; + } + .adress { + display: flex; + flex-direction: column; + gap: 5px; + color: #888; + font-size: 14px; + + img { + width: 16px; + height: 16px; + } + } + .price { + padding: 5px; + border-radius: 5px; + background-color: #fddc9f; + font-size: 20px; + font-weight: 300; + width: max-content; + } + } + .user { + display: flex; + flex-direction: column; + padding: 0px 50px; + align-items: center; + justify-content: center; + gap: 20px; + border-radius: 10px; + background-color: rgb(255, 205, 81, 0.239); + font-weight: 600; + img { + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; + } + } + } + + .bottom { + margin-top: 50px; + color: #555; + line-height: 20px; + } + } + } + } + + .features { + flex: 2; + background: #fcf5f3; + + // @include md { + // margin-bottom: 50px; + // } + + .wrapper { + padding: 0px 20px; + display: flex; + flex-direction: column; + gap: 20px; + + img { + height: 24px; + width: 24px; + } + + .title { + font-size: 18px; + font-weight: bold; + margin-bottom: 10px; + } + .feature { + display: flex; + align-items: center; + gap: 10px; + + img { + background-color: rgb(254, 205, 81, 0.209); + } + .featureText { + span { + font-weight: bold; + } + p { + font-size: 14px; + } + } + } + + .listVertical { + display: flex; + flex-direction: column; + gap: 20px; + padding: 20px 10px; + background-color: white; + border-radius: 10px; + } + + .listHorizontal { + display: flex; + gap: 20px; + padding: 20px 10px; + align-items: center; + justify-content: space-between; + background-color: white; + border-radius: 10px; + } + + .sizes { + display: flex; + gap: 10px; + justify-content: space-between; + + @include lg { + font-size: 12px; + } + + .size { + display: flex; + gap: 10px; + padding: 10px; + background-color: white; + border-radius: 5px; + } + } + + .mapContainer { + width: 100%; + height: 200px; + } + + .buttons { + display: flex; + justify-content: space-between; + + button { + display: flex; + align-items: center; + gap: 5px; + padding: 20px; + background-color: white; + border-radius: 5px; + border: 1px solid #fece51; + cursor: pointer; + } + } + } + } +}