Merge branch 'features/profile' into 'dev'

Features/profile

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!18
This commit is contained in:
T'JAMPENS QUENTIN p2406187 committed 2025-11-28 07:59:16 +00:00
commit 706fd54ec5
6 files changed
+362 -86

No files matched your search

+81 -81
View File
@@ -1534,9 +1534,9 @@
"license": "MIT"
},
"node_modules/@storybook/addon-a11y": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-10.0.6.tgz",
"integrity": "sha512-XTrLd2jU9gNEpbiQAnKR1v0WQYGDq6Kob3ecOH/pcJ81nnlPJ+SCJ/mAxicvUJfpAS9S/0TL8raChh6FZ5+psA==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-10.0.7.tgz",
"integrity": "sha512-JsYPpZ/n67/2bI1XJeyrAWHHQkHemPkPHjCA0tAUnMz1Shlo/LV2q1Ahgpxoihx4strbHwZz71bcS4MqkHBduA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1548,20 +1548,20 @@
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^10.0.6"
"storybook": "^10.0.7"
}
},
"node_modules/@storybook/addon-docs": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.0.6.tgz",
"integrity": "sha512-MrMeZyON4V08T59zOFg2Wprw/V+mMiOKsyrCf5Zb5oO9BfUb6+VqbDIETsIHdhQxOZ9H5Oi27eU3akGMgCPDMw==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.0.7.tgz",
"integrity": "sha512-qQQMoeYZC4W+/8ubfOZiTrE8nYC/f4wWP1uq4peRyDy1N2nIN9SwhyxwMn0m3VpeGmRBga5dLvJY9ko6SnJekg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@mdx-js/react": "^3.0.0",
"@storybook/csf-plugin": "10.0.6",
"@storybook/csf-plugin": "10.0.7",
"@storybook/icons": "^1.6.0",
"@storybook/react-dom-shim": "10.0.6",
"@storybook/react-dom-shim": "10.0.7",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"ts-dedent": "^2.0.0"
@@ -1571,13 +1571,13 @@
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^10.0.6"
"storybook": "^10.0.7"
}
},
"node_modules/@storybook/addon-vitest": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-10.0.6.tgz",
"integrity": "sha512-FSPPFhzk3OGILe/Wgn+43/liXGltn77ziZx3KaQ4f57vqcC1VgdGrNKWoS/ZhAkLGW9MXRagsYPRCSNnLbMRrg==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-10.0.7.tgz",
"integrity": "sha512-i6v/mAl+elrUxb+1f4NdnM17t/fg+KGJWL1U9quflXTd3KiLY0xJB4LwNP6yYo7Imc5NIO2fRkJbGvNqLBRe2Q==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1594,7 +1594,7 @@
"@vitest/browser": "^3.0.0 || ^4.0.0",
"@vitest/browser-playwright": "^4.0.0",
"@vitest/runner": "^3.0.0 || ^4.0.0",
"storybook": "^10.0.6",
"storybook": "^10.0.7",
"vitest": "^3.0.0 || ^4.0.0"
},
"peerDependenciesMeta": {
@@ -1613,13 +1613,13 @@
}
},
"node_modules/@storybook/builder-vite": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-10.0.6.tgz",
"integrity": "sha512-WD5BfYezOQC0B4ItY9HJg9zb4MbNjsZcfXipAQi7+i9dYNWegdAhg7Aq6arsRZ2YMMOiSpVEJhzmK08XRx+szA==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-10.0.7.tgz",
"integrity": "sha512-wk2TAoUY5+9t78GWVBndu9rEo9lo6Ec3SRrLT4VpIlcS2GPK+5f26UC2uvIBwOF/N7JrUUKq/zWDZ3m+do9QDg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@storybook/csf-plugin": "10.0.6",
"@storybook/csf-plugin": "10.0.7",
"ts-dedent": "^2.0.0"
},
"funding": {
@@ -1627,14 +1627,14 @@
"url": "https://opencollective.com/storybook"
},
"peerDependencies": {
"storybook": "^10.0.6",
"storybook": "^10.0.7",
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
}
},
"node_modules/@storybook/csf-plugin": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-10.0.6.tgz",
"integrity": "sha512-etPIKPoLAhG8wTRZrmvOiDi70CstkE8Y5fYuYhffThCP8tc2RwHEuwLrsK/6Mf9PAkTmIk/CjYG+Rp2qLqNNtg==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-10.0.7.tgz",
"integrity": "sha512-YaYYlCyJBwxaMk7yREOdz+9MDSgxIYGdeJ9EIq/bUndmkoj9SRo1P9/0lC5dseWQoiGy4T3PbZiWruD8uM5m3g==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1647,7 +1647,7 @@
"peerDependencies": {
"esbuild": "*",
"rollup": "*",
"storybook": "^10.0.6",
"storybook": "^10.0.7",
"vite": "*",
"webpack": "*"
},
@@ -1688,14 +1688,14 @@
}
},
"node_modules/@storybook/react": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@storybook/react/-/react-10.0.6.tgz",
"integrity": "sha512-17SMthmwPDzX6Ex5MNnXhDS8DirGyo2I9g8VV/VtnXFWIl2r/+ZSAHjAM4NG0Tv3qia7l/jQxwL1YKk9qVRZxw==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/@storybook/react/-/react-10.0.7.tgz",
"integrity": "sha512-1GSDIMo2GkdG55DhpIIFaAJv+QzmsRb36qWsKqfbtFjEhnqu5/3zqyys2dCIiHOG1Czba4SGsTS4cay3KDQJgA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@storybook/global": "^5.0.0",
"@storybook/react-dom-shim": "10.0.6"
"@storybook/react-dom-shim": "10.0.7"
},
"funding": {
"type": "opencollective",
@@ -1704,7 +1704,7 @@
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"storybook": "^10.0.6",
"storybook": "^10.0.7",
"typescript": ">= 4.9.x"
},
"peerDependenciesMeta": {
@@ -1714,9 +1714,9 @@
}
},
"node_modules/@storybook/react-dom-shim": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-10.0.6.tgz",
"integrity": "sha512-UdPSWwgo7WQg8vWIxT379pwrC2uFZX9u12Enap8//zVCJNZYHmjTLbV2P+pQ4zD0UFcqcBljptJEbu7FUMYx+A==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-10.0.7.tgz",
"integrity": "sha512-bp4OnMtZGwPJQDqNRi4K5iibLbZ2TZZMkWW7oSw5jjPFpGSreSjCe8LH9yj/lDnK8Ox9bGMCBFE5RV5XuML29w==",
"dev": true,
"license": "MIT",
"funding": {
@@ -1726,20 +1726,20 @@
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"storybook": "^10.0.6"
"storybook": "^10.0.7"
}
},
"node_modules/@storybook/react-vite": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-10.0.6.tgz",
"integrity": "sha512-zDnOk89LDOpN0yhTCYRb8bkm6LdchGMfcCxKLQhEnSmkMmPwXsj/CADUc1Oipqih7D0JR/gxuadx+3y41znmSg==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-10.0.7.tgz",
"integrity": "sha512-EAv2cwYkRctQNcPC1jLsZPm+C6RVk6t6axKrkc/+cFe/t5MnKG7oRf0c/6apWYi/cQv6kzNsFxMV2jj8r/VoBg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@joshwooding/vite-plugin-react-docgen-typescript": "0.6.1",
"@rollup/pluginutils": "^5.0.2",
"@storybook/builder-vite": "10.0.6",
"@storybook/react": "10.0.6",
"@storybook/builder-vite": "10.0.7",
"@storybook/react": "10.0.7",
"empathic": "^2.0.0",
"magic-string": "^0.30.0",
"react-docgen": "^8.0.0",
@@ -1753,7 +1753,7 @@
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"storybook": "^10.0.6",
"storybook": "^10.0.7",
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
}
},
@@ -1946,14 +1946,14 @@
"license": "MIT"
},
"node_modules/@typescript-eslint/project-service": {
"version": "8.46.3",
"resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.3.tgz",
"integrity": "sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ==",
"version": "8.46.4",
"resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.4.tgz",
"integrity": "sha512-nPiRSKuvtTN+no/2N1kt2tUh/HoFzeEgOm9fQ6XQk4/ApGqjx0zFIIaLJ6wooR1HIoozvj2j6vTi/1fgAz7UYQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/tsconfig-utils": "^8.46.3",
"@typescript-eslint/types": "^8.46.3",
"@typescript-eslint/tsconfig-utils": "^8.46.4",
"@typescript-eslint/types": "^8.46.4",
"debug": "^4.3.4"
},
"engines": {
@@ -1968,14 +1968,14 @@
}
},
"node_modules/@typescript-eslint/scope-manager": {
"version": "8.46.3",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.3.tgz",
"integrity": "sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg==",
"version": "8.46.4",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.4.tgz",
"integrity": "sha512-tMDbLGXb1wC+McN1M6QeDx7P7c0UWO5z9CXqp7J8E+xGcJuUuevWKxuG8j41FoweS3+L41SkyKKkia16jpX7CA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/types": "8.46.3",
"@typescript-eslint/visitor-keys": "8.46.3"
"@typescript-eslint/types": "8.46.4",
"@typescript-eslint/visitor-keys": "8.46.4"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1986,9 +1986,9 @@
}
},
"node_modules/@typescript-eslint/tsconfig-utils": {
"version": "8.46.3",
"resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.3.tgz",
"integrity": "sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA==",
"version": "8.46.4",
"resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.4.tgz",
"integrity": "sha512-+/XqaZPIAk6Cjg7NWgSGe27X4zMGqrFqZ8atJsX3CWxH/jACqWnrWI68h7nHQld0y+k9eTTjb9r+KU4twLoo9A==",
"dev": true,
"license": "MIT",
"engines": {
@@ -2003,9 +2003,9 @@
}
},
"node_modules/@typescript-eslint/types": {
"version": "8.46.3",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.3.tgz",
"integrity": "sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA==",
"version": "8.46.4",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.4.tgz",
"integrity": "sha512-USjyxm3gQEePdUwJBFjjGNG18xY9A2grDVGuk7/9AkjIF1L+ZrVnwR5VAU5JXtUnBL/Nwt3H31KlRDaksnM7/w==",
"dev": true,
"license": "MIT",
"engines": {
@@ -2017,16 +2017,16 @@
}
},
"node_modules/@typescript-eslint/typescript-estree": {
"version": "8.46.3",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.3.tgz",
"integrity": "sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA==",
"version": "8.46.4",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.4.tgz",
"integrity": "sha512-7oV2qEOr1d4NWNmpXLR35LvCfOkTNymY9oyW+lUHkmCno7aOmIf/hMaydnJBUTBMRCOGZh8YjkFOc8dadEoNGA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/project-service": "8.46.3",
"@typescript-eslint/tsconfig-utils": "8.46.3",
"@typescript-eslint/types": "8.46.3",
"@typescript-eslint/visitor-keys": "8.46.3",
"@typescript-eslint/project-service": "8.46.4",
"@typescript-eslint/tsconfig-utils": "8.46.4",
"@typescript-eslint/types": "8.46.4",
"@typescript-eslint/visitor-keys": "8.46.4",
"debug": "^4.3.4",
"fast-glob": "^3.3.2",
"is-glob": "^4.0.3",
@@ -2085,16 +2085,16 @@
}
},
"node_modules/@typescript-eslint/utils": {
"version": "8.46.3",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.3.tgz",
"integrity": "sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g==",
"version": "8.46.4",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.46.4.tgz",
"integrity": "sha512-AbSv11fklGXV6T28dp2Me04Uw90R2iJ30g2bgLz529Koehrmkbs1r7paFqr1vPCZi7hHwYxYtxfyQMRC8QaVSg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@eslint-community/eslint-utils": "^4.7.0",
"@typescript-eslint/scope-manager": "8.46.3",
"@typescript-eslint/types": "8.46.3",
"@typescript-eslint/typescript-estree": "8.46.3"
"@typescript-eslint/scope-manager": "8.46.4",
"@typescript-eslint/types": "8.46.4",
"@typescript-eslint/typescript-estree": "8.46.4"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2109,13 +2109,13 @@
}
},
"node_modules/@typescript-eslint/visitor-keys": {
"version": "8.46.3",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.3.tgz",
"integrity": "sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg==",
"version": "8.46.4",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.4.tgz",
"integrity": "sha512-/++5CYLQqsO9HFGLI7APrxBJYo+5OCMpViuhV8q5/Qa3o5mMrF//eQHks+PXcsAVaLdn817fMuS7zqoXNNZGaw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/types": "8.46.3",
"@typescript-eslint/types": "8.46.4",
"eslint-visitor-keys": "^4.2.1"
},
"engines": {
@@ -3042,9 +3042,9 @@
}
},
"node_modules/eslint-plugin-storybook": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-10.0.6.tgz",
"integrity": "sha512-llPShAqO86PgjswUDXwkxq1hGBjM7NiZE+nScbTjM3NVx0XwqbSZ+FRV2p5nv6vrZeREfhhY/KJF2WuSaYkXiQ==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-10.0.7.tgz",
"integrity": "sha512-qOQq9KdT1jsBgT3qsxUH2n67aj1WR8D1XCoER8Q6yuVlS5TimNwk1mZeWkXVf/o4RQQT6flT2y5cG2gPLZPvJA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -3052,7 +3052,7 @@
},
"peerDependencies": {
"eslint": ">=8",
"storybook": "^10.0.6"
"storybook": "^10.0.7"
}
},
"node_modules/eslint-scope": {
@@ -4776,9 +4776,9 @@
"license": "MIT"
},
"node_modules/storybook": {
"version": "10.0.6",
"resolved": "https://registry.npmjs.org/storybook/-/storybook-10.0.6.tgz",
"integrity": "sha512-s3qY17stuSxU9TFdSHWF2VWJiDKrhZsdlM9M9/APBLT+3kbTlfCPuaNONE0UETgz5tiZLIrC9K4RYjJ8c6PHPA==",
"version": "10.0.7",
"resolved": "https://registry.npmjs.org/storybook/-/storybook-10.0.7.tgz",
"integrity": "sha512-7smAu0o+kdm378Q2uIddk32pn0UdIbrtTVU+rXRVtTVTCrK/P2cCui2y4JH+Bl3NgEq1bbBQpCAF/HKrDjk2Qw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -5425,9 +5425,9 @@
}
},
"node_modules/vitest/node_modules/chai": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.0.tgz",
"integrity": "sha512-aUTnJc/JipRzJrNADXVvpVqi6CO0dn3nx4EVPxijri+fj3LUUDyZQOgVeW54Ob3Y1Xh9Iz8f+CgaCl8v0mn9bA==",
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.1.tgz",
"integrity": "sha512-p4Z49OGG5W/WBCPSS/dH3jQ73kD6tiMmUM+bckNK6Jr5JHMG3k9bg/BvKR8lKmtVBKmOiuVaV2ws8s9oSbwysg==",
"dev": true,
"license": "MIT",
"engines": {
+6 -5
View File
@@ -17,16 +17,17 @@
-moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 768px) {
.content{
padding: 0.7rem;
z-index:1;
}
}
.content {
padding: 1.5rem;
z-index: 1;
}
a {
font-weight: 500;
color: #646cff;
+1
View File
@@ -9,6 +9,7 @@
align-items: center;
padding: 20px;
border-radius:12px;
margin-left: 33.3%;
}
+110
View File
@@ -0,0 +1,110 @@
import React, { useState } from "react";
import styles from "./ProfilePage.module.css";
function Event({ title,date, tasks }) {
const [isExpanded, setIsExpanded] = useState(false);
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
return (
<div className={`${styles.event} glassCard`}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div style={{display:'flex', flexDirection:'column'}}>
<h3>{title}</h3>
<p style={{ fontSize: '0.8rem', color: '#666', margin: '0 0 0 0' }}>{date}</p>
</div>
<button
onClick={toggleExpand}
style={{
background: 'none',
border: 'none',
cursor: 'pointer',
fontSize: '1.2rem',
}}
>
{isExpanded ? '▼' : '▶'}
</button>
</div>
<ul
className={`${styles.eventTasks} ${isExpanded ? styles.expanded : ''}`}
>
{tasks.map((task, index) => (
<li key={index}>-- {task}</li>
))}
</ul>
</div>
);
}
function ProfilePage() {
return (
<div className={styles.container}>
<div className={`${styles.profileboard} glassCard`}>
<div className={styles.contentWrapper}>
<div className={styles.profilePictureContainer}>
<img
src="../src/assets/react.svg"
alt="Photo de profil"
className={styles.profilePicture}
/>
</div>
<div className={styles.description}>
<h2>LEBLOND Malo</h2>
<div className={styles.topDescription}>
<div className={styles.infoBlock}>
<p><strong>Role :</strong> Président</p>
<p><strong>Membre depuis :</strong> 2019</p>
</div>
<div className={styles.infoBlock}>
<p><strong>Mail :</strong> mailpro@gmail.com</p>
<p><strong>Téléphone :</strong> 08 67 87 32 21</p>
</div>
<button href="/../UpdateProfile.jsx">M</button>
</div>
<h2>Vos Événements :</h2>
<Event
title="Titre event 1"
date="04/11/2025"
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
/>
<Event
title="Titre event 2"
date="04/11/2025"
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
/>
<Event
title="Titre event 3"
date="04/11/2025"
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
/>
<Event
title="Titre event 4"
date="04/11/2025"
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
/>
<Event
title="Titre event 5"
date="04/11/2025"
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
/>
<Event
title="Titre event 6"
date="04/11/2025"
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
/>
<Event
title="Titre event 7"
date="04/11/2025"
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
/>
</div>
</div>
</div>
</div>
);
}
export default ProfilePage;
+158
View File
@@ -0,0 +1,158 @@
.container {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.profileboard {
width: 100%;
padding: 15px;
border-radius: 10px;
box-sizing: border-box;
}
.contentWrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.profilePictureContainer {
width: 120px;
height: 120px;
margin-bottom: 15px;
}
.profilePicture {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.description {
width: 100%;
text-align: left;
margin-left:4%;
}
.topDescription {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}
.infoBlock {
width: 100%;
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 5px;
}
.event {
width: 100%;
padding: 12px;
margin-bottom: 10px;
border-radius: 8px;
}
.eventTasks {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.2s ease;
opacity: 0;
padding-left: 20px;
}
.eventTasks.expanded {
max-height: 500px;
opacity: 1;
margin-top: 10px;
}
.description h2{
font-size:30px;
margin-bottom: 2%;
}
.profilePicture{
width:90%;
}
/* Tablette (768px et plus) */
@media screen and (min-width: 768px) {
.contentWrapper {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.profilePictureContainer {
width: 150px;
height: 150px;
margin-right: 20px;
margin-bottom: 0;
}
.description {
width: calc(100% - 170px);
margin-left:4%;
}
.topDescription {
flex-direction: row;
justify-content: space-between;
}
.infoBlock {
width: 48%;
}
.event {
padding: 15px;
}
.description h2{
font-size:30px;
margin-bottom: 2%;
}
.profilePicture{
width:90%;
}
}
.description button{
width:50px;
height:50px;
}
/* Desktop (1024px et plus) */
@media screen and (min-width: 1024px) {
.container {
max-width: 100%;
margin: 0 auto;
padding: 20px;
}
.profileboard {
padding: 25px;
}
.profilePictureContainer {
width: 30%;
height:auto;
}
.profilePicture{
width:90%;
}
.description {
width: calc(100% - 200px);
margin-left:4%;
}
.event {
padding: 18px;
}
.description h2{
font-size:30px;
margin-bottom: 2%;
}
}
+6
View File
@@ -2,8 +2,10 @@ import { createBrowserRouter } from "react-router";
import Layout from "./layout.jsx";
import HomePage from "./pages/Home/HomePage";
import LoginPage from "./pages/Login/LoginPage";
import ProfilePage from "./pages/Profile/ProfilePage";
import EventsPage from "./pages/Events/EventsPage.jsx";
const router = createBrowserRouter([
{
path: "/",
@@ -17,6 +19,10 @@ const router = createBrowserRouter([
path: "/login",
Component: LoginPage,
},
{
path:"/profile",
Component:ProfilePage,
},
{
path: "/events",
Component: EventsPage,