diff --git a/cubeseed_login/package-lock.json b/cubeseed_login/package-lock.json index 027ca21..c98df46 100644 --- a/cubeseed_login/package-lock.json +++ b/cubeseed_login/package-lock.json @@ -34,6 +34,7 @@ "@types/react": "18.0.37", "@types/react-dom": "18.0.11", "autoprefixer": "^10.4.14", + "axios": "^1.6.5", "chromatic": "^7.4.0", "eslint": "8.48.0", "eslint-config-next": "13.4.19", @@ -45,6 +46,7 @@ "prettier": "^2.8.8", "prettier-plugin-tailwindcss": "^0.1.13", "pretty-quick": "^3.1.3", + "react-icons": "^5.0.1", "storybook": "^7.5.1", "tailwindcss": "^3.3.2", "typescript": "5.0.4" @@ -2186,9 +2188,9 @@ "dev": true }, "node_modules/@babel/runtime": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", - "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", + "version": "7.23.8", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", + "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -2344,14 +2346,14 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, "node_modules/@emotion/react": { - "version": "11.11.1", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", - "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "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.2", + "@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", @@ -2367,9 +2369,9 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", - "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "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", @@ -2821,29 +2823,29 @@ "dev": true }, "node_modules/@floating-ui/core": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", - "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", + "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", "dependencies": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", - "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz", + "integrity": "sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==", "dev": true, "dependencies": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.5.4" }, "peerDependencies": { "react": ">=16.8.0", @@ -2851,9 +2853,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.11", @@ -6723,9 +6725,9 @@ "dev": true }, "node_modules/@types/prop-types": { - "version": "15.7.5", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/qs": { "version": "6.9.9", @@ -6759,9 +6761,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.6", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", - "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "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": "*" } @@ -7840,6 +7842,17 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz", + "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==", + "dev": true, + "dependencies": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -11305,6 +11318,26 @@ "node": ">=0.4.0" } }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -15882,6 +15915,15 @@ "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==", "dev": true }, + "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==", + "dev": true, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-inspector": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz", @@ -20500,9 +20542,9 @@ "dev": true }, "@babel/runtime": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz", - "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==", + "version": "7.23.8", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", + "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", "requires": { "regenerator-runtime": "^0.14.0" } @@ -20634,14 +20676,14 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, "@emotion/react": { - "version": "11.11.1", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", - "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "version": "11.11.3", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz", + "integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==", "requires": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.2", + "@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", @@ -20649,9 +20691,9 @@ } }, "@emotion/serialize": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", - "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz", + "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==", "requires": { "@emotion/hash": "^0.9.1", "@emotion/memoize": "^0.8.1", @@ -20885,35 +20927,35 @@ "dev": true }, "@floating-ui/core": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", - "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", + "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", "requires": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.0" } }, "@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", "requires": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" } }, "@floating-ui/react-dom": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", - "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz", + "integrity": "sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==", "dev": true, "requires": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.5.4" } }, "@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "@humanwhocodes/config-array": { "version": "0.11.11", @@ -23534,9 +23576,9 @@ "dev": true }, "@types/prop-types": { - "version": "15.7.5", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "@types/qs": { "version": "6.9.9", @@ -23570,9 +23612,9 @@ } }, "@types/react-transition-group": { - "version": "4.4.6", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", - "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "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==", "requires": { "@types/react": "*" } @@ -24407,6 +24449,17 @@ "integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==", "dev": true }, + "axios": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz", + "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==", + "dev": true, + "requires": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -27120,6 +27173,12 @@ "integrity": "sha512-OqzmNECXX85x/5L/OP9TfHErdDoSUoKR4y1sTTy/A5K2arwl7s5EmX0XTkkcJPlCAHYkElWj5Se+ZwNN/6ry2Q==", "dev": true }, + "follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "dev": true + }, "for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -30438,6 +30497,13 @@ } } }, + "react-icons": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", + "dev": true, + "requires": {} + }, "react-inspector": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz", diff --git a/cubeseed_login/package.json b/cubeseed_login/package.json index 7e69d54..c2feecd 100644 --- a/cubeseed_login/package.json +++ b/cubeseed_login/package.json @@ -39,6 +39,7 @@ "@types/react": "18.0.37", "@types/react-dom": "18.0.11", "autoprefixer": "^10.4.14", + "axios": "^1.6.5", "chromatic": "^7.4.0", "eslint": "8.48.0", "eslint-config-next": "13.4.19", @@ -50,6 +51,7 @@ "prettier": "^2.8.8", "prettier-plugin-tailwindcss": "^0.1.13", "pretty-quick": "^3.1.3", + "react-icons": "^5.0.1", "storybook": "^7.5.1", "tailwindcss": "^3.3.2", "typescript": "5.0.4" diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/CategoryInputField.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/CategoryInputField.tsx new file mode 100644 index 0000000..54d3a3f --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/CategoryInputField.tsx @@ -0,0 +1,35 @@ +import React from "react" +import Link from "next/link" +import styles from "@/styles/marketplaceprofile.module.css" +import SearchBar from "./SearchBar" +import { BsCart3, BsPersonCircle } from "react-icons/bs" +import { FiMessageSquare } from "react-icons/fi" + +const CategoryInputField: React.FC = () => { + return ( +
+ +
+
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+
+
+ ) +} + +export default CategoryInputField diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/DocumentFIle.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/DocumentFIle.tsx new file mode 100644 index 0000000..25f305e --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/DocumentFIle.tsx @@ -0,0 +1,35 @@ +// FileInput.tsx +import React, { ChangeEvent } from "react" +import styles from "@/styles/marketplaceprofile.module.css" + +interface FileInputProps { + id: string + name: string + label: string + onChange: (e: ChangeEvent) => void + error: string +} + +const FileInput: React.FC = ({ + id, + name, + label, + onChange, + error, +}) => { + return ( +
+ + + {error &&
{error}
} +
+ ) +} + +export default FileInput diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MarketplaceSidebar.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MarketplaceSidebar.tsx new file mode 100644 index 0000000..7bd8f40 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MarketplaceSidebar.tsx @@ -0,0 +1,335 @@ +import { useState } from "react" +import MarketPlaceSideBarStyle from "@/styles/MarketPlaceSideBar.module.css" +import logo from "@assets/icons/TransparentCubeseed.png" +import smallLogo from "@assets/icons/TransparentSmallCubeseed.png" +import Image from "next/image" + +const MarketPlaceSideBar = () => { + const [selected, setSelected] = useState(false) + const [id, setId] = useState("Home") + + const toggleSideBar = () => { + setSelected((prev) => !prev) + } + + const customSelect = (selectedName: string) => { + if (selectedName == "Home") { + setId("Home") + } else if (selectedName === "Purchase") { + setId("Purchase") + } else if (selectedName === "Quotes") { + setId("Quotes") + } else if (selectedName === "Favorite") { + setId("Favorite") + } else if (selectedName === "Profile") { + setId("Profile") + } + } + + return ( +
+
+ + + + {selected ? ( + small-logo + ) : ( + small-logo + )} +
+
+
+
customSelect("Home")} + > + + + + + + + + +

+ Home +

+
+
customSelect("Purchase")} + > + + + + + + + + +

+ Purchase Orders +

+
+
customSelect("Quotes")} + > + + + + + + + + +

+ Quotations +

+
+
customSelect("Favorite")} + > + + + +

+ Favorites +

+
+
customSelect("Profile")} + > + + + +

+ Profiles +

+
+
+ +
+
+ + + +

+ Settings +

+
+
+ + + +

+ Support +

+
+
+

+ Sign Out +

+
+
+
+ ) +} + +export default MarketPlaceSideBar diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountForm.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountForm.tsx new file mode 100644 index 0000000..50eba52 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountForm.tsx @@ -0,0 +1,126 @@ +import React, { useState } from "react" +import Link from "next/link" +import styles from "@/styles/marketplaceprofile.module.css" +import ProfileImg from "./ProfileImg" +import useProfile from "./hooks/useProfile" +import { Input } from "@cs/stories/Input" +import useProfilePhoto from "./hooks/useProfilePhoto" + +const PersonalDetailForm: React.FC = () => { + const { errors, formData, handleUserInputs, handleSubmit } = useProfile() + const { uploading, selectedImage, handleFileChange, error } = + useProfilePhoto() + + return ( +
+
+ +
+ +
+
+

Personal Detail

+ +
+ + {errors.name &&
{errors.name}
} + + + {errors.phone_number && ( +
{errors.phone_number}
+ )} + + + {errors.email &&
{errors.email}
} + + + {errors.location && ( +
{errors.location}
+ )} +
+
+
+

Password

+ + {errors.old_password && ( +
{errors.old_password}
+ )} + + + {errors.new_password && ( +
{errors.new_password}
+ )} +
+
+
+ + +
+
+
+ ) +} + +export default PersonalDetailForm diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountFormEdit.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountFormEdit.tsx new file mode 100644 index 0000000..328fa02 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountFormEdit.tsx @@ -0,0 +1,65 @@ +import React from "react" +import Link from "next/link" +import styles from "@/styles/marketplaceprofile.module.css" +import ProfileImg from "./ProfileImg" +import useProfilePhoto from "./hooks/useProfilePhoto" + +const MyAccountFormEdit: React.FC = () => { + const { uploading, selectedImage, handleFileChange, error } = + useProfilePhoto() + + return ( + <> +
+
+ +
+
+
+

Personal Detail

+

Edit

+
+
+

Name

+

Phone Number

+

Email

+

Location

+
+
+
+

Password

+

Change Password

+
+
+

Password

+
+
+
+

Preferred Products

+

Edit

+
+
+

Animal feed, Cocoa Products, Coffee and tea, Frui...

+
+
+
+
+ + +
+ + ) +} + +export default MyAccountFormEdit diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountTitle.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountTitle.tsx new file mode 100644 index 0000000..19b0f21 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountTitle.tsx @@ -0,0 +1,17 @@ +import React from "react" +import styles from "@/styles/marketplaceprofile.module.css" + +interface MyAccountTitleProps { + title: string +} + +const MyAccountTitle: React.FC = ({ title }) => { + return ( +
+

{title}

+
+
+ ) +} + +export default MyAccountTitle diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyBusinessForm.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyBusinessForm.tsx new file mode 100644 index 0000000..f42ad80 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyBusinessForm.tsx @@ -0,0 +1,173 @@ +import React from "react" +import Link from "next/link" +import styles from "@/styles/marketplaceprofile.module.css" +import ProfileImg from "./ProfileImg" +import useBusiness from "./hooks/useBusiness" +import { Input } from "@cs/stories/Input" +import useProfilePhoto from "./hooks/useProfilePhoto" + +const BusinessDetailForm: React.FC = () => { + const { bizData, handleBizInputs, handleBusinessSubmit, errors } = + useBusiness() + const { uploading, selectedImage, handleFileChange, error } = + useProfilePhoto() + + return ( +
+
+ +
+ +
+
+

Business Detail

+
+ + {errors.company_name && ( +
{errors.company_name}
+ )} + + + {errors.company_email && ( +
{errors.company_email}
+ )} + + + {errors.company_phone && ( +
{errors.company_phone}
+ )} +
+ +
+ {errors.category && ( +
{errors.category}
+ )} +
+
+
+

Business Address

+ + {errors.business_address && ( +
{errors.business_address}
+ )} +
+ {/*
*/} +
+

Custom Fields

+ + {errors.custom_fields && ( +
{errors.custom_fields}
+ )} +
+
+ + +
+
+
+
+ ) +} + +export default BusinessDetailForm + +const category = [ + { + id: 0, + value: "Select", + label: "Select the category", + }, + { + id: 1, + value: "catering", + label: "Catering Companies", + }, + { + id: 2, + value: "Food", + label: "Foodservices Distributors", + }, + { + id: 3, + value: "institution", + label: "Institution Buyers (e.g Schools, Hospital)", + }, + { + id: 4, + value: "grocery", + label: "Grocery Store Chain", + }, +] diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyBusinessFormEdit.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyBusinessFormEdit.tsx new file mode 100644 index 0000000..0fe1825 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyBusinessFormEdit.tsx @@ -0,0 +1,66 @@ +import React from "react" +import Link from "next/link" +import styles from "@/styles/marketplaceprofile.module.css" +import ProfileImg from "./ProfileImg" +import useProfilePhoto from "./hooks/useProfilePhoto" + +const MyBusinessFormEdit: React.FC = () => { + const { uploading, selectedImage, handleFileChange, error } = + useProfilePhoto() + + return ( + <> +
+
+ +
+
+
+

Business Details

+

Edit

+
+
+

Company Name

+

Company Email

+

Company Phone

+

Category

+
+
+
+

Business Address

+

Edit

+
+
+

Business Address

+
+
+
+

Custom Fields

+

Edit

+
+
+

Business Website Link...

+
+
+
+
+ {/* */} + + +
+ + ) +} + +export default MyBusinessFormEdit diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyDocumentForm.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyDocumentForm.tsx new file mode 100644 index 0000000..a3275e6 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyDocumentForm.tsx @@ -0,0 +1,128 @@ +import React from "react" +import styles from "@/styles/marketplaceprofile.module.css" +import ProfileImg from "./ProfileImg" +import useDocument from "./hooks/useDocument" +import useProfilePhoto from "./hooks/useProfilePhoto" +import { Input } from "@cs/stories/Input" +import FileInput from "./DocumentFIle" + +const DocumentUploadForm: React.FC = () => { + const { docInfo, errors, handleDocumentUpload, handleDocumentSubmit } = + useDocument() + + const { error, uploading, selectedImage, handleFileChange } = + useProfilePhoto() + + return ( +
+
+ +
+
+
+

Basic Information

+
+ + {errors.business_tax_id && ( +
{errors.business_tax_id}
+ )} + + + {errors.EIN &&
{errors.EIN}
} + + + {errors.SSN &&
{errors.SSN}
} +
+
+
+

+ Official Documents +

+
+

+ Upload a document on official letterhead that shows your + organization's status +

+

+ + This will help sellers decide if they would like to work with + you! We recommend completing 100% of the profile sections. + +

+
+
+

+ Document 1: Official documents that + contain your EIN, or sole proprietor, or individual status. +

+

+ Document 2: Official letterhead document + with employment confirmation. +

+
+
+ + +
+
+ +
+
+
+
+
+ ) +} + +export default DocumentUploadForm diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyDocumentFormEdit.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyDocumentFormEdit.tsx new file mode 100644 index 0000000..858ba6a --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyDocumentFormEdit.tsx @@ -0,0 +1,63 @@ +import React, { useState, useEffect } from "react" +import axios from "axios" +import Link from "next/link" +import ProfileImg from "./ProfileImg" +import styles from "../../../styles/marketplaceprofile.module.css" +import useProfilePhoto from "./hooks/useProfilePhoto" +import useDocument from "./hooks/useDocument" + +interface MyDocumentFormEditProps { + userId: string +} + +const MyDocumentFormEdit: React.FC = ({ userId }) => { + const { docInfo } = useDocument() + const { uploading, selectedImage, handleFileChange, error } = + useProfilePhoto() + + return ( + <> +
+
+ +
+ +
+
+

Basic Information

+ +
+ +
+

Business tax ID: {docInfo?.business_tax_id}

+

Employer ID number (EIN): {docInfo?.EIN}

+

Social Security (SSN): {docInfo?.SSN}

+
+
+ +
+

Official Documents

+ +
+ +
+

File [1]: {docInfo?.EIN}

+

File [2]: {docInfo?.SSN}

+
+
+
+
+ +
+ + ) +} + +export default MyDocumentFormEdit diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileIdLinks.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileIdLinks.tsx new file mode 100644 index 0000000..c2d9542 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileIdLinks.tsx @@ -0,0 +1,21 @@ +import React from "react" +import Link from "next/link" +import styles from "@/styles/marketplaceprofile.module.css" + +const ProfileLinks: React.FC<{ userId?: string }> = ({ userId = "" }) => { + return ( +
+ + My Account + + + My Business + + + My Document + +
+ ) +} + +export default ProfileLinks diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileImg.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileImg.tsx new file mode 100644 index 0000000..da8edb5 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileImg.tsx @@ -0,0 +1,57 @@ +import React, { ChangeEvent } from "react" +import Image from "next/image" +import styles from "@/styles/marketplaceprofile.module.css" + +interface ProfileImgProps { + uploading: boolean + selectedImage: string | null + handleFileChange: (e: ChangeEvent) => void + error: string +} + +const ProfileImg: React.FC = ({ + uploading, + selectedImage, + handleFileChange, + error, +}) => { + return ( +
+
+ {selectedImage ? ( +
+ Uploaded +
+ ) : ( +
+ × +
+ )} +
+ + + + +
+ ) +} + +export default ProfileImg diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileLinks.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileLinks.tsx new file mode 100644 index 0000000..a2595e5 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/ProfileLinks.tsx @@ -0,0 +1,21 @@ +import React from "react" +import Link from "next/link" +import styles from "@/styles/marketplaceprofile.module.css" + +const ProfileLinks: React.FC = () => { + return ( +
+ + My Account + + + My Business + + + My Documents + +
+ ) +} + +export default ProfileLinks diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/SearchBar.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/SearchBar.tsx new file mode 100644 index 0000000..20e263c --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/SearchBar.tsx @@ -0,0 +1,70 @@ +import React, { useState, useEffect } from "react" +import { PiCaretDownBold } from "react-icons/pi" +import { AiOutlineSearch } from "react-icons/ai" +import styles from "@/styles/marketplaceprofile.module.css" + +const categories = ["Apps", "eBooks", "Games", "Music", "Videos"] + +const SearchBar: React.FC = () => { + const [dropdownListVisibility, setDropdownListVisibility] = useState(false) + const [selectedCategory, setSelectedCategory] = useState("Category") + + useEffect(() => { + const dropdownListElement = document.getElementById("list") + if (dropdownListVisibility) { + dropdownListElement?.classList.add(styles.listShow) + } else { + dropdownListElement?.classList.remove(styles.listShow) + } + }, [dropdownListVisibility]) + + useEffect(() => { + const searchInputElement = document.getElementById("searchInput") + searchInputElement?.setAttribute( + "placeholder", + `Enter Products/ services to search... ${selectedCategory}...` + ) + }, [selectedCategory]) + + const handleDropdownButtonClick = () => { + setDropdownListVisibility(!dropdownListVisibility) + } + + const handleDropdownListItemClick = (e: React.MouseEvent) => { + setSelectedCategory(e.currentTarget.innerText) + } + + return ( +
+ + +
+ + +
+
+ ) +} + +export default SearchBar diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/TopHelpBar.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/TopHelpBar.tsx new file mode 100644 index 0000000..1f7e43c --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/TopHelpBar.tsx @@ -0,0 +1,14 @@ +import React from "react" +import Link from "next/link" +import styles from "@/styles/marketplaceprofile.module.css" + +const TopHelpBar: React.FC = () => { + return ( +
+ Help + Contact us +
+ ) +} + +export default TopHelpBar diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useBusiness.ts b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useBusiness.ts new file mode 100644 index 0000000..62b7755 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useBusiness.ts @@ -0,0 +1,122 @@ +import { useState, ChangeEvent } from "react" + +interface BusinessFormData { + company_name: string + company_email: string + company_phone: string + category: string + business_address: string + custom_fields: string +} + +interface BusinessErrors { + company_name: string + company_email: string + company_phone: string + location: string + category: string + business_address: string + custom_fields: string +} + +interface BusinessHook { + bizData: BusinessFormData + errors: BusinessErrors + handleBizInputs: (e: ChangeEvent) => void + handleBusinessSubmit: (e: React.FormEvent) => Promise +} + +const useBusiness = (): BusinessHook => { + const phoneRegex = /^\+234[789]\d{9}$/ + const [bizData, setBizData] = useState({ + company_name: "", + company_email: "", + company_phone: "", + category: "", + business_address: "", + custom_fields: "", + }) + + const [errors, setErrors] = useState({ + company_name: "", + company_email: "", + company_phone: "", + location: "", + category: "", + business_address: "", + custom_fields: "", + }) + + const handleBizInputs = (e: ChangeEvent) => { + const { name, value } = e.target + const newFormData = { ...bizData } + const newErrors = { ...errors } + + if (name === "company_name") { + newFormData[name] = value + newErrors[name] = + value.length < 3 ? "Company name must be at least 3 characters" : "" + } else if (name === "company_email") { + newFormData[name] = value + newErrors[name] = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) + ? "Enter a valid email" + : "" + } else if (name === "company_phone") { + const cleanedValue = value.replace(/\D/g, "") + newFormData[name] = + cleanedValue.length === 10 ? `+234${cleanedValue}` : value + newErrors[name] = !phoneRegex.test(newFormData[name]) + ? "Do not include the first 0 digit" + : "" + } else if (name === "category") { + newFormData[name] = value + newErrors[name] = value === "Select" ? "Select a category" : "" + } else if (name === "business_address") { + newFormData[name] = value + newErrors[name] = + value.length > 128 + ? "Business Address should be 128 characters long" + : "" + } else if (name === "custom_fields") { + newFormData[name] = value + newErrors[name] = !/^(https?:\/\/)?[^\s/$.?#].[^\s]*$/.test(value) + ? "Enter a valid website URL" + : "" + } + + setBizData(newFormData) + setErrors(newErrors) + } + + const handleBusinessSubmit = async (e: React.FormEvent) => { + e.preventDefault() + + try { + const response = await fetch("/api/mybusiness", { + method: "POST", + body: JSON.stringify({ bizData }), + headers: { + "Content-Type": "application/json", + }, + }) + + if (!response.ok) { + throw new Error("Failed to submit form data") + } + const data = await response.json() + alert("Successfully Submitted") + console.log("Form data submitted successfully:", data) + } catch (error) { + console.error("Error submitting form data:", error) + } + } + + return { + bizData, + handleBizInputs, + handleBusinessSubmit, + errors, + } +} + +export default useBusiness diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useDocument.ts b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useDocument.ts new file mode 100644 index 0000000..6c50892 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useDocument.ts @@ -0,0 +1,154 @@ +import { useState, useEffect, ChangeEvent } from "react" + +interface DocumentInfo { + business_tax_id: string + EIN: string + SSN: string + uploadEIN: string + uploadSSN: string +} + +interface DocumentErrors { + business_tax_id: string + EIN: string + SSN: string + uploadEIN: string + uploadSSN: string +} + +interface DocumentHook { + docInfo: DocumentInfo + errors: DocumentErrors + selectedDocImage: string + docImgError: string + setDocImgError: React.Dispatch> + handleDocumentUpload: (e: ChangeEvent) => void + handleDocumentSubmit: (e: React.FormEvent) => Promise +} + +const useDocument = (): DocumentHook => { + const [docInfo, setDocInfo] = useState({ + business_tax_id: "", + EIN: "", + SSN: "", + uploadEIN: "", + uploadSSN: "", + }) + + const [errors, setErrors] = useState({ + business_tax_id: "", + EIN: "", + SSN: "", + uploadEIN: "", + uploadSSN: "", + }) + + const [selectedDocImage, setSelectedDocImage] = useState("") + const [selectedDocFile, setSelectedDocFile] = useState(null) + const [docImgError, setDocImgError] = useState("") + + const handleDocumentUpload = (e: ChangeEvent) => { + const { name, files } = e.target + + if (name === "uploadEIN" || name === "uploadSSN") { + const allowedFileTypes = [ + "application/pdf", + "application/msword", + "application/vnd.openxmlformats-officedocument.wordprocessingml.document", + ] + + if (files && files.length > 0) { + const file = files[0] + + if (!allowedFileTypes.includes(file.type)) { + setErrors((prevErrors) => ({ + ...prevErrors, + [name]: + "Invalid file type. Please upload a PDF, DOC, or DOCX file.", + })) + } else if (file.size > 2097152) { + setErrors((prevErrors) => ({ + ...prevErrors, + [name]: + "File size too large. Please upload a file that is less than 2 MB.", + })) + } else { + setErrors((prevErrors) => ({ ...prevErrors, [name]: "" })) + setSelectedDocFile(file) + } + } + } else { + setDocInfo((prev) => ({ ...prev, [name]: e.target.value })) + } + } + + const handleDocumentSubmit = async (e: React.FormEvent) => { + e.preventDefault() + + if (Object.values(errors).some((error) => error !== "")) { + console.error( + "Document form has validation errors. Please fix them before submitting." + ) + return + } + if (Object.values(docImgError).some((error) => error !== "")) { + console.error( + "Photo form has validation errors. Please fix them before submitting." + ) + return + } + try { + const documentResponse = await fetch( + "https://ec2-16-171-43-115.eu-north-1.compute.amazonaws.com:8000/businessprofile", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(docInfo), + } + ) + + if (!documentResponse.ok) { + console.error("Failed to update user profile details") + console.log(docInfo) + return + } + + const photoFormData = new FormData() + photoFormData.append("myImage", selectedDocFile as Blob) + const photoResponse = await fetch( + "https://ec2-16-171-43-115.eu-north-1.compute.amazonaws.com:8000/userprofilephoto", + { + method: "POST", + body: photoFormData, + } + ) + + if (!photoResponse.ok) { + console.error("Failed to update profile picture") + console.log(photoFormData) + return + } + + console.log("Form submitted successfully!") + } catch (error) { + console.error("An error occurred:", error) + } + } + + useEffect(() => { + console.log("Selected Document Photo:", selectedDocImage) + }, [selectedDocImage]) + + return { + docInfo, + errors, + selectedDocImage, + docImgError, + setDocImgError, + handleDocumentUpload, + handleDocumentSubmit, + } +} +export default useDocument diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useProfile.ts b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useProfile.ts new file mode 100644 index 0000000..69f2d2f --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useProfile.ts @@ -0,0 +1,109 @@ +import { useState, ChangeEvent, FormEvent } from "react" + +interface FormData { + name: string + phone_number: string + email: string + location: string + old_password: string + new_password: string +} + +interface Errors { + name: string + phone_number: string + email: string + location: string + old_password: string + new_password: string +} + +const useProfile = () => { + const phoneRegex = /^\+234[789]\d{9}$/ + + const [formData, setFormData] = useState({ + name: "", + phone_number: "", + email: "", + location: "", + old_password: "", + new_password: "", + }) + + const [errors, setErrors] = useState({ + name: "", + phone_number: "", + email: "", + location: "", + old_password: "", + new_password: "", + }) + + const handleUserInputs = (e: ChangeEvent) => { + const { name, value } = e.target + const newFormData = { ...formData } + const newErrors = { ...errors } + + if (name === "name") { + newFormData[name] = value + newErrors[name] = + value.length < 3 ? "Name must be at least 3 characters" : "" + } else if (name === "phone_number") { + const cleanedValue = value.replace(/\D/g, "") + newFormData[name] = + cleanedValue.length === 10 ? `+234${cleanedValue}` : value + newErrors[name] = !phoneRegex.test(newFormData[name]) + ? "Do not include the first 0 digit" + : "" + } else if (name === "email") { + newFormData[name] = value + newErrors[name] = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) + ? "Enter a valid email" + : "" + } else if (name === "location") { + newFormData[name] = value + newErrors[name] = !/^[a-zA-Z]+$/.test(value) + ? "Enter a valid Country" + : "" + } else if (name === "old_password" || name === "new_password") { + newFormData[name] = value + newErrors[name] = + value.length < 8 ? "Password must be at least 8 characters" : "" + } + + setFormData(newFormData) + setErrors(newErrors) + } + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault() + + try { + const response = await fetch("/api/myaccount", { + method: "POST", + body: JSON.stringify({ formData }), + headers: { + "Content-Type": "application/json", + }, + }) + + if (!response.ok) { + throw new Error("Failed to submit form data") + } + const data = await response.json() + alert("Successfully submitted") + console.log("Form data submitted successfully:", data) + } catch (error) { + console.error("Error submitting form data:", error) + } + } + + return { + formData, + handleUserInputs, + handleSubmit, + errors, + } +} + +export default useProfile diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useProfilePhoto.ts b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useProfilePhoto.ts new file mode 100644 index 0000000..3518f87 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/hooks/useProfilePhoto.ts @@ -0,0 +1,85 @@ +import React, { useState } from "react" + +const imageMimeType = new RegExp("image/(png|jpg|jpeg)", "i") + +interface ProfilePhotoState { + selectedImage: string + handleFileChange: (e: React.ChangeEvent) => void + submitImage: (e: React.FormEvent) => Promise + errors: { picture: string } + uploading: boolean +} + +const useProfilePhoto = () => { + const [uploading, setUploading] = useState(false) + const [selectedImage, setSelectedImage] = useState("") + const [selectedFile, setSelectedFile] = useState(null) + const [error, setError] = useState("") + + const handleFileChange = (e: React.ChangeEvent) => { + e.preventDefault() + + const file = e.target.files![0] + + if (file.type.match(imageMimeType)) { + if (file.size <= 2 * 1024 * 1024) { + setSelectedImage(URL.createObjectURL(file)) + setSelectedFile(file) + setError("") + } else { + setError("Photo size must be smaller than 2MB.") + } + } else { + setError("Please select a valid image.") + } + e.target.value = "" + } + + const submitImage = async (e: React.FormEvent) => { + e.preventDefault() + + setUploading(true) + + if (!selectedFile) { + setError("Please select an image.") + return + } + + try { + const formData = new FormData() + formData.append("myImage", selectedFile) + + const response = await fetch("/api/marketplaceprofilephoto", { + method: "POST", + body: formData, + }) + + if (!response.ok) { + throw new Error("Failed to submit form data") + } + + const data = await response.json() + console.log("Photo submitted successfully:", data) + + // Update selected image after successful upload + setSelectedImage(data.imageUrl) + } catch (error) { + console.error("Error submitting photo:", error) + alert( + "An error occurred while submitting the photo. Please try again later." + ) + } + + setUploading(false) + } + + return { + selectedImage, + handleFileChange, + submitImage, + error, + uploading, + } +} + +export default useProfilePhoto diff --git a/cubeseed_login/src/component/dashboard/MarketPlaceProfile/horizontalRule.tsx b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/horizontalRule.tsx new file mode 100644 index 0000000..4748fc4 --- /dev/null +++ b/cubeseed_login/src/component/dashboard/MarketPlaceProfile/horizontalRule.tsx @@ -0,0 +1,23 @@ +import React from "react" +import "@/styles/global.css" +import styles from "@/styles/marketplaceprofile.module.css" + +interface HorizontalRuleProps { + sideBarOpenContainer: boolean +} + +const HorizontalRule: React.FC = ({ + sideBarOpenContainer, +}) => { + return ( + <> +
+ + ) +} + +export default HorizontalRule diff --git a/cubeseed_login/src/pages/dashboard/marketplace_dashboard/layout.tsx b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/layout.tsx new file mode 100644 index 0000000..9714dc9 --- /dev/null +++ b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/layout.tsx @@ -0,0 +1,43 @@ +import React, { ReactNode } from "react" +import "@/styles/global.css" +import MarketPlaceSideBar from "@/component/dashboard/MarketPlaceProfile/MarketplaceSidebar" +import TopHelpBar from "../../../component/dashboard/MarketPlaceProfile/TopHelpBar" +import CategoryInputField from "../../../component/dashboard/MarketPlaceProfile/CategoryInputField" +import ProfileLinks from "../../../component/dashboard/MarketPlaceProfile/ProfileLinks" +import styles from "@/styles/marketplaceprofile.module.css" +import HorizontalRule from "@/component/dashboard/MarketPlaceProfile/horizontalRule" + +interface IdDashboardLayoutProps { + title: string + children: ReactNode + sideBarOpenContainer: boolean +} + +const IdDashboardLayout: React.FC = ({ + title, + children, + sideBarOpenContainer, +}) => { + return ( +
+ +
+ + + + +
+

{title}

+
+ +
{children}
+
+
+ ) +} + +export default IdDashboardLayout diff --git a/cubeseed_login/src/pages/dashboard/marketplace_dashboard/myaccountform.tsx b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/myaccountform.tsx new file mode 100644 index 0000000..5ccbc67 --- /dev/null +++ b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/myaccountform.tsx @@ -0,0 +1,13 @@ +import React from "react" +import DashboardLayout from "./layout" +import PersonalDetailForm from "../../../component/dashboard/MarketPlaceProfile/MyAccountForm" + +const MyAccountForm: React.FC = () => { + return ( + + + + ) +} + +export default MyAccountForm diff --git a/cubeseed_login/src/pages/dashboard/marketplace_dashboard/mybusinessform.tsx b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/mybusinessform.tsx new file mode 100644 index 0000000..911eb40 --- /dev/null +++ b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/mybusinessform.tsx @@ -0,0 +1,13 @@ +import React from "react" +import DashboardLayout from "./layout" +import BusinessDetailForm from "../../../component/dashboard/MarketPlaceProfile/MyBusinessForm" + +const MyBusinessForm: React.FC = () => { + return ( + + + + ) +} + +export default MyBusinessForm diff --git a/cubeseed_login/src/pages/dashboard/marketplace_dashboard/mydocumentform.tsx b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/mydocumentform.tsx new file mode 100644 index 0000000..1f73020 --- /dev/null +++ b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/mydocumentform.tsx @@ -0,0 +1,12 @@ +import React from "react" +import DashboardLayout from "./layout" +import DocumentUploadForm from "../../../component/dashboard/MarketPlaceProfile/MyDocumentForm" + +const MyDocumentForm: React.FC = () => { + return ( + + + + ) +} +export default MyDocumentForm diff --git a/cubeseed_login/src/styles/MarketPlaceSideBar.module.css b/cubeseed_login/src/styles/MarketPlaceSideBar.module.css index 51c8294..d0cce71 100644 --- a/cubeseed_login/src/styles/MarketPlaceSideBar.module.css +++ b/cubeseed_login/src/styles/MarketPlaceSideBar.module.css @@ -1,131 +1,138 @@ /*************************** CONTAINER *******************************/ .sideBarOpenContainer { - display: flex; - width: 360px; - height: 100vh; - padding: 20px 12px 12px 12px; - flex-direction: column; - align-items: center; - gap: var(--dimentions-d-2, 15px); - background-color: #F0F6F6; - transition: .3s; + display: flex; + width: 360px; + height: 150vh; + padding: 20px 12px 12px 12px; + flex-direction: column; + align-items: center; + gap: var(--dimentions-d-2, 15px); + background-color: #f0f6f6; + transition: 0.3s; } .mainOptionsContainer { - display: flex; - flex-direction: column; - gap: 12px; + display: flex; + flex-direction: column; + gap: 12px; } .userSettingContainer { - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - display: flex; - flex-direction: column; - bottom: 0; - position: absolute; - padding-bottom: 2rem; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + display: flex; + flex-direction: column; + bottom: 0; + position: absolute; + padding-bottom: 2rem; } /*************************** OPEN SIDEBAR *******************************/ .logoOpen { - display: flex; - padding: var(--dimentions-d-0, 0px) 40px var(--dimentions-d-0, 0px) var(--dimentions-d-4, 16px); - align-items: center; - gap: 20px; + display: flex; + padding: var(--dimentions-d-0, 0px) 40px var(--dimentions-d-0, 0px) + var(--dimentions-d-4, 16px); + align-items: center; + gap: 20px; } .logoOpen > * { - cursor: pointer; + cursor: pointer; } .dividerOpen { - width: 304px; - height: var(--dimentions-d-0, 1px); - border-radius: var(--dimentions-d-0, 0px); - background: #D0DAD7; + width: 304px; + height: var(--dimentions-d-0, 1px); + border-radius: var(--dimentions-d-0, 0px); + background: #d0dad7; } .mainOptionsOpen { - display: flex; - align-items: center; - justify-content: flex-start; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 14px; - height: 56px; - padding: var(--dimentions-d-4, 16px) 24px var(--dimentions-d-4, 16px) var(--dimentions-d-4, 16px); - width: 336px; - gap: 12px; - font-weight: 500; + display: flex; + align-items: center; + justify-content: flex-start; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 14px; + height: 56px; + padding: var(--dimentions-d-4, 16px) 24px var(--dimentions-d-4, 16px) + var(--dimentions-d-4, 16px); + width: 336px; + gap: 12px; + font-weight: 500; } .mainOptionsOpen:hover { - cursor: pointer; - border-radius: 3rem; + cursor: pointer; + border-radius: 3rem; } .selectedOpen { - display: flex; - padding: var(--dimentions-d-4, 16px) 24px var(--dimentions-d-4, 16px) var(--dimentions-d-4, 16px); - align-items: center; - gap: 12px; - flex: 1 0 0; - align-self: stretch; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 14px; - color: white; - font-weight: 500; - background: #03656B; - border-radius: 3rem; + display: flex; + padding: var(--dimentions-d-4, 16px) 24px var(--dimentions-d-4, 16px) + var(--dimentions-d-4, 16px); + align-items: center; + gap: 12px; + flex: 1 0 0; + align-self: stretch; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 14px; + color: white; + font-weight: 500; + background: #03656b; + border-radius: 3rem; } /***************************** CLOSED SIDEBAR **********************************/ .dividerClosed { - width: 24px; - height: var(--dimentions-d-0, 1px); - border-radius: var(--dimentions-d-0, 0px); - background: #D0DAD7; + width: 24px; + height: var(--dimentions-d-0, 1px); + border-radius: var(--dimentions-d-0, 0px); + background: #d0dad7; } .selectedClosed { - background: #03656B; - border-radius: 3rem; + background: #03656b; + border-radius: 3rem; } .sideBarClosedContainer { - transition: .4s; - display: flex; - flex-direction: column; - align-items: center; - height: 100vh; - width: 80px; - padding: 20px 12px 12px 12px; - gap: var(--dimentions-d-2, 15px); - background-color: #F0F6F6; + transition: 0.4s; + display: flex; + flex-direction: column; + align-items: center; + height: 150vh; + width: 80px; + padding: 20px 12px 12px 12px; + gap: var(--dimentions-d-2, 15px); + background-color: #f0f6f6; } .logoClosed { - padding: 0; + padding: 0; } .logoClosed > * { - cursor: pointer; + cursor: pointer; } .mainOptionsClosedContainer { - display: flex; - align-items: center; - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 14px; - height: 56px; - width: 56px; - font-weight: 500; - justify-content: center; - cursor: pointer; + display: flex; + align-items: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 14px; + height: 56px; + width: 56px; + font-weight: 500; + justify-content: center; + cursor: pointer; } .hidden { - display: none; + display: none; } diff --git a/cubeseed_login/src/styles/globals.css b/cubeseed_login/src/styles/globals.css index 0b8eeec..5da6113 100644 --- a/cubeseed_login/src/styles/globals.css +++ b/cubeseed_login/src/styles/globals.css @@ -10,25 +10,94 @@ li { a { text-decoration: none; + cursor: pointer; } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { margin: 0; padding: 0; border: 0; @@ -44,8 +113,17 @@ time, mark, audio, video { } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { display: block; } @@ -53,16 +131,20 @@ body { line-height: 1; } -ol, ul { +ol, +ul { list-style: none; } -blockquote, q { +blockquote, +q { quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { +blockquote:before, +blockquote:after, +q:before, +q:after { content: ""; content: none; } @@ -83,7 +165,7 @@ a { } input { - border: 1px solid #45DFA9; + border: 1px solid #45dfa9; border-radius: 6px; position: relative; width: 100%; @@ -91,7 +173,7 @@ input { width: 100%; margin: 10px; line-height: 6ex; - outline: #45DFA9; + outline: #45dfa9; } label { @@ -101,4 +183,4 @@ label { left: 2em; background-color: white; padding: 0 5px; -}/*# sourceMappingURL=globals.css.map */ \ No newline at end of file +} /*# sourceMappingURL=globals.css.map */ diff --git a/cubeseed_login/src/styles/globals.scss b/cubeseed_login/src/styles/globals.scss index 3aa6c6a..7cd9cae 100644 --- a/cubeseed_login/src/styles/globals.scss +++ b/cubeseed_login/src/styles/globals.scss @@ -1,101 +1,180 @@ -@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"); -body{ - font-family:'Ubuntu'; +body { + font-family: "Ubuntu"; position: relative; } -li{ +li { list-style: none; } -a{ +a { text-decoration: none; } - /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: 'Ubuntu'; - vertical-align: baseline; - +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: "Ubuntu"; + vertical-align: baseline; } -*{ - box-sizing: border-box; - margin: 0; - padding: 0; +* { + box-sizing: border-box; + margin: 0; + padding: 0; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } -a{ - all:unset +a { + all: unset; } - .input-wrapper { - position: relative; - width: 100%; - margin: 10px; - } - - input { - border: 1px solid #45DFA9; - border-radius: 6px; - position: relative; - width: 100%; - margin: 10px;width: 100%; - margin: 10px; - line-height: 6ex; - outline: #45DFA9; - } - - label { - position: absolute; - top: 0.2ex; - z-index: 1; - left: 2em; - background-color: white; - padding: 0 5px; - } + position: relative; + width: 100%; + margin: 10px; +} + +input { + border: 1px solid #45dfa9; + border-radius: 6px; + position: relative; + width: 100%; + margin: 10px; + width: 100%; + margin: 10px; + line-height: 6ex; + outline: #45dfa9; +} + +label { + position: absolute; + top: 0.2ex; + z-index: 1; + left: 2em; + //background-color: white; + padding: 0 5px; +} diff --git a/cubeseed_login/src/styles/marketplaceprofile.module.css b/cubeseed_login/src/styles/marketplaceprofile.module.css new file mode 100644 index 0000000..f3f0dd2 --- /dev/null +++ b/cubeseed_login/src/styles/marketplaceprofile.module.css @@ -0,0 +1,378 @@ +/*================== +this color and style is only applicable to marketplace profile +==============================================================*/ + +.profileWrapper { + display: flex; + flex-direction: row; + max-width: 100%; + background-color: white; +} + +/* .sidebar { + height: 150vh; + padding: 4rem; + background-color: var(--clr-primary-90); + position: relative; +} */ +.homeExpanded { + width: 75%; + height: 150vh; + padding: 2rem; + padding-left: 2rem; + padding-right: 4rem; +} + +.homeCollapsed { + width: 90%; + height: 150vh; + padding: 2rem; + padding-left: 8rem; + padding-right: 6rem; +} + +.hrExpanded { + width: 100%; +} +.hrCollapsed { + width: 100%; +} + +.helpBar { + display: flex; + justify-content: flex-end; + align-items: flex-end; + text-align: end; + gap: 1.5rem; + padding-bottom: 4rem; +} +.helpBar p { + color: var(--clr-primary); + font-size: 18px; + font-weight: bold; +} +.categoryInput { + display: flex; + justify-content: space-between; + padding-bottom: 3.5rem; +} +.categoryIcons { + display: flex; + justify-content: space-between; + justify-content: flex-start; + align-items: flex-start; + gap: 2rem; + padding-top: 1rem; + padding-left: 2rem; + color: var(--clr-primary-10); + font-size: 1.5rem; +} +.accountLinks { + display: flex; + text-align: start; + justify-content: flex-start; + align-items: flex-start; + gap: 1.5rem; +} +.accountLinks a:hover, +.accountLinks a:active { + border-bottom: 2px solid black; +} + +.accountTile { + display: flex; + gap: 1rem; + padding-top: 2rem; +} +.accountLinks a { + font-size: 16px; + padding-bottom: 5px; +} +.accountTile p, +.accountLinks a { + color: #000000; +} +.accountTile hr { + background: #b9b5b5; + width: 100%; + padding-left: 5rem; + margin-top: 10px; +} +.accountTileHr { + width: 100%; +} +.accountTileHr2 { + width: 100%; +} + +.mainContent { + display: flex; + flex-direction: row; + gap: 2.5rem; + padding-top: 2rem; +} +.profileImg { + width: 20%; + display: flex; + flex-direction: column; + align-items: center; +} + +.imageContainer { + position: relative; + width: 100px; + height: 100px; + border-radius: 50%; + background-color: #c8a2a2; + display: flex; + align-items: center; + justify-content: center; +} +.circularImage { + width: 100%; + height: 100%; + border-radius: 50%; + overflow: hidden; +} + +.circularImage img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.uploadButton { + position: relative; + cursor: pointer; + text-align: start; + top: 2rem; + left: -5px; + color: var(--clr-primary-10); + border-bottom: 2px solid var(--clr-primary-10); + padding-top: 5px; +} + +.demoImage { + font-size: 48px; +} + +.timesIcon { + cursor: pointer; +} + +#fileInput { + display: none; +} + +.profileImg img { + border-radius: 50%; + margin: auto; +} +.uploadBtn { + margin-top: 6rem; + cursor: pointer; +} +/* .profileContent { + width: 80%; + color: var(--clr-primary); +} */ + +/* .inputForm { + display: flex; + flex-direction: column; + padding-top: 4%; + width: 50%; + gap: 2rem; +} */ +/* .css-1u3bzj6-MuiFormControl-root-MuiTextField-root{ + width:50%; +} */ +.docs { + width: 100%; +} +.docs p { + line-height: 1.5rem; +} +.profileContent p, +.formEditTitle, +.accountTile p, +.accountLinks { + color: var(--clr-primary); + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 20px; +} +.profileContent hr { + width: 100%; + margin-top: 2rem; +} +.formContent p { + color: var(--clr-primary-10); + font-weight: 400; + font-size: 14px; +} + +.error { + font-size: 14px; + color: red; +} + +.formEditTitle { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 2rem; +} + +.formEditTitle:first-child { + padding-top: 0; +} +.formEditTitle p:last-child { + border-bottom: 2px solid black; + padding-top: 5px; +} + +/*============================ +Search Bar +==============================*/ + +.searchBar { + display: flex; + align-items: center; + border-radius: 50px; + width: 700px; + background-color: var(--clr-neutral-90); + box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; +} +.dropDown { + position: relative; + width: 280px; + /* border-radius: 50px; */ + border-top-left-radius: 50px; + border-bottom-left-radius: 50px; + border: 1px solid var(--clr-primary-70); + background-color: var(--clr-primary-70); + cursor: pointer; + box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; +} + +.dropDownText { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 1rem; + font-weight: 500; + color: var(--clr-primary); + padding: 1rem 1.5rem; +} + +.dropDownList { + position: absolute; + top: 4rem; + left: 0; + width: 100%; + max-height: 0; + overflow: hidden; + border-radius: 15px; + background-color: var(--clr-primary-90); + text-align: start; + transition: max-height 0.5s; +} +.listShow { + max-height: 300px; +} +.dropDownItems { + font-size: 16px; + font-weight: 500; + padding: 1rem 0 1rem 1.5rem; + cursor: pointer; + transition: margin-left 0.2s ease; +} +.dropDownItems:hover { + margin-left: 0.5rem; + color: var(--clr-secondary); +} +.searchBox { + display: flex; + align-items: center; + padding-right: 1rem; + width: 100%; + color: var(--clr-primary); +} +.input { + border: 0; + border-radius: none; + position: none; + width: 100%; + margin: 0; + line-height: 0; + outline: none; +} +.searchBox input { + padding: 1rem; + width: 100%; + font-size: 16px; + font-weight: 500; + color: var(--clr-primary-10); + border: 0; + outline: 0; + background-color: var(--clr-neutral-90); + /* background-color: blue; */ +} +.searchIcon { + font-size: 1.3rem; + cursor: pointer; + color: var(--clr-primary-10); +} + +.searchBox input::placeholder { + font-size: 1rem; + font-weight: 500; + color: var(--clr-neutral-70); +} + +/*==================== +btn +====================*/ + +.btn, +.btnBusiness { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 2rem; + padding-top: 6rem; +} +/* .btnBusiness{ + justify-content: flex-end; + align-items: flex-end; +} */ +/* .personalDetails label{ + background-color: none; +} */ +.btnFilled, +.btnOutlined { + border-radius: 50px; + background-color: var(--clr-secondary); + color: var(--clr-primary); + padding: 15px; + font-size: 16px; + font-weight: 600; +} +.btnFilled { + width: 40%; +} +.btnOutlined { + background-color: white; + border: 1px solid var(--clr-primary); +} + +.docUpload { + display: flex; + flex-direction: row; + gap: 4rem; + padding-top: 2rem; + padding-bottom: 4rem; + width: 100%; +}