From f85af5931e46f6c9dd5b76b2136b3690604aaea7 Mon Sep 17 00:00:00 2001 From: Robbert Broersma Date: Mon, 18 Nov 2024 07:49:20 +0100 Subject: [PATCH] feat: add new Page Layout components and Purmerend theme --- package-lock.json | 426 +++++++++++++++++- package.json | 9 + public/assets/purmerend-logo.svg | 168 +++++++ src/app/[locale]/components/Footer.tsx | 28 +- src/app/[locale]/components/Header.tsx | 32 +- .../[locale]/components/LanguageSwitch.tsx | 17 +- src/app/[locale]/components/Navigation.tsx | 5 +- .../incident/add/components/MapDialog.tsx | 2 +- src/app/[locale]/incident/layout.tsx | 6 +- src/app/[locale]/layout.tsx | 63 +-- src/app/layout.tsx | 2 + src/components/index.ts | 13 +- 12 files changed, 697 insertions(+), 74 deletions(-) create mode 100644 public/assets/purmerend-logo.svg diff --git a/package-lock.json b/package-lock.json index e2735ba4..09814678 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,8 @@ }, "devDependencies": { "@amsterdam/design-system-react": "0.13.1", + "@fontsource/cantarell": "5.1.0", + "@nl-design-system-community/purmerend-design-tokens": "1.0.0", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "16.0.1", @@ -46,11 +48,18 @@ "@types/react": "18", "@types/react-dom": "18", "@types/validator": "13.12.2", + "@utrecht/body-react": "0.0.0", "@utrecht/checkbox-group-react": "1.0.0", "@utrecht/component-library-css": "6.1.0", "@utrecht/component-library-react": "7.2.0", "@utrecht/design-tokens": "2.1.1", + "@utrecht/nav-bar-react": "1.0.0", + "@utrecht/page-body-react": "1.0.0", + "@utrecht/page-footer-react": "1.0.0", + "@utrecht/page-header-react": "1.0.0", + "@utrecht/page-layout-react": "1.0.0", "@utrecht/radio-group-react": "1.0.3", + "@utrecht/root-react": "1.0.0", "@utrecht/select-combobox-react": "1.0.1", "@vitejs/plugin-react": "4.3.3", "autoprefixer": "10.4.20", @@ -67,6 +76,300 @@ "vitest": "2.1.5" } }, + "../../nl-design-system/utrecht-jeffrey/packages/components-react/body-react": { + "name": "@utrecht/body-react", + "version": "0.0.0", + "extraneous": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "devDependencies": { + "@babel/plugin-transform-runtime": "7.24.7", + "@babel/preset-env": "7.24.7", + "@babel/preset-react": "7.24.7", + "@babel/preset-typescript": "7.24.7", + "@rollup/plugin-babel": "6.0.4", + "@rollup/plugin-commonjs": "26.0.1", + "@rollup/plugin-json": "6.1.0", + "@rollup/plugin-node-resolve": "15.2.3", + "@rollup/plugin-typescript": "12.1.0", + "@testing-library/dom": "8.20.1", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/react": "16.0.1", + "@testing-library/user-event": "14.5.1", + "@types/jest": "29.5.13", + "@types/react": "18.3.3", + "@types/testing-library__jest-dom": "5.14.9", + "@utrecht/body-css": "workspace:*", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.3.1", + "rollup": "4.23.0", + "rollup-plugin-filesize": "10.0.0", + "rollup-plugin-node-externals": "7.1.2", + "rollup-plugin-peer-deps-external": "2.2.4", + "rollup-plugin-postcss": "4.0.2", + "typescript": "5.6.2" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "../../nl-design-system/utrecht-jeffrey/packages/components-react/nav-bar-react": { + "name": "@utrecht/nav-bar-react", + "version": "0.0.0", + "extraneous": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "devDependencies": { + "@babel/plugin-transform-runtime": "7.24.7", + "@babel/preset-env": "7.24.7", + "@babel/preset-react": "7.24.7", + "@babel/preset-typescript": "7.24.7", + "@rollup/plugin-babel": "6.0.4", + "@rollup/plugin-commonjs": "26.0.1", + "@rollup/plugin-json": "6.1.0", + "@rollup/plugin-node-resolve": "15.2.3", + "@rollup/plugin-typescript": "12.1.0", + "@testing-library/dom": "8.20.1", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/react": "16.0.1", + "@testing-library/user-event": "14.5.1", + "@types/jest": "29.5.13", + "@types/react": "18.3.3", + "@types/testing-library__jest-dom": "5.14.9", + "@utrecht/nav-bar-css": "workspace:*", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.3.1", + "rollup": "4.23.0", + "rollup-plugin-filesize": "10.0.0", + "rollup-plugin-node-externals": "7.1.2", + "rollup-plugin-peer-deps-external": "2.2.4", + "rollup-plugin-postcss": "4.0.2", + "typescript": "5.6.2" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "../../nl-design-system/utrecht-jeffrey/packages/components-react/page-content-react": { + "name": "@utrecht/page-content-react", + "version": "0.0.0", + "extraneous": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "devDependencies": { + "@babel/plugin-transform-runtime": "7.24.7", + "@babel/preset-env": "7.24.7", + "@babel/preset-react": "7.24.7", + "@babel/preset-typescript": "7.24.7", + "@rollup/plugin-babel": "6.0.4", + "@rollup/plugin-commonjs": "26.0.1", + "@rollup/plugin-json": "6.1.0", + "@rollup/plugin-node-resolve": "15.2.3", + "@rollup/plugin-typescript": "12.1.0", + "@testing-library/dom": "8.20.1", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/react": "16.0.1", + "@testing-library/user-event": "14.5.1", + "@types/jest": "29.5.13", + "@types/react": "18.3.3", + "@types/testing-library__jest-dom": "5.14.9", + "@utrecht/page-content-css": "workspace:*", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.3.1", + "rollup": "4.23.0", + "rollup-plugin-filesize": "10.0.0", + "rollup-plugin-node-externals": "7.1.2", + "rollup-plugin-peer-deps-external": "2.2.4", + "rollup-plugin-postcss": "4.0.2", + "typescript": "5.6.2" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "../../nl-design-system/utrecht-jeffrey/packages/components-react/page-footer-react": { + "name": "@utrecht/page-footer-react", + "version": "0.0.0", + "extraneous": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "devDependencies": { + "@babel/plugin-transform-runtime": "7.24.7", + "@babel/preset-env": "7.24.7", + "@babel/preset-react": "7.24.7", + "@babel/preset-typescript": "7.24.7", + "@rollup/plugin-babel": "6.0.4", + "@rollup/plugin-commonjs": "26.0.1", + "@rollup/plugin-json": "6.1.0", + "@rollup/plugin-node-resolve": "15.2.3", + "@rollup/plugin-typescript": "12.1.0", + "@testing-library/dom": "8.20.1", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/react": "16.0.1", + "@testing-library/user-event": "14.5.1", + "@types/jest": "29.5.13", + "@types/react": "18.3.3", + "@types/testing-library__jest-dom": "5.14.9", + "@utrecht/page-footer-css": "workspace:*", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.3.1", + "rollup": "4.23.0", + "rollup-plugin-filesize": "10.0.0", + "rollup-plugin-node-externals": "7.1.2", + "rollup-plugin-peer-deps-external": "2.2.4", + "rollup-plugin-postcss": "4.0.2", + "typescript": "5.6.2" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "../../nl-design-system/utrecht-jeffrey/packages/components-react/page-header-react": { + "name": "@utrecht/page-header-react", + "version": "0.0.0", + "extraneous": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "devDependencies": { + "@babel/plugin-transform-runtime": "7.24.7", + "@babel/preset-env": "7.24.7", + "@babel/preset-react": "7.24.7", + "@babel/preset-typescript": "7.24.7", + "@rollup/plugin-babel": "6.0.4", + "@rollup/plugin-commonjs": "26.0.1", + "@rollup/plugin-json": "6.1.0", + "@rollup/plugin-node-resolve": "15.2.3", + "@rollup/plugin-typescript": "12.1.0", + "@testing-library/dom": "8.20.1", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/react": "16.0.1", + "@testing-library/user-event": "14.5.1", + "@types/jest": "29.5.13", + "@types/react": "18.3.3", + "@types/testing-library__jest-dom": "5.14.9", + "@utrecht/page-header-css": "workspace:*", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.3.1", + "rollup": "4.23.0", + "rollup-plugin-filesize": "10.0.0", + "rollup-plugin-node-externals": "7.1.2", + "rollup-plugin-peer-deps-external": "2.2.4", + "rollup-plugin-postcss": "4.0.2", + "typescript": "5.6.2" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "../../nl-design-system/utrecht-jeffrey/packages/components-react/page-layout-react": { + "name": "@utrecht/page-layout-react", + "version": "0.0.0", + "extraneous": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "devDependencies": { + "@babel/plugin-transform-runtime": "7.24.7", + "@babel/preset-env": "7.24.7", + "@babel/preset-react": "7.24.7", + "@babel/preset-typescript": "7.24.7", + "@rollup/plugin-babel": "6.0.4", + "@rollup/plugin-commonjs": "26.0.1", + "@rollup/plugin-json": "6.1.0", + "@rollup/plugin-node-resolve": "15.2.3", + "@rollup/plugin-typescript": "12.1.0", + "@testing-library/dom": "8.20.1", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/react": "16.0.1", + "@testing-library/user-event": "14.5.1", + "@types/jest": "29.5.13", + "@types/react": "18.3.3", + "@types/testing-library__jest-dom": "5.14.9", + "@utrecht/page-layout-css": "workspace:*", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.3.1", + "rollup": "4.23.0", + "rollup-plugin-filesize": "10.0.0", + "rollup-plugin-node-externals": "7.1.2", + "rollup-plugin-peer-deps-external": "2.2.4", + "rollup-plugin-postcss": "4.0.2", + "typescript": "5.6.2" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "../../nl-design-system/utrecht-jeffrey/packages/components-react/root-react": { + "name": "@utrecht/root-react", + "version": "0.0.0", + "extraneous": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "devDependencies": { + "@babel/plugin-transform-runtime": "7.24.7", + "@babel/preset-env": "7.24.7", + "@babel/preset-react": "7.24.7", + "@babel/preset-typescript": "7.24.7", + "@rollup/plugin-babel": "6.0.4", + "@rollup/plugin-commonjs": "26.0.1", + "@rollup/plugin-json": "6.1.0", + "@rollup/plugin-node-resolve": "15.2.3", + "@rollup/plugin-typescript": "12.1.0", + "@testing-library/dom": "8.20.1", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/react": "16.0.1", + "@testing-library/user-event": "14.5.1", + "@types/jest": "29.5.13", + "@types/react": "18.3.3", + "@types/testing-library__jest-dom": "5.14.9", + "@utrecht/root-css": "workspace:*", + "jest": "29.7.0", + "jest-environment-jsdom": "29.7.0", + "react": "18.3.1", + "rollup": "4.23.0", + "rollup-plugin-filesize": "10.0.0", + "rollup-plugin-node-externals": "7.1.2", + "rollup-plugin-peer-deps-external": "2.2.4", + "rollup-plugin-postcss": "4.0.2", + "typescript": "5.6.2" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, "node_modules/@adobe/css-tools": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz", @@ -1042,6 +1345,13 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" }, + "node_modules/@fontsource/cantarell": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource/cantarell/-/cantarell-5.1.0.tgz", + "integrity": "sha512-0fMKwDHArqlfvmGwRFGv+xzkh6cP4X9otoXV0OvWUFx5r7IbYlcbH5x/L2N5r8DMwOlYbORuRvmqddRazhxAxg==", + "dev": true, + "license": "OFL-1.1" + }, "node_modules/@formatjs/ecma402-abstract": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.3.tgz", @@ -1440,6 +1750,13 @@ "node": ">= 10" } }, + "node_modules/@nl-design-system-community/purmerend-design-tokens": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@nl-design-system-community/purmerend-design-tokens/-/purmerend-design-tokens-1.0.0.tgz", + "integrity": "sha512-iYw7J4nK2ts6nn7GUGeIpeq1WbGyfEu5ccwGDct/kCmrcaqF+ysSmko/AfhuJdmyPJW8LN7hyKsj34l2knYxZw==", + "dev": true, + "license": "SEE LICENSE IN LICENSE.md" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2916,6 +3233,21 @@ "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==" }, + "node_modules/@utrecht/body-react": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/@utrecht/body-react/-/body-react-0.0.0.tgz", + "integrity": "sha512-S7/QmzSUcM6wuokSpVwobbBGW+t3/zhBhzlRq5lbKsJbd6XBZw9gt55QrJak2jNUcPppaR7TENmvC8a04bbo1A==", + "dev": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, "node_modules/@utrecht/button-react": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@utrecht/button-react/-/button-react-2.0.1.tgz", @@ -2969,6 +3301,7 @@ "resolved": "https://registry.npmjs.org/@utrecht/component-library-react/-/component-library-react-7.2.0.tgz", "integrity": "sha512-o2nJIWxc93KmQIVNSX4WIJQqZCcMCOnS1A6oqfFKV8kBbnVaDxuqQSgjT/HNkoqLWZQY9Zo5orKdmRDHDpKr+w==", "dev": true, + "license": "EUPL-1.2", "dependencies": { "clsx": "2.1.1", "lodash.chunk": "4.2.0" @@ -3083,6 +3416,81 @@ "react-dom": "18" } }, + "node_modules/@utrecht/nav-bar-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@utrecht/nav-bar-react/-/nav-bar-react-1.0.0.tgz", + "integrity": "sha512-SfRrfolZ37QDT2BcodQNB/lJ10IdoMYquFTUDXngmbavzaCFZ+z5T/OMaQIK9yc/VJEuYqxI1eD/34/Knz+VsQ==", + "dev": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "node_modules/@utrecht/page-body-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@utrecht/page-body-react/-/page-body-react-1.0.0.tgz", + "integrity": "sha512-zqvNzmhwPJkki5lsLEps8VdUc1wlN1cvuBWg77j7NkLAAvL2OxgL84TaHZj7h5YRVbYph5U2FgdxBT9D5JYRMA==", + "dev": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "node_modules/@utrecht/page-footer-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@utrecht/page-footer-react/-/page-footer-react-1.0.0.tgz", + "integrity": "sha512-yehKbsVOgzN9jO4Nb93uBQGhhBooxV9ikzPX0gZku+VkgBdcdIIQBlLyf8g0bs6cFXL2F9TWO9SP6kyrmHNKsg==", + "dev": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "node_modules/@utrecht/page-header-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@utrecht/page-header-react/-/page-header-react-1.0.0.tgz", + "integrity": "sha512-pIiXDFgSP/3w8J4dznJTBrHdZrELqxxRkgR6cQ0eflvw1qZeG2ni02/QRUQzw7cDq7hiyLXmPDGgJxukfBU2kw==", + "dev": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, + "node_modules/@utrecht/page-layout-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@utrecht/page-layout-react/-/page-layout-react-1.0.0.tgz", + "integrity": "sha512-ZB6ko7UTjHVkGhbykn/bJFLoYRo6/HVcNgDMtKxa1fMhMTZmNzhc0Sau67uGuPg4ILgfwSzjBcLRv8VozUKEfg==", + "dev": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, "node_modules/@utrecht/radio-button-react": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@utrecht/radio-button-react/-/radio-button-react-1.0.1.tgz", @@ -3117,6 +3525,21 @@ "react-dom": "18" } }, + "node_modules/@utrecht/root-react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@utrecht/root-react/-/root-react-1.0.0.tgz", + "integrity": "sha512-W5fuLhe14VpHT1FXdwCgzWtSrlm8Pak1Nzl0zd8Bg24aAvDm/8alajO330eCM3DWkyGNHeMcINRIZa48n6xu+w==", + "dev": true, + "license": "EUPL-1.2", + "dependencies": { + "clsx": "2.1.1" + }, + "peerDependencies": { + "@babel/runtime": "*", + "react": "18", + "react-dom": "18" + } + }, "node_modules/@utrecht/select-combobox-react": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@utrecht/select-combobox-react/-/select-combobox-react-1.0.1.tgz", @@ -6682,7 +7105,8 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz", "integrity": "sha512-ZzydJKfUHJwHa+hF5X66zLFCBrWn5GeF28OHEr4WVWtNDXlQ/IjWKPBiikqKo2ne0+v6JgCgJ0GzJp8k8bHC7w==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/lodash.merge": { "version": "4.6.2", diff --git a/package.json b/package.json index 61a9c3a9..000659b8 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ }, "devDependencies": { "@amsterdam/design-system-react": "0.13.1", + "@fontsource/cantarell": "5.1.0", + "@nl-design-system-community/purmerend-design-tokens": "1.0.0", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "16.0.1", @@ -48,11 +50,18 @@ "@types/react": "18", "@types/react-dom": "18", "@types/validator": "13.12.2", + "@utrecht/body-react": "0.0.0", "@utrecht/checkbox-group-react": "1.0.0", "@utrecht/component-library-css": "6.1.0", "@utrecht/component-library-react": "7.2.0", "@utrecht/design-tokens": "2.1.1", + "@utrecht/nav-bar-react": "1.0.0", + "@utrecht/page-body-react": "1.0.0", + "@utrecht/page-footer-react": "1.0.0", + "@utrecht/page-header-react": "1.0.0", + "@utrecht/page-layout-react": "1.0.0", "@utrecht/radio-group-react": "1.0.3", + "@utrecht/root-react": "1.0.0", "@utrecht/select-combobox-react": "1.0.1", "@vitejs/plugin-react": "4.3.3", "autoprefixer": "10.4.20", diff --git a/public/assets/purmerend-logo.svg b/public/assets/purmerend-logo.svg new file mode 100644 index 00000000..f1d19b60 --- /dev/null +++ b/public/assets/purmerend-logo.svg @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/[locale]/components/Footer.tsx b/src/app/[locale]/components/Footer.tsx index 36968f76..fe36e6ed 100644 --- a/src/app/[locale]/components/Footer.tsx +++ b/src/app/[locale]/components/Footer.tsx @@ -1,10 +1,10 @@ 'use client' -import { Link } from '@utrecht/component-library-react' import { IconChevronRight } from '@tabler/icons-react' import { useEffect, useState } from 'react' import { useConfig } from '@/hooks/useConfig' import { useTranslations } from 'next-intl' +import { Link, PageFooter } from '@/components' type footerLink = { href: string @@ -41,21 +41,17 @@ const Footer = () => { }, [config, loading]) return ( - + + {links.map((link) => ( + + {link.label} + + ))} + ) } diff --git a/src/app/[locale]/components/Header.tsx b/src/app/[locale]/components/Header.tsx index d61d464f..af7eb388 100644 --- a/src/app/[locale]/components/Header.tsx +++ b/src/app/[locale]/components/Header.tsx @@ -1,5 +1,5 @@ import { Navigation } from '@/app/[locale]/components/Navigation' -import { Link, Logo } from '@/components/index' +import { Link, Logo, PageHeader } from '@/components/index' import Image from 'next/image' export interface HeaderProps { @@ -21,19 +21,25 @@ const Header = ({ homepage, logo }: HeaderProps) => { ) return ( -
- {homepage ? ( - - - {logoElement} - - ) : ( - logoElement - )} + <> + + {homepage ? ( + + + {logoElement} + + ) : ( + logoElement + )} + -
+ ) } diff --git a/src/app/[locale]/components/LanguageSwitch.tsx b/src/app/[locale]/components/LanguageSwitch.tsx index a1e0dfdb..f1bdeedc 100644 --- a/src/app/[locale]/components/LanguageSwitch.tsx +++ b/src/app/[locale]/components/LanguageSwitch.tsx @@ -1,6 +1,6 @@ 'use client' -import { useTransition } from 'react' +import { ChangeEvent, useTransition } from 'react' import { usePathname, useRouter } from '@/routing/navigation' import { Select } from '@/components' import { getAllAvailableLocales } from '@/lib/utils/locale' @@ -13,19 +13,18 @@ const LanguageSwitch = () => { const pathname = usePathname() const [isPending, startTransition] = useTransition() - const onSelectChange = (locale: string) => { + const onSelectChange = (evt: ChangeEvent) => { startTransition(() => { - router.replace(pathname, { locale: locale }) + router.replace(pathname, { locale: evt.target.value }) }) } return ( - + {getAllAvailableLocales().map((lang, index) => ( + + ))} + ) } diff --git a/src/app/[locale]/components/Navigation.tsx b/src/app/[locale]/components/Navigation.tsx index 5680f70f..e66d18b6 100644 --- a/src/app/[locale]/components/Navigation.tsx +++ b/src/app/[locale]/components/Navigation.tsx @@ -1,10 +1,11 @@ import { LanguageSwitch } from '@/app/[locale]/components/LanguageSwitch' +import { NavBar } from '@/components' const Navigation = () => { return ( - + ) } diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx index 62b07592..88935ae3 100644 --- a/src/app/[locale]/incident/add/components/MapDialog.tsx +++ b/src/app/[locale]/incident/add/components/MapDialog.tsx @@ -263,7 +263,7 @@ const MapDialog = ({ {trigger} - + {/* TODO: Overleggen welke titel hier het meest vriendelijk is voor de gebruiker, multi-language support integreren */} diff --git a/src/app/[locale]/incident/layout.tsx b/src/app/[locale]/incident/layout.tsx index 690ddfaf..f678b26f 100644 --- a/src/app/[locale]/incident/layout.tsx +++ b/src/app/[locale]/incident/layout.tsx @@ -7,9 +7,9 @@ export default function IncidentLayout({ children }: Layout) { const messages = useMessages() return ( -
-
-
+
+
+
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 0a9c51e7..eaa5b666 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -1,14 +1,21 @@ import { notFound } from 'next/navigation' import React from 'react' import { getAllAvailableLocales } from '@/lib/utils/locale' -import { Container } from '@/components' +import { + Root, + PageLayout, + Body, + PageBody, + PageFooter, + Article, +} from '@/components' import { Header } from '@/app/[locale]/components/Header' import localFont from 'next/font/local' import AppProvider from '@/components/providers/AppProvider' -import { Document } from '@utrecht/component-library-react/dist/css-module' import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl' import { Footer } from '@/app/[locale]/components/Footer' import pick from 'lodash/pick' +import type { PropsWithChildren } from 'react' const font = localFont({ src: '../../../public/fonts/open-sans.woff2', @@ -19,39 +26,41 @@ const font = localFont({ export default function LocaleLayout({ children, params: { locale }, -}: { - children: React.ReactNode +}: PropsWithChildren<{ params: { locale: any } -}) { +}>) { const messages = useMessages() if (!getAllAvailableLocales().includes(locale as any)) notFound() const t = useTranslations('current-organisation') return ( - - + + - - -
- {children} - -