From b4418514a8b733ccdd8d6952527cc7bab931bb71 Mon Sep 17 00:00:00 2001 From: ShubhamKH08 Date: Wed, 20 Mar 2024 22:38:04 +0530 Subject: [PATCH] vercel build in the package.json "vercel-build":"prisma generate && next build" --- frontend/package-lock.json | 271 ++++++++- frontend/package.json | 3 + frontend/src/App.jsx | 4 + frontend/src/assets/svg/close.jsx | 17 + frontend/src/components/Button/index.jsx | 74 +++ .../src/components/ErrorMessage/index.jsx | 13 + frontend/src/components/Img/index.jsx | 19 + frontend/src/components/Input/index.jsx | 84 +++ frontend/src/components/Line/index.jsx | 6 + frontend/src/components/List/index.jsx | 10 + frontend/src/components/SearchBar.jsx | 7 + frontend/src/components/SelectBox/index.jsx | 145 +++++ frontend/src/components/Text/index.jsx | 61 ++ frontend/src/components/TextArea/index.jsx | 39 ++ frontend/src/components/index.js | 8 + frontend/src/pages/TwoFa/Otpinput.jsx | 5 - frontend/src/pages/profile/Profile.jsx | 83 +++ frontend/src/pages/profile/settings.jsx | 560 ++++++++++++++++++ 18 files changed, 1403 insertions(+), 6 deletions(-) create mode 100644 frontend/src/assets/svg/close.jsx create mode 100644 frontend/src/components/Button/index.jsx create mode 100644 frontend/src/components/ErrorMessage/index.jsx create mode 100644 frontend/src/components/Img/index.jsx create mode 100644 frontend/src/components/Input/index.jsx create mode 100644 frontend/src/components/Line/index.jsx create mode 100644 frontend/src/components/List/index.jsx create mode 100644 frontend/src/components/SearchBar.jsx create mode 100644 frontend/src/components/SelectBox/index.jsx create mode 100644 frontend/src/components/Text/index.jsx create mode 100644 frontend/src/components/TextArea/index.jsx create mode 100644 frontend/src/components/index.js create mode 100644 frontend/src/pages/profile/Profile.jsx create mode 100644 frontend/src/pages/profile/settings.jsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 0b6887a..e6748b0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,10 +16,13 @@ "@vitejs/plugin-react-refresh": "^1.3.1", "axios": "^1.6.3", "framer-motion": "^10.16.2", + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.0.1", "react-redux": "^9.0.4", "react-router-dom": "^6.15.0", + "react-select": "^5.8.0", "react-tooltip": "^5.21.1", "redux": "^5.0.1", "redux-thunk": "^3.1.0", @@ -522,6 +525,56 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/cache/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, "node_modules/@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -537,6 +590,74 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", "optional": true }, + "node_modules/@emotion/react": { + "version": "11.11.3", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz", + "integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.3", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz", + "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/serialize/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@esbuild/linux-loong64": { "version": "0.14.54", "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz", @@ -1142,6 +1263,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.4", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz", @@ -1349,6 +1478,20 @@ "proxy-from-env": "^1.1.0" } }, + "node_modules/babel-plugin-macros": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", + "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "cosmiconfig": "^7.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1750,6 +1893,15 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==" }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -2137,6 +2289,17 @@ "node": ">=6" } }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/expect": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz", @@ -2200,6 +2363,11 @@ "node": ">=8" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/follow-redirects": { "version": "1.15.4", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz", @@ -2472,6 +2640,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/immer": { "version": "10.0.3", "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.3.tgz", @@ -3127,6 +3308,11 @@ "lz-string": "bin/bin.js" } }, + "node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -3259,7 +3445,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3608,6 +3793,21 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -3656,6 +3856,14 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -3717,6 +3925,26 @@ "react-dom": ">=16.8" } }, + "node_modules/react-select": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz", + "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==", + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@floating-ui/dom": "^1.0.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^6.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0", + "use-isomorphic-layout-effect": "^1.1.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-tooltip": { "version": "5.21.4", "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.21.4.tgz", @@ -3730,6 +3958,21 @@ "react-dom": ">=16.14.0" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3926,6 +4169,14 @@ "node": ">=8" } }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -4065,6 +4316,11 @@ "node": ">=8" } }, + "node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", @@ -4249,6 +4505,19 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 5324411..f42f08c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,10 +11,13 @@ "@vitejs/plugin-react-refresh": "^1.3.1", "axios": "^1.6.3", "framer-motion": "^10.16.2", + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.0.1", "react-redux": "^9.0.4", "react-router-dom": "^6.15.0", + "react-select": "^5.8.0", "react-tooltip": "^5.21.1", "redux": "^5.0.1", "redux-thunk": "^3.1.0", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index a0f9cd6..d7340ce 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -4,9 +4,11 @@ import Otpscreen from "./pages/TwoFa/Otpscreen"; import TwofaForm from "./pages/TwoFa/TwofaOptions"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import LoginForm from "./pages/Login/Login"; +import SettingsPage from "./pages/profile/settings"; import SignupScreen from "./pages/Signup/SignupScreen"; import SignupTab3 from "./pages/Signup/components/SignupTab3"; import styles from './MyStyle.css'; +import Profile from './pages/profile/Profile'; function App() { return ( @@ -17,6 +19,8 @@ function App() { } /> } /> } /> + } /> + } /> {/**/} {/**/} {/**/} diff --git a/frontend/src/assets/svg/close.jsx b/frontend/src/assets/svg/close.jsx new file mode 100644 index 0000000..8e6b261 --- /dev/null +++ b/frontend/src/assets/svg/close.jsx @@ -0,0 +1,17 @@ +import React from "react"; +export const CloseSVG = ({ + fillColor = "#000000", + className = "", + ...props +}) => { + return ( + + + + ); +}; diff --git a/frontend/src/components/Button/index.jsx b/frontend/src/components/Button/index.jsx new file mode 100644 index 0000000..e98d9dd --- /dev/null +++ b/frontend/src/components/Button/index.jsx @@ -0,0 +1,74 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const shapes = { round: "rounded-[10px]", circle: "rounded-[50%]" }; +const variants = { + outline: { + white_A700: "outline outline-[0.75px] outline-white-A700 text-white-A700", + gray_900: "outline outline-[0.5px] outline-gray-900 text-gray-900", + gray_100: "outline outline-[0.75px] outline-gray-100 text-black-900", + }, + fill: { + gray_900: "bg-gray-900 text-white-A700", + gray_100: "bg-gray-100 text-gray-500", + green_600: "bg-green-600 text-white-A700", + gray_900_67: "bg-gray-900_67", + black_900: "bg-black-900 text-white-A700", + white_A700: "bg-white-A700 text-gray-900", + gray_50: "bg-gray-50 text-black-900", + gray_900_26: "bg-gray-900_26 text-white-A700", + }, +}; +const sizes = { + xs: "p-[7px]", + sm: "pr-[9px] py-[9px]", + md: "p-2.5", + lg: "p-[13px]", + xl: "pr-[15px] py-[15px]", + "2xl": "p-4", +}; + +const Button = ({ + children, + className = "", + leftIcon, + rightIcon, + shape = "", + size = "", + variant = "", + color = "", + ...restProps +}) => { + return ( + + ); +}; + +Button.propTypes = { + className: PropTypes.string, + children: PropTypes.node, + shape: PropTypes.oneOf(["round", "circle"]), + size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "2xl"]), + variant: PropTypes.oneOf(["outline", "fill"]), + color: PropTypes.oneOf([ + "white_A700", + "gray_900", + "gray_100", + "green_600", + "gray_900_67", + "black_900", + "gray_50", + "gray_900_26", + ]), +}; + +export { Button }; diff --git a/frontend/src/components/ErrorMessage/index.jsx b/frontend/src/components/ErrorMessage/index.jsx new file mode 100644 index 0000000..ac1584e --- /dev/null +++ b/frontend/src/components/ErrorMessage/index.jsx @@ -0,0 +1,13 @@ +import React from "react"; + +export const ErrorMessage = ({ errors = [], className = "" }) => { + return ( + errors?.length > 0 && ( +
+ {errors.join(", ")} +
+ ) + ); +}; diff --git a/frontend/src/components/Img/index.jsx b/frontend/src/components/Img/index.jsx new file mode 100644 index 0000000..74a4db4 --- /dev/null +++ b/frontend/src/components/Img/index.jsx @@ -0,0 +1,19 @@ +import React from "react"; + +const Img = ({ + className, + src = "defaultNoData.png", + alt = "testImg", + ...restProps +}) => { + return ( + {alt} + ); +}; +export { Img }; diff --git a/frontend/src/components/Input/index.jsx b/frontend/src/components/Input/index.jsx new file mode 100644 index 0000000..cc4d4b7 --- /dev/null +++ b/frontend/src/components/Input/index.jsx @@ -0,0 +1,84 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { ErrorMessage } from "../../components/ErrorMessage"; + +const variants = { + outline: { + gray_400: "border border-gray-400 border-solid text-black-900", + gray_300: "border border-gray-300 border-solid", + }, + fill: { gray_50: "bg-gray-50 text-gray-500", white_A700: "bg-white-A700" }, +}; +const shapes = { round: "rounded-[15px]" }; +const sizes = { + xs: "pb-[11px] pr-[11px] pt-[13px]", + md: "pb-[18px] pr-[18px] pt-[19px]", + sm: "pb-[15px] pt-[18px]", +}; + +const Input = React.forwardRef( + ( + { + wrapClassName = "", + className = "", + name = "", + placeholder = "", + type = "text", + children, + errors = [], + label = "", + prefix, + suffix, + onChange, + shape = "", + size = "", + variant = "fill", + color = "white_A700", + ...restProps + }, + ref, + ) => { + const handleChange = (e) => { + if (onChange) onChange(e?.target?.value); + }; + + return ( + <> +
+ {!!label && label} + {!!prefix && prefix} + + {!!suffix && suffix} +
+ {!!errors && } + + ); + }, +); + +Input.propTypes = { + wrapClassName: PropTypes.string, + className: PropTypes.string, + name: PropTypes.string, + placeholder: PropTypes.string, + type: PropTypes.string, + shape: PropTypes.oneOf(["round"]), + size: PropTypes.oneOf(["xs", "md", "sm"]), + variant: PropTypes.oneOf(["outline", "fill"]), + color: PropTypes.oneOf(["gray_400", "gray_300", "gray_50", "white_A700"]), +}; + +export { Input }; diff --git a/frontend/src/components/Line/index.jsx b/frontend/src/components/Line/index.jsx new file mode 100644 index 0000000..24fff00 --- /dev/null +++ b/frontend/src/components/Line/index.jsx @@ -0,0 +1,6 @@ +import React from "react"; + +const Line = ({ className, ...restProps }) => { + return
; +}; +export { Line }; diff --git a/frontend/src/components/List/index.jsx b/frontend/src/components/List/index.jsx new file mode 100644 index 0000000..04de0d6 --- /dev/null +++ b/frontend/src/components/List/index.jsx @@ -0,0 +1,10 @@ +import React from "react"; + +const List = ({ children, className, ...restProps }) => { + return ( +
+ {children} +
+ ); +}; +export { List }; diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx new file mode 100644 index 0000000..6b97535 --- /dev/null +++ b/frontend/src/components/SearchBar.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function SearchBar() { + return ( +
SearchBar
+ ) +} diff --git a/frontend/src/components/SelectBox/index.jsx b/frontend/src/components/SelectBox/index.jsx new file mode 100644 index 0000000..069edbb --- /dev/null +++ b/frontend/src/components/SelectBox/index.jsx @@ -0,0 +1,145 @@ +import React from "react"; +import Select from "react-select"; +import PropTypes from "prop-types"; +import { ErrorMessage } from "../ErrorMessage"; + +const SelectBox = React.forwardRef( + ( + { + children, + placeholder = "Select", + className = "", + options = [], + isSearchable = false, + placeholderClassName = "", + isMulti = false, + onChange, + value = "", + errors = [], + indicator, + shape = "", + size = "", + variant = "", + color = "", + ...restProps + }, + ref, + ) => { + const [selectedVal, setSelectedVal] = React.useState(value); + + const handleChange = (data) => { + setSelectedVal(data); + if (isMulti) { + onChange?.(data?.map((d) => d.value) || []); + } else { + onChange?.(data?.value); + } + }; + + return ( + <> + +
+ +
+ + Website + + + } + color="gray_400" + size="md" + variant="outline" + /> +
+ + +
+
+ + Notification Settings + + +
+ +
+
+ + Item Sold + + + When someone purchased one of your items + +
+ camera +
+ +
+
+ + Successful Purchase + + + When you successfully buy an item + +
+ camera One +
+ +
+
+ + Auction Expirates + + + When a timed auction you created ends + +
+ camera Two +
+ +
+
+ + Owned Item Updates + + + When a significant update occurs for one of the items + you have purchased on Enefthy + +
+ camera Three +
+ +
+ +
+
+
+ + Your Photo + + +
+
+
+ Ellipse1023 +
+ + Edit your photo + +
+ + Delete + + + Update + +
+
+
+
+ +
+ + Click to upload or drag and drop + + + <> + PNG, JPG or Gif +
+ Max 20Mb + + +
+
+
+
+
+
+ + Social Linked + + +
+
+
+ signal + +
+
+ + Edit your photo + + + <> + Use Google to sign in to your account. +
+ Click here to learn more. + + +
+
+
+
+ + + + + + + + ); +}; + + + +