From b64b7f41082b63a4030d547974077de098e98ce0 Mon Sep 17 00:00:00 2001 From: grochalapiotr Date: Sun, 6 Oct 2024 21:09:00 +0200 Subject: [PATCH] feat: add initial profile view --- package-lock.json | 308 ++++++++++++++++++------- package.json | 3 +- src/App.tsx | 8 +- src/calendarView/calendarView.tsx | 13 -- src/calendarView/calendarViewStyles.ts | 49 ---- src/profileView/profileView.tsx | 86 +++++++ src/profileView/profileViewStyles.ts | 86 +++++++ 7 files changed, 409 insertions(+), 144 deletions(-) delete mode 100644 src/calendarView/calendarView.tsx delete mode 100644 src/calendarView/calendarViewStyles.ts create mode 100644 src/profileView/profileView.tsx create mode 100644 src/profileView/profileViewStyles.ts diff --git a/package-lock.json b/package-lock.json index 589973d..188d9d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@mui/base": "^5.0.0-beta.40", - "@mui/material": "^5.4.0", + "@mui/icons-material": "^6.1.2", + "@mui/material": "^6.1.2", "@mui/styled-engine": "^5.4.0", "commitlint": "^19.5.0", "react": "^18.3.1", @@ -377,10 +378,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz", - "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==", - "license": "MIT", + "version": "7.25.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz", + "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -847,18 +847,27 @@ } }, "node_modules/@emotion/cache": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", - "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", - "license": "MIT", - "dependencies": { - "@emotion/memoize": "^0.8.1", - "@emotion/sheet": "^1.2.2", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "version": "11.13.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", + "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } }, + "node_modules/@emotion/cache/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==" + }, + "node_modules/@emotion/cache/node_modules/@emotion/weak-memoize": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==" + }, "node_modules/@emotion/hash": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", @@ -918,10 +927,9 @@ } }, "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==", - "license": "MIT" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==" }, "node_modules/@emotion/styled": { "version": "11.11.5", @@ -962,10 +970,9 @@ } }, "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==", - "license": "MIT" + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz", + "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==" }, "node_modules/@emotion/weak-memoize": { "version": "0.3.1", @@ -1640,36 +1647,59 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.0.tgz", - "integrity": "sha512-8SLffXYPRVpcZx5QzxNE8fytTqzp+IuU3deZbQWg/vSaTlDpR5YVrQ4qQtXTi5cRdhOufV5INylmwlKK+//nPw==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.2.tgz", + "integrity": "sha512-1oE4U38/TtzLWRYWEm/m70dUbpcvBx0QvDVg6NtpOmSNQC1Mbx0X/rNvYDdZnn8DIsAiVQ+SZ3am6doSswUQ4g==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, - "node_modules/@mui/material": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.0.tgz", - "integrity": "sha512-DbR1NckTLpjt9Zut9EGQ70th86HfN0BYQgyYro6aXQrNfjzSwe3BJS1AyBQ5mJ7TdL6YVRqohfukxj9JlqZZUg==", - "license": "MIT", + "node_modules/@mui/icons-material": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.2.tgz", + "integrity": "sha512-7NNcjW5JoT9jHagrVbARA1o41vQY2xezDamtke+mEKKZmsJyejfRBOacSrPDfjZQ//lyhIjNKyzAwisxYJR47w==", "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/base": "5.0.0-beta.40", - "@mui/core-downloads-tracker": "^5.16.0", - "@mui/system": "^5.16.0", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.16.0", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", + "@babel/runtime": "^7.25.6" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^6.1.2", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.2.tgz", + "integrity": "sha512-5TtHeAVX9D5d2LYfB1GAUn29BcVETVsrQ76Dwb2SpAfQGW3JVy4deJCAd0RrIkI3eEUrsl0E4xuBdreszxdTTg==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/core-downloads-tracker": "^6.1.2", + "@mui/system": "^6.1.2", + "@mui/types": "^7.2.17", + "@mui/utils": "^6.1.2", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.11", + "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", - "react-is": "^18.2.0", + "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -1678,9 +1708,10 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material-pigment-css": "^6.1.2", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -1689,31 +1720,91 @@ "@emotion/styled": { "optional": true }, + "@mui/material-pigment-css": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/utils": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.2.tgz", + "integrity": "sha512-6+B1YZ8cCBWD1fc3RjqpclF9UA0MLUiuXhyCO+XowD/Z2ku5IlxeEhHHlgglyBWFGMu4kib4YU3CDsG5/zVjJQ==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/types": "^7.2.17", + "@types/prop-types": "^15.7.13", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { "@types/react": { "optional": true } } }, "node_modules/@mui/private-theming": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.0.tgz", - "integrity": "sha512-sYpubkO1MZOnxNyVOClrPNOTs0MfuRVVnAvCeMaOaXt6GimgQbnUcshYv2pSr6PFj+Mqzdff/FYOBceK8u5QgA==", - "license": "MIT", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.2.tgz", + "integrity": "sha512-S8WcjZdNdi++8UhrrY8Lton5h/suRiQexvdTfdcPAlbajlvgM+kx+uJstuVIEyTb3gMkxzIZep87knZ0tqcR0g==", "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.16.0", + "@babel/runtime": "^7.25.6", + "@mui/utils": "^6.1.2", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/private-theming/node_modules/@mui/utils": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.2.tgz", + "integrity": "sha512-6+B1YZ8cCBWD1fc3RjqpclF9UA0MLUiuXhyCO+XowD/Z2ku5IlxeEhHHlgglyBWFGMu4kib4YU3CDsG5/zVjJQ==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/types": "^7.2.17", + "@types/prop-types": "^15.7.13", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -1754,22 +1845,21 @@ } }, "node_modules/@mui/system": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.0.tgz", - "integrity": "sha512-9YbkC2m3+pNumAvubYv+ijLtog6puJ0fJ6rYfzfLCM47pWrw3m+30nXNM8zMgDaKL6vpfWJcCXm+LPaWBpy7sw==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.16.0", - "@mui/styled-engine": "^5.15.14", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.16.0", - "clsx": "^2.1.0", + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.2.tgz", + "integrity": "sha512-mzW7F1ZMIYS1aLON48Nrk9c65OrVEVQ+R4lUcTWs1lCSul0VGK23eo4dmY0NX5PS7Oe4xz3P5B9tQZZ7SYgxcg==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/private-theming": "^6.1.2", + "@mui/styled-engine": "^6.1.2", + "@mui/types": "^7.2.17", + "@mui/utils": "^6.1.2", + "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -1778,8 +1868,8 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -1793,13 +1883,73 @@ } } }, + "node_modules/@mui/system/node_modules/@mui/styled-engine": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.2.tgz", + "integrity": "sha512-uKOfWkR23X39xj7th2nyTcCHqInTAXtUnqD3T5qRVdJcOPvu1rlgTleTwJC/FJvWZJBU6ieuTWDhbcx5SNViHQ==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@emotion/cache": "^11.13.1", + "@emotion/sheet": "^1.4.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/system/node_modules/@mui/utils": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.2.tgz", + "integrity": "sha512-6+B1YZ8cCBWD1fc3RjqpclF9UA0MLUiuXhyCO+XowD/Z2ku5IlxeEhHHlgglyBWFGMu4kib4YU3CDsG5/zVjJQ==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/types": "^7.2.17", + "@types/prop-types": "^15.7.13", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/types": { - "version": "7.2.14", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", - "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", - "license": "MIT", + "version": "7.2.17", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.17.tgz", + "integrity": "sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==", "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -2206,10 +2356,9 @@ "license": "MIT" }, "node_modules/@types/prop-types": { - "version": "15.7.12", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "license": "MIT" + "version": "15.7.13", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==" }, "node_modules/@types/react": { "version": "18.3.3", @@ -2242,10 +2391,9 @@ } }, "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==", - "license": "MIT", + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", + "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", "dependencies": { "@types/react": "*" } diff --git a/package.json b/package.json index 29f3644..eb20c60 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@mui/base": "^5.0.0-beta.40", - "@mui/material": "^5.4.0", + "@mui/icons-material": "^6.1.2", + "@mui/material": "^6.1.2", "@mui/styled-engine": "^5.4.0", "commitlint": "^19.5.0", "react": "^18.3.1", diff --git a/src/App.tsx b/src/App.tsx index ec2b9fa..f00afdf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,13 @@ import React from 'react'; +import { ProfileView } from './profileView/profileView'; + const App = () => { - return

Univent Planner

; + return ( + <> + + + ); }; export default App; diff --git a/src/calendarView/calendarView.tsx b/src/calendarView/calendarView.tsx deleted file mode 100644 index 764d953..0000000 --- a/src/calendarView/calendarView.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Wrapper, AddButton, Calendar } from './calendarViewStyles'; - -export const CalendarView = () => { - return ( - - {/* temporary calendar component */} - calendar - - + Dodaj wydarzenie dla siebie - + Dodaj wydarzenie dla grupy - - ); -}; diff --git a/src/calendarView/calendarViewStyles.ts b/src/calendarView/calendarViewStyles.ts deleted file mode 100644 index 6e78b99..0000000 --- a/src/calendarView/calendarViewStyles.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { styled } from '@mui/material'; -import { Box, Button } from '@mui/material'; - -export const Wrapper = styled(Box)` - display: flex; - flex-direction: column; - height: 100vh; - padding: 32px; - box-sizing: border-box; - position: relative; - @media (max-width: 600px) { - padding: 16px; - } -`; - -export const Calendar = styled(Box)` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - flex: 1; - width: 100%; - padding: 16px; - border-style: solid; - border-color: black; - margin-bottom: 15px; - @media (max-width: 600px) { - padding: 8px; - margin-bottom: 10px; - } -`; - -export const AddButton = styled(Button)` - background-color: #f13d42; - color: white; - &:hover { - background-color: #f13d42; - } - margin: 10px 0 15px; - padding: 16px 0; - font-size: 18px; - border-radius: 8px; - width: 100%; - @media (max-width: 600px) { - margin: 5px 0 10px; - padding: 12px 0; - font-size: 16px; - } -`; diff --git a/src/profileView/profileView.tsx b/src/profileView/profileView.tsx new file mode 100644 index 0000000..39c9503 --- /dev/null +++ b/src/profileView/profileView.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; + +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import EditIcon from '@mui/icons-material/Edit'; +import Avatar from '@mui/material/Avatar'; +import List from '@mui/material/List'; +import ListItemAvatar from '@mui/material/ListItemAvatar'; +import ListItemText from '@mui/material/ListItemText'; + +import { + Wrapper, + ChangePasswordButton, + BackButton, + BackButtonWrapper, + EditButton, + EditButtonWrapper, + AvatarWrapper, + Item, +} from './profileViewStyles'; + +export const ProfileView = () => { + function generate(element: React.ReactElement) { + return [0, 1, 2, 3, 4].map((value) => + React.cloneElement(element, { + key: value, + }), + ); + } + + return ( + + + + + + + + + + + + + + + +

Nazwa uzytkownika

+ + + + Zmień hasło + + +

Grupy w których jesteś starostą:

+ + {generate( + + + + + + , + )} + + +

Grupy do których nalezysz:

+ + {generate( + + + + + + , + )} + + + ); +}; diff --git a/src/profileView/profileViewStyles.ts b/src/profileView/profileViewStyles.ts new file mode 100644 index 0000000..0d34502 --- /dev/null +++ b/src/profileView/profileViewStyles.ts @@ -0,0 +1,86 @@ +import { styled } from '@mui/material'; +import { Box, Button, IconButton, ListItem } from '@mui/material'; + +export const Wrapper = styled(Box)` + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + padding: 32px; + box-sizing: border-box; + position: relative; + @media (max-width: 600px) { + padding: 16px; + } +`; + +export const BackButton = styled(IconButton)`\ + // position: absolute; + border-radius: 9999px; + border: 2px solid #bbbbbb; + @media { + color: black; + } +`; + +export const BackButtonWrapper = styled(Box)` + display: flex; + margin-right: auto; + justify-content: flex-start; + background-color: #; +`; + +export const EditButton = styled(IconButton)`\ + // position: absolute; + border-radius: 9999px; + border: 2px solid #bbbbbb; + background-color: white; + @media { + color: black; + } +`; + +export const EditButtonWrapper = styled(Box)` + display: flex; + position: absolute; + right: 2rem; + top: 6rem; + margin-right: auto; + justify-content: flex-start; + background-color: #; +`; + +export const AvatarWrapper = styled(Box)` + display: flex; + position: relative; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #; + margin: 0.5rem; +`; + +export const ChangePasswordButton = styled(Button)` + background-color: #f13d42; + color: white; + &:hover { + background-color: #f13d42; + } + margin: 10px 0 15px; + padding: 16px 0; + font-size: 18px; + border-radius: 8px; + width: 90%; + @media (max-width: 600px) { + margin: 5px 0 10px; + padding: 12px 0; + font-size: 16px; + } +`; + +export const Item = styled(ListItem)` + position absolute; + background-color: #ffcccc; + border-radius: 12px; + margin-bottom: 8px; +`;