correction erreur et découpage en composant
This commit is contained in:
Antoine Ordonneau
Generated
+23
-13
@@ -27,6 +27,7 @@
|
|||||||
"@vitejs/plugin-react": "^5.0.4",
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
"@vitest/browser-playwright": "^4.0.8",
|
"@vitest/browser-playwright": "^4.0.8",
|
||||||
"@vitest/coverage-v8": "^4.0.8",
|
"@vitest/coverage-v8": "^4.0.8",
|
||||||
|
"baseline-browser-mapping": "^2.9.8",
|
||||||
"eslint": "^9.36.0",
|
"eslint": "^9.36.0",
|
||||||
"eslint-plugin-react-hooks": "^5.2.0",
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.22",
|
"eslint-plugin-react-refresh": "^0.4.22",
|
||||||
@@ -77,6 +78,7 @@
|
|||||||
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
|
"integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/code-frame": "^7.27.1",
|
"@babel/code-frame": "^7.27.1",
|
||||||
"@babel/generator": "^7.28.3",
|
"@babel/generator": "^7.28.3",
|
||||||
@@ -286,7 +288,6 @@
|
|||||||
"integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
|
"integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=6.9.0"
|
"node": ">=6.9.0"
|
||||||
}
|
}
|
||||||
@@ -1833,8 +1834,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
|
||||||
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
|
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/@types/babel__core": {
|
"node_modules/@types/babel__core": {
|
||||||
"version": "7.20.5",
|
"version": "7.20.5",
|
||||||
@@ -1933,6 +1933,7 @@
|
|||||||
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
@@ -2162,6 +2163,7 @@
|
|||||||
"integrity": "sha512-irO+aGxYx/rAhjEBLsGPO4JQ8dA+A43enIST0j4xQ2kYHatHi9tUcxkRRGpClGuUVU42mi+iQsFFzd4xxpoV3g==",
|
"integrity": "sha512-irO+aGxYx/rAhjEBLsGPO4JQ8dA+A43enIST0j4xQ2kYHatHi9tUcxkRRGpClGuUVU42mi+iQsFFzd4xxpoV3g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/mocker": "4.0.10",
|
"@vitest/mocker": "4.0.10",
|
||||||
"@vitest/utils": "4.0.10",
|
"@vitest/utils": "4.0.10",
|
||||||
@@ -2185,6 +2187,7 @@
|
|||||||
"integrity": "sha512-pm7Hl7BNyluox+uGJPnT7vCRDSI+ibHcWQRtnCACAZWxD6/b2gN+8pO0qTDPHpxDSTPKDS5sT2dKTHLcr+lsng==",
|
"integrity": "sha512-pm7Hl7BNyluox+uGJPnT7vCRDSI+ibHcWQRtnCACAZWxD6/b2gN+8pO0qTDPHpxDSTPKDS5sT2dKTHLcr+lsng==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/browser": "4.0.10",
|
"@vitest/browser": "4.0.10",
|
||||||
"@vitest/mocker": "4.0.10",
|
"@vitest/mocker": "4.0.10",
|
||||||
@@ -2359,6 +2362,7 @@
|
|||||||
"integrity": "sha512-EXU2iSkKvNwtlL8L8doCpkyclw0mc/t4t9SeOnfOFPyqLmQwuceMPA4zJBa6jw0MKsZYbw7kAn+gl7HxrlB8UQ==",
|
"integrity": "sha512-EXU2iSkKvNwtlL8L8doCpkyclw0mc/t4t9SeOnfOFPyqLmQwuceMPA4zJBa6jw0MKsZYbw7kAn+gl7HxrlB8UQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/utils": "4.0.10",
|
"@vitest/utils": "4.0.10",
|
||||||
"pathe": "^2.0.3"
|
"pathe": "^2.0.3"
|
||||||
@@ -2412,6 +2416,7 @@
|
|||||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"acorn": "bin/acorn"
|
"acorn": "bin/acorn"
|
||||||
},
|
},
|
||||||
@@ -2559,9 +2564,9 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/baseline-browser-mapping": {
|
"node_modules/baseline-browser-mapping": {
|
||||||
"version": "2.8.16",
|
"version": "2.9.8",
|
||||||
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.16.tgz",
|
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.8.tgz",
|
||||||
"integrity": "sha512-OMu3BGQ4E7P1ErFsIPpbJh0qvDudM/UuJeHgkAvfWe+0HFJCXh+t/l8L6fVLR55RI/UbKrVLnAXZSVwd9ysWYw==",
|
"integrity": "sha512-Y1fOuNDowLfgKOypdc9SPABfoWXuZHBOyCS4cD52IeZBhr4Md6CLLs6atcxVrzRmQ06E7hSlm5bHHApPKR/byA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"bin": {
|
"bin": {
|
||||||
@@ -2612,6 +2617,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"baseline-browser-mapping": "^2.8.9",
|
"baseline-browser-mapping": "^2.8.9",
|
||||||
"caniuse-lite": "^1.0.30001746",
|
"caniuse-lite": "^1.0.30001746",
|
||||||
@@ -2696,6 +2702,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
||||||
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@kurkle/color": "^0.3.0"
|
"@kurkle/color": "^0.3.0"
|
||||||
},
|
},
|
||||||
@@ -2872,8 +2879,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
|
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
|
||||||
"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
|
"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/eastasianwidth": {
|
"node_modules/eastasianwidth": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
@@ -2920,6 +2926,7 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"esbuild": "bin/esbuild"
|
"esbuild": "bin/esbuild"
|
||||||
},
|
},
|
||||||
@@ -2984,6 +2991,7 @@
|
|||||||
"integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
|
"integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint-community/eslint-utils": "^4.8.0",
|
"@eslint-community/eslint-utils": "^4.8.0",
|
||||||
"@eslint-community/regexpp": "^4.12.1",
|
"@eslint-community/regexpp": "^4.12.1",
|
||||||
@@ -3873,7 +3881,6 @@
|
|||||||
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
|
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"lz-string": "bin/bin.js"
|
"lz-string": "bin/bin.js"
|
||||||
}
|
}
|
||||||
@@ -4342,7 +4349,6 @@
|
|||||||
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
|
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ansi-regex": "^5.0.1",
|
"ansi-regex": "^5.0.1",
|
||||||
"ansi-styles": "^5.0.0",
|
"ansi-styles": "^5.0.0",
|
||||||
@@ -4358,7 +4364,6 @@
|
|||||||
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
|
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
},
|
},
|
||||||
@@ -4371,8 +4376,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/prompts": {
|
"node_modules/prompts": {
|
||||||
"version": "2.4.2",
|
"version": "2.4.2",
|
||||||
@@ -4436,6 +4440,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -4487,6 +4492,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"scheduler": "^0.27.0"
|
"scheduler": "^0.27.0"
|
||||||
},
|
},
|
||||||
@@ -4641,6 +4647,7 @@
|
|||||||
"integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
|
"integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/estree": "1.0.8"
|
"@types/estree": "1.0.8"
|
||||||
},
|
},
|
||||||
@@ -4828,6 +4835,7 @@
|
|||||||
"integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==",
|
"integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/global": "^5.0.0",
|
"@storybook/global": "^5.0.0",
|
||||||
"@storybook/icons": "^1.6.0",
|
"@storybook/icons": "^1.6.0",
|
||||||
@@ -5306,6 +5314,7 @@
|
|||||||
"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
|
"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.25.0",
|
"esbuild": "^0.25.0",
|
||||||
"fdir": "^6.5.0",
|
"fdir": "^6.5.0",
|
||||||
@@ -5381,6 +5390,7 @@
|
|||||||
"integrity": "sha512-2Fqty3MM9CDwOVet/jaQalYlbcjATZwPYGcqpiYQqgQ/dLC7GuHdISKgTYIVF/kaishKxLzleKWWfbSDklyIKg==",
|
"integrity": "sha512-2Fqty3MM9CDwOVet/jaQalYlbcjATZwPYGcqpiYQqgQ/dLC7GuHdISKgTYIVF/kaishKxLzleKWWfbSDklyIKg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/expect": "4.0.10",
|
"@vitest/expect": "4.0.10",
|
||||||
"@vitest/mocker": "4.0.10",
|
"@vitest/mocker": "4.0.10",
|
||||||
|
|||||||
@@ -32,6 +32,7 @@
|
|||||||
"@vitejs/plugin-react": "^5.0.4",
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
"@vitest/browser-playwright": "^4.0.8",
|
"@vitest/browser-playwright": "^4.0.8",
|
||||||
"@vitest/coverage-v8": "^4.0.8",
|
"@vitest/coverage-v8": "^4.0.8",
|
||||||
|
"baseline-browser-mapping": "^2.9.8",
|
||||||
"eslint": "^9.36.0",
|
"eslint": "^9.36.0",
|
||||||
"eslint-plugin-react-hooks": "^5.2.0",
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.22",
|
"eslint-plugin-react-refresh": "^0.4.22",
|
||||||
|
|||||||
Generated
+34
@@ -23,6 +23,9 @@ importers:
|
|||||||
react-router:
|
react-router:
|
||||||
specifier: ^7.9.4
|
specifier: ^7.9.4
|
||||||
version: 7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
version: 7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
react-router-dom:
|
||||||
|
specifier: ^7.10.1
|
||||||
|
version: 7.10.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@chromatic-com/storybook':
|
'@chromatic-com/storybook':
|
||||||
specifier: ^4.1.2
|
specifier: ^4.1.2
|
||||||
@@ -1553,6 +1556,23 @@ packages:
|
|||||||
resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
|
resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
||||||
|
react-router-dom@7.10.1:
|
||||||
|
resolution: {integrity: sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==}
|
||||||
|
engines: {node: '>=20.0.0'}
|
||||||
|
peerDependencies:
|
||||||
|
react: '>=18'
|
||||||
|
react-dom: '>=18'
|
||||||
|
|
||||||
|
react-router@7.10.1:
|
||||||
|
resolution: {integrity: sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==}
|
||||||
|
engines: {node: '>=20.0.0'}
|
||||||
|
peerDependencies:
|
||||||
|
react: '>=18'
|
||||||
|
react-dom: '>=18'
|
||||||
|
peerDependenciesMeta:
|
||||||
|
react-dom:
|
||||||
|
optional: true
|
||||||
|
|
||||||
react-router@7.9.4:
|
react-router@7.9.4:
|
||||||
resolution: {integrity: sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==}
|
resolution: {integrity: sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==}
|
||||||
engines: {node: '>=20.0.0'}
|
engines: {node: '>=20.0.0'}
|
||||||
@@ -3315,6 +3335,20 @@ snapshots:
|
|||||||
|
|
||||||
react-refresh@0.17.0: {}
|
react-refresh@0.17.0: {}
|
||||||
|
|
||||||
|
react-router-dom@7.10.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
|
||||||
|
dependencies:
|
||||||
|
react: 19.2.0
|
||||||
|
react-dom: 19.2.0(react@19.2.0)
|
||||||
|
react-router: 7.10.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
|
||||||
|
|
||||||
|
react-router@7.10.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
|
||||||
|
dependencies:
|
||||||
|
cookie: 1.0.2
|
||||||
|
react: 19.2.0
|
||||||
|
set-cookie-parser: 2.7.1
|
||||||
|
optionalDependencies:
|
||||||
|
react-dom: 19.2.0(react@19.2.0)
|
||||||
|
|
||||||
react-router@7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
|
react-router@7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
|
||||||
dependencies:
|
dependencies:
|
||||||
cookie: 1.0.2
|
cookie: 1.0.2
|
||||||
|
|||||||
@@ -0,0 +1,146 @@
|
|||||||
|
import {useState} from "react";
|
||||||
|
import styles from "./calendar.module.css";
|
||||||
|
import formatDateLetter from "../../utils/date/formatDateLetter.js";
|
||||||
|
|
||||||
|
function Calendar() {
|
||||||
|
const events = {
|
||||||
|
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
|
||||||
|
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
|
||||||
|
"2025-11-14": ["Sortie cinéma"],
|
||||||
|
"2025-11-15": ["Sortie cinéma"],
|
||||||
|
"2025-11-17": ["Sortie cinéma"],
|
||||||
|
};
|
||||||
|
const monthNames = [
|
||||||
|
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||||
|
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||||
|
];
|
||||||
|
|
||||||
|
const today = new Date();
|
||||||
|
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
|
||||||
|
const [currentYear, setCurrentYear] = useState(today.getFullYear());
|
||||||
|
const [selectedDay, setSelectedDay] = useState(() => {
|
||||||
|
const year = today.getFullYear();
|
||||||
|
const month = String(today.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(today.getDate()).padStart(2, "0");
|
||||||
|
const key = `${year}-${month}-${day}`;
|
||||||
|
return {date: key, events: events[key] || []};
|
||||||
|
});
|
||||||
|
|
||||||
|
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
|
||||||
|
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
|
||||||
|
const startDay = (firstDay + 6) % 7;
|
||||||
|
|
||||||
|
const days = [];
|
||||||
|
for (let i = 0; i < startDay; i++) days.push(null);
|
||||||
|
for (let i = 1; i <= daysInMonth; i++) days.push(i);
|
||||||
|
|
||||||
|
const handlePrevMonth = () => {
|
||||||
|
let newMonth = currentMonth - 1;
|
||||||
|
let newYear = currentYear;
|
||||||
|
|
||||||
|
if (newMonth < 0) {
|
||||||
|
newMonth = 11;
|
||||||
|
newYear--;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCurrentMonth(newMonth);
|
||||||
|
setCurrentYear(newYear);
|
||||||
|
|
||||||
|
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
|
||||||
|
setSelectedDay({date: key, events: events[key] || []});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNextMonth = () => {
|
||||||
|
let newMonth = currentMonth + 1;
|
||||||
|
let newYear = currentYear;
|
||||||
|
|
||||||
|
if (newMonth > 11) {
|
||||||
|
newMonth = 0;
|
||||||
|
newYear++;
|
||||||
|
}
|
||||||
|
|
||||||
|
setCurrentMonth(newMonth);
|
||||||
|
setCurrentYear(newYear);
|
||||||
|
|
||||||
|
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
|
||||||
|
setSelectedDay({date: key, events: events[key] || []});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDayClick = (day) => {
|
||||||
|
if (!day) return;
|
||||||
|
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
||||||
|
setSelectedDay({date: key, events: events[key] || []});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.glassCard}>
|
||||||
|
<div className={styles.calendarContainer}>
|
||||||
|
<div className={styles.calendarHeader}>
|
||||||
|
<button onClick={handlePrevMonth}>◀</button>
|
||||||
|
<p>{monthNames[currentMonth]} {currentYear}</p>
|
||||||
|
<button onClick={handleNextMonth}>▶</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table className={styles.calendar}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Lun</th>
|
||||||
|
<th>Mar</th>
|
||||||
|
<th>Mer</th>
|
||||||
|
<th>Jeu</th>
|
||||||
|
<th>Ven</th>
|
||||||
|
<th>Sam</th>
|
||||||
|
<th>Dim</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => (
|
||||||
|
<tr key={weekIndex}>
|
||||||
|
{days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
|
||||||
|
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
||||||
|
const hasEvent = events[key];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
key={index}
|
||||||
|
className={[
|
||||||
|
day === today.getDate() &&
|
||||||
|
currentMonth === today.getMonth() &&
|
||||||
|
currentYear === today.getFullYear()
|
||||||
|
? styles.today : "",
|
||||||
|
hasEvent ? styles.hasEvent : "",
|
||||||
|
selectedDay?.date === key ? styles.selected : ""
|
||||||
|
].join(" ")}
|
||||||
|
onClick={() => handleDayClick(day)}
|
||||||
|
>
|
||||||
|
{day || ""}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{selectedDay && (
|
||||||
|
<div className={styles.eventBox}>
|
||||||
|
<h3>Événements du {formatDateLetter(selectedDay.date)}</h3>
|
||||||
|
|
||||||
|
{selectedDay.events.length > 0 ? (
|
||||||
|
<ul>
|
||||||
|
{selectedDay.events.map((ev, i) => (
|
||||||
|
<li key={i}>{ev}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<p>Aucun événement ce jour-là.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Calendar;
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
.calendarContainer {
|
||||||
|
padding: 20px;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendarHeader {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendarHeader p {
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendarHeader button {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow:
|
||||||
|
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
||||||
|
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
font-size: 15px;
|
||||||
|
color: #019AFF;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar th, .calendar td {
|
||||||
|
border: none;
|
||||||
|
padding: 10px;
|
||||||
|
width: 14.2%;
|
||||||
|
line-height: 130%;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.today {
|
||||||
|
color: #007bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hasEvent {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hasEvent::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 10px;
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #007bff;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hasEvent.selected::before {
|
||||||
|
width: 25px;
|
||||||
|
height: 2px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
position: relative;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 38%;
|
||||||
|
pointer-events: none;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow:
|
||||||
|
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
||||||
|
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventBox {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-top: 16px;
|
||||||
|
border: none;
|
||||||
|
background: rgb(255, 255, 255, 0.25);
|
||||||
|
box-shadow:
|
||||||
|
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
||||||
|
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventBox ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventGroup{
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-top: 16px;
|
||||||
|
border: none;
|
||||||
|
background: rgb(255, 255, 255, 0.25);
|
||||||
|
box-shadow:
|
||||||
|
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
||||||
|
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
||||||
|
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glassCard {
|
||||||
|
width: 45%;
|
||||||
|
max-height: 475px;
|
||||||
|
margin: 16px 0px 16px 0px;
|
||||||
|
padding: 10px 20px 10px 20px;
|
||||||
|
height: fit-content;
|
||||||
|
background: rgba(255, 255, 255, 0.65);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
-webkit-backdrop-filter: blur(3px);
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||||
|
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
|
||||||
|
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.glassCard::-webkit-scrollbar{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.glassCard {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import {useMemo} from "react";
|
||||||
|
import styles from "./eventList.module.css";
|
||||||
|
import formatDateLetter from "../../utils/date/formatDateLetter.js";
|
||||||
|
function eventList() {
|
||||||
|
const events = {
|
||||||
|
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
|
||||||
|
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
|
||||||
|
"2025-11-14": ["Sortie cinéma"],
|
||||||
|
"2025-11-15": ["Sortie cinéma"],
|
||||||
|
"2025-11-17": ["Sortie cinéma"],
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortedEvents = useMemo(() => {
|
||||||
|
return Object.entries(events)
|
||||||
|
.map(([dateKey, eventList]) => ({date: dateKey, events: eventList}))
|
||||||
|
.sort((a, b) => new Date(a.date) - new Date(b.date));
|
||||||
|
}, [events]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.glassCard}>
|
||||||
|
<div className={styles.eventListContainer}>
|
||||||
|
<h2>Liste des événements à venir</h2>
|
||||||
|
{sortedEvents.length > 0 ? (
|
||||||
|
<ul className={styles.eventList}>
|
||||||
|
{sortedEvents.map((eventGroup) => (
|
||||||
|
<li key={eventGroup.date} className={styles.eventGroup}>
|
||||||
|
<div className={styles.eventDate}>
|
||||||
|
<strong>{formatDateLetter(eventGroup.date)}</strong>
|
||||||
|
</div>
|
||||||
|
<ul className={styles.eventDetails}>
|
||||||
|
{eventGroup.events.map((event, i) => (
|
||||||
|
<li key={i}>- {event}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<p>Aucun événement planifié pour l'instant.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default eventList;
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
.glassCard {
|
||||||
|
width: 45%;
|
||||||
|
max-height: 475px;
|
||||||
|
margin: 16px 0px 16px 0px;
|
||||||
|
padding: 10px 20px 10px 20px;
|
||||||
|
height: fit-content;
|
||||||
|
background: rgba(255, 255, 255, 0.65);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
-webkit-backdrop-filter: blur(3px);
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||||
|
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
|
||||||
|
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.glassCard::-webkit-scrollbar{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.allContent{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 76px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventList {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventDetails {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dateSelected{
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventListContainer{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.glassCard {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
+1
-1
@@ -12,7 +12,7 @@ function Layout(){
|
|||||||
const { user, loading } = useContext(AuthContext);
|
const { user, loading } = useContext(AuthContext);
|
||||||
|
|
||||||
if (loading) return <p>Loading</p>;
|
if (loading) return <p>Loading</p>;
|
||||||
if (!user) return <Navigate to="/login" />;
|
//if (!user) return <Navigate to="/login" />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
+4
-170
@@ -1,179 +1,13 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useMemo } from "react";
|
|
||||||
import styles from "./HomePage.module.css";
|
import styles from "./HomePage.module.css";
|
||||||
|
import Calendar from "../../components/homePage/calendar.jsx";
|
||||||
|
import EventList from "../../components/homePage/eventList.jsx";
|
||||||
|
|
||||||
function HomePage() {
|
function HomePage() {
|
||||||
const events = {
|
|
||||||
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
|
|
||||||
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
|
|
||||||
"2025-11-14": ["Sortie cinéma"],
|
|
||||||
};
|
|
||||||
|
|
||||||
const monthNames = [
|
|
||||||
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
|
||||||
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
|
||||||
];
|
|
||||||
|
|
||||||
const today = new Date();
|
|
||||||
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
|
|
||||||
const [currentYear, setCurrentYear] = useState(today.getFullYear());
|
|
||||||
const [selectedDay, setSelectedDay] = useState(() => {
|
|
||||||
const year = today.getFullYear();
|
|
||||||
const month = String(today.getMonth() + 1).padStart(2, "0");
|
|
||||||
const day = String(today.getDate()).padStart(2, "0");
|
|
||||||
const key = `${year}-${month}-${day}`;
|
|
||||||
return { date: key, events: events[key] || [] };
|
|
||||||
});
|
|
||||||
|
|
||||||
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
|
|
||||||
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
|
|
||||||
const startDay = (firstDay + 6) % 7;
|
|
||||||
|
|
||||||
const days = [];
|
|
||||||
for (let i = 0; i < startDay; i++) days.push(null);
|
|
||||||
for (let i = 1; i <= daysInMonth; i++) days.push(i);
|
|
||||||
|
|
||||||
const handlePrevMonth = () => {
|
|
||||||
let newMonth = currentMonth - 1;
|
|
||||||
let newYear = currentYear;
|
|
||||||
|
|
||||||
if (newMonth < 0) {
|
|
||||||
newMonth = 11;
|
|
||||||
newYear--;
|
|
||||||
}
|
|
||||||
|
|
||||||
setCurrentMonth(newMonth);
|
|
||||||
setCurrentYear(newYear);
|
|
||||||
|
|
||||||
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
|
|
||||||
setSelectedDay({ date: key, events: events[key] || [] });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNextMonth = () => {
|
|
||||||
let newMonth = currentMonth + 1;
|
|
||||||
let newYear = currentYear;
|
|
||||||
|
|
||||||
if (newMonth > 11) {
|
|
||||||
newMonth = 0;
|
|
||||||
newYear++;
|
|
||||||
}
|
|
||||||
|
|
||||||
setCurrentMonth(newMonth);
|
|
||||||
setCurrentYear(newYear);
|
|
||||||
|
|
||||||
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
|
|
||||||
setSelectedDay({ date: key, events: events[key] || [] });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDayClick = (day) => {
|
|
||||||
if (!day) return;
|
|
||||||
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
|
||||||
setSelectedDay({ date: key, events: events[key] || [] });
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortedEvents = useMemo(() => {
|
|
||||||
return Object.entries(events)
|
|
||||||
.map(([dateKey, eventList]) => ({ date: dateKey, events: eventList }))
|
|
||||||
.sort((a, b) => new Date(a.date) - new Date(b.date));
|
|
||||||
}, [events]);
|
|
||||||
|
|
||||||
const formatDate = (dateString) => {
|
|
||||||
const [year, month, day] = dateString.split('-');
|
|
||||||
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.allContent}>
|
<div className={styles.allContent}>
|
||||||
<div className={styles.glassCard}>
|
<Calendar />
|
||||||
<div className={styles.calendarContainer}>
|
|
||||||
<div className={styles.calendarHeader}>
|
|
||||||
<button onClick={handlePrevMonth}>◀</button>
|
|
||||||
<p>{monthNames[currentMonth]} {currentYear}</p>
|
|
||||||
<button onClick={handleNextMonth}>▶</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table className={styles.calendar}>
|
<EventList />
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Lun</th>
|
|
||||||
<th>Mar</th>
|
|
||||||
<th>Mer</th>
|
|
||||||
<th>Jeu</th>
|
|
||||||
<th>Ven</th>
|
|
||||||
<th>Sam</th>
|
|
||||||
<th>Dim</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
{Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => (
|
|
||||||
<tr key={weekIndex}>
|
|
||||||
{days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
|
|
||||||
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
|
||||||
const hasEvent = events[key];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<td
|
|
||||||
key={index}
|
|
||||||
className={[
|
|
||||||
day === today.getDate() &&
|
|
||||||
currentMonth === today.getMonth() &&
|
|
||||||
currentYear === today.getFullYear()
|
|
||||||
? styles.today : "",
|
|
||||||
hasEvent ? styles.hasEvent : "",
|
|
||||||
selectedDay?.date === key ? styles.selected : ""
|
|
||||||
].join(" ")}
|
|
||||||
onClick={() => handleDayClick(day)}
|
|
||||||
>
|
|
||||||
{day || ""}
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{selectedDay && (
|
|
||||||
<div className={styles.eventBox}>
|
|
||||||
<h3>Événements du {formatDate(selectedDay.date)}</h3>
|
|
||||||
|
|
||||||
{selectedDay.events.length > 0 ? (
|
|
||||||
<ul>
|
|
||||||
{selectedDay.events.map((ev, i) => (
|
|
||||||
<li key={i}>{ev}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
) : (
|
|
||||||
<p>Aucun événement ce jour-là.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.glassCard}>
|
|
||||||
<div className={styles.eventListContainer}>
|
|
||||||
<h2>Liste des Événements à Venir</h2>
|
|
||||||
{sortedEvents.length > 0 ? (
|
|
||||||
<ul className={styles.eventList}>
|
|
||||||
{sortedEvents.map((eventGroup) => (
|
|
||||||
<li key={eventGroup.date} className={styles.eventGroup}>
|
|
||||||
<div className={styles.eventDate}>
|
|
||||||
<strong>{formatDate(eventGroup.date)}</strong>
|
|
||||||
</div>
|
|
||||||
<ul className={styles.eventDetails}>
|
|
||||||
{eventGroup.events.map((event, i) => (
|
|
||||||
<li key={i}>- {event}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
) : (
|
|
||||||
<p>Aucun événement planifié pour l'instant.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,173 +1,7 @@
|
|||||||
.calendarContainer {
|
|
||||||
padding: 20px;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendarHeader {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendarHeader p {
|
|
||||||
width: auto;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendarHeader button {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow:
|
|
||||||
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
|
||||||
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
font-size: 15px;
|
|
||||||
color: #019AFF;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar th, .calendar td {
|
|
||||||
border: none;
|
|
||||||
padding: 10px;
|
|
||||||
width: 14.2%;
|
|
||||||
line-height: 130%;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.today {
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hasEvent {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hasEvent::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 10px;
|
|
||||||
width: 20px;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #007bff;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hasEvent.selected::before {
|
|
||||||
width: 25px;
|
|
||||||
height: 2px;
|
|
||||||
bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
position: relative;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
border-radius: 38%;
|
|
||||||
pointer-events: none;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow:
|
|
||||||
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
|
||||||
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.eventBox {
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
margin-top: 16px;
|
|
||||||
border: none;
|
|
||||||
background: rgb(255, 255, 255, 0.25);
|
|
||||||
box-shadow:
|
|
||||||
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
|
||||||
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.eventBox ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eventGroup{
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
margin-top: 16px;
|
|
||||||
border: none;
|
|
||||||
background: rgb(255, 255, 255, 0.25);
|
|
||||||
box-shadow:
|
|
||||||
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
|
|
||||||
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
|
|
||||||
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glassCard {
|
|
||||||
width: 45%;
|
|
||||||
margin: 16px;
|
|
||||||
padding: 10px 20px 10px 20px;
|
|
||||||
height: fit-content;
|
|
||||||
background: rgba(255, 255, 255, 0.65);
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
-webkit-backdrop-filter: blur(3px);
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
|
||||||
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
|
|
||||||
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.allContent{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.glassCard {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0px;
|
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.allContent{
|
.allContent{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
export default function formatDateLetter(d) {
|
||||||
|
const monthNames = [
|
||||||
|
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
|
||||||
|
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
|
||||||
|
];
|
||||||
|
const [year, month, day] = d.split('-');
|
||||||
|
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
|
||||||
|
};
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import { expect, test } from 'vitest';
|
||||||
|
import formatDateLetter from './formatDateLetter';
|
||||||
|
|
||||||
|
const date = "2025-11-07"
|
||||||
|
const res = "07 Novembre 2025"
|
||||||
|
|
||||||
|
test("Format Date Letter", () => {
|
||||||
|
expect(formatDateLetter(date)).toBe(res);
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user