diff --git a/package.json b/package.json index 5b210590..669e0590 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react-dom": "^18" }, "devDependencies": { + "@iconify/react": "^5.0.1", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7776e8af..7f0210c9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,9 +16,12 @@ dependencies: version: 18.3.1(react@18.3.1) devDependencies: + '@iconify/react': + specifier: ^5.0.1 + version: 5.0.1(react@18.3.1) '@types/node': specifier: ^20 - version: 20.14.8 + version: 20.14.9 '@types/react': specifier: ^18 version: 18.3.3 @@ -27,7 +30,7 @@ devDependencies: version: 18.3.0 '@typescript-eslint/eslint-plugin': specifier: ^7.13.1 - version: 7.13.1(@typescript-eslint/parser@7.2.0)(eslint@8.57.0)(typescript@5.5.2) + version: 7.14.1(@typescript-eslint/parser@7.14.1)(eslint@8.57.0)(typescript@5.5.2) eslint: specifier: ^8 version: 8.57.0 @@ -116,6 +119,19 @@ packages: deprecated: Use @eslint/object-schema instead dev: true + /@iconify/react@5.0.1(react@18.3.1): + resolution: {integrity: sha512-octpAJRtHZLLS1o6fmz2Ek2Rfwx75kVg48MZyGTqL3QqoxRddEsuLqOt6ADDhRosmlrYnIrVL+7obo1bz2ikNw==} + peerDependencies: + react: '>=16' + dependencies: + '@iconify/types': 2.0.0 + react: 18.3.1 + dev: true + + /@iconify/types@2.0.0: + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + dev: true + /@isaacs/cliui@8.0.2: resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -301,8 +317,8 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true - /@types/node@20.14.8: - resolution: {integrity: sha512-DO+2/jZinXfROG7j7WKFn/3C6nFwxy2lLpgLjEXJz+0XKphZlTLJ14mo8Vfg8X5BWN6XjyESXq+LcYdT7tR3bA==} + /@types/node@20.14.9: + resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==} dependencies: undici-types: 5.26.5 dev: true @@ -324,8 +340,8 @@ packages: csstype: 3.1.3 dev: true - /@typescript-eslint/eslint-plugin@7.13.1(@typescript-eslint/parser@7.2.0)(eslint@8.57.0)(typescript@5.5.2): - resolution: {integrity: sha512-kZqi+WZQaZfPKnsflLJQCz6Ze9FFSMfXrrIOcyargekQxG37ES7DJNpJUE9Q/X5n3yTIP/WPutVNzgknQ7biLg==} + /@typescript-eslint/eslint-plugin@7.14.1(@typescript-eslint/parser@7.14.1)(eslint@8.57.0)(typescript@5.5.2): + resolution: {integrity: sha512-aAJd6bIf2vvQRjUG3ZkNXkmBpN+J7Wd0mfQiiVCJMu9Z5GcZZdcc0j8XwN/BM97Fl7e3SkTXODSk4VehUv7CGw==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: '@typescript-eslint/parser': ^7.0.0 @@ -336,11 +352,11 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.10.1 - '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.2) - '@typescript-eslint/scope-manager': 7.13.1 - '@typescript-eslint/type-utils': 7.13.1(eslint@8.57.0)(typescript@5.5.2) - '@typescript-eslint/utils': 7.13.1(eslint@8.57.0)(typescript@5.5.2) - '@typescript-eslint/visitor-keys': 7.13.1 + '@typescript-eslint/parser': 7.14.1(eslint@8.57.0)(typescript@5.5.2) + '@typescript-eslint/scope-manager': 7.14.1 + '@typescript-eslint/type-utils': 7.14.1(eslint@8.57.0)(typescript@5.5.2) + '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.5.2) + '@typescript-eslint/visitor-keys': 7.14.1 eslint: 8.57.0 graphemer: 1.4.0 ignore: 5.3.1 @@ -351,6 +367,27 @@ packages: - supports-color dev: true + /@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.5.2): + resolution: {integrity: sha512-8lKUOebNLcR0D7RvlcloOacTOWzOqemWEWkKSVpMZVF/XVcwjPR+3MD08QzbW9TCGJ+DwIc6zUSGZ9vd8cO1IA==} + engines: {node: ^18.18.0 || >=20.0.0} + peerDependencies: + eslint: ^8.56.0 + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/scope-manager': 7.14.1 + '@typescript-eslint/types': 7.14.1 + '@typescript-eslint/typescript-estree': 7.14.1(typescript@5.5.2) + '@typescript-eslint/visitor-keys': 7.14.1 + debug: 4.3.5 + eslint: 8.57.0 + typescript: 5.5.2 + transitivePeerDependencies: + - supports-color + dev: true + /@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.2): resolution: {integrity: sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==} engines: {node: ^16.0.0 || >=18.0.0} @@ -372,12 +409,12 @@ packages: - supports-color dev: true - /@typescript-eslint/scope-manager@7.13.1: - resolution: {integrity: sha512-adbXNVEs6GmbzaCpymHQ0MB6E4TqoiVbC0iqG3uijR8ZYfpAXMGttouQzF4Oat3P2GxDVIrg7bMI/P65LiQZdg==} + /@typescript-eslint/scope-manager@7.14.1: + resolution: {integrity: sha512-gPrFSsoYcsffYXTOZ+hT7fyJr95rdVe4kGVX1ps/dJ+DfmlnjFN/GcMxXcVkeHDKqsq6uAcVaQaIi3cFffmAbA==} engines: {node: ^18.18.0 || >=20.0.0} dependencies: - '@typescript-eslint/types': 7.13.1 - '@typescript-eslint/visitor-keys': 7.13.1 + '@typescript-eslint/types': 7.14.1 + '@typescript-eslint/visitor-keys': 7.14.1 dev: true /@typescript-eslint/scope-manager@7.2.0: @@ -388,8 +425,8 @@ packages: '@typescript-eslint/visitor-keys': 7.2.0 dev: true - /@typescript-eslint/type-utils@7.13.1(eslint@8.57.0)(typescript@5.5.2): - resolution: {integrity: sha512-aWDbLu1s9bmgPGXSzNCxELu+0+HQOapV/y+60gPXafR8e2g1Bifxzevaa+4L2ytCWm+CHqpELq4CSoN9ELiwCg==} + /@typescript-eslint/type-utils@7.14.1(eslint@8.57.0)(typescript@5.5.2): + resolution: {integrity: sha512-/MzmgNd3nnbDbOi3LfasXWWe292+iuo+umJ0bCCMCPc1jLO/z2BQmWUUUXvXLbrQey/JgzdF/OV+I5bzEGwJkQ==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: eslint: ^8.56.0 @@ -398,8 +435,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 7.13.1(typescript@5.5.2) - '@typescript-eslint/utils': 7.13.1(eslint@8.57.0)(typescript@5.5.2) + '@typescript-eslint/typescript-estree': 7.14.1(typescript@5.5.2) + '@typescript-eslint/utils': 7.14.1(eslint@8.57.0)(typescript@5.5.2) debug: 4.3.5 eslint: 8.57.0 ts-api-utils: 1.3.0(typescript@5.5.2) @@ -408,8 +445,8 @@ packages: - supports-color dev: true - /@typescript-eslint/types@7.13.1: - resolution: {integrity: sha512-7K7HMcSQIAND6RBL4kDl24sG/xKM13cA85dc7JnmQXw2cBDngg7c19B++JzvJHRG3zG36n9j1i451GBzRuHchw==} + /@typescript-eslint/types@7.14.1: + resolution: {integrity: sha512-mL7zNEOQybo5R3AavY+Am7KLv8BorIv7HCYS5rKoNZKQD9tsfGUpO4KdAn3sSUvTiS4PQkr2+K0KJbxj8H9NDg==} engines: {node: ^18.18.0 || >=20.0.0} dev: true @@ -418,8 +455,8 @@ packages: engines: {node: ^16.0.0 || >=18.0.0} dev: true - /@typescript-eslint/typescript-estree@7.13.1(typescript@5.5.2): - resolution: {integrity: sha512-uxNr51CMV7npU1BxZzYjoVz9iyjckBduFBP0S5sLlh1tXYzHzgZ3BR9SVsNed+LmwKrmnqN3Kdl5t7eZ5TS1Yw==} + /@typescript-eslint/typescript-estree@7.14.1(typescript@5.5.2): + resolution: {integrity: sha512-k5d0VuxViE2ulIO6FbxxSZaxqDVUyMbXcidC8rHvii0I56XZPv8cq+EhMns+d/EVIL41sMXqRbK3D10Oza1bbA==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: typescript: '*' @@ -427,12 +464,12 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 7.13.1 - '@typescript-eslint/visitor-keys': 7.13.1 + '@typescript-eslint/types': 7.14.1 + '@typescript-eslint/visitor-keys': 7.14.1 debug: 4.3.5 globby: 11.1.0 is-glob: 4.0.3 - minimatch: 9.0.4 + minimatch: 9.0.5 semver: 7.6.2 ts-api-utils: 1.3.0(typescript@5.5.2) typescript: 5.5.2 @@ -462,27 +499,27 @@ packages: - supports-color dev: true - /@typescript-eslint/utils@7.13.1(eslint@8.57.0)(typescript@5.5.2): - resolution: {integrity: sha512-h5MzFBD5a/Gh/fvNdp9pTfqJAbuQC4sCN2WzuXme71lqFJsZtLbjxfSk4r3p02WIArOF9N94pdsLiGutpDbrXQ==} + /@typescript-eslint/utils@7.14.1(eslint@8.57.0)(typescript@5.5.2): + resolution: {integrity: sha512-CMmVVELns3nak3cpJhZosDkm63n+DwBlDX8g0k4QUa9BMnF+lH2lr3d130M1Zt1xxmB3LLk3NV7KQCq86ZBBhQ==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: eslint: ^8.56.0 dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) - '@typescript-eslint/scope-manager': 7.13.1 - '@typescript-eslint/types': 7.13.1 - '@typescript-eslint/typescript-estree': 7.13.1(typescript@5.5.2) + '@typescript-eslint/scope-manager': 7.14.1 + '@typescript-eslint/types': 7.14.1 + '@typescript-eslint/typescript-estree': 7.14.1(typescript@5.5.2) eslint: 8.57.0 transitivePeerDependencies: - supports-color - typescript dev: true - /@typescript-eslint/visitor-keys@7.13.1: - resolution: {integrity: sha512-k/Bfne7lrP7hcb7m9zSsgcBmo+8eicqqfNAJ7uUY+jkTFpKeH2FSkWpFRtimBxgkyvqfu9jTPRbYOvud6isdXA==} + /@typescript-eslint/visitor-keys@7.14.1: + resolution: {integrity: sha512-Crb+F75U1JAEtBeQGxSKwI60hZmmzaqA3z9sYsVm8X7W5cwLEm5bRe0/uXS6+MR/y8CVpKSR/ontIAIEPFcEkA==} engines: {node: ^18.18.0 || >=20.0.0} dependencies: - '@typescript-eslint/types': 7.13.1 + '@typescript-eslint/types': 7.14.1 eslint-visitor-keys: 3.4.3 dev: true @@ -751,8 +788,8 @@ packages: engines: {node: '>= 6'} dev: true - /caniuse-lite@1.0.30001636: - resolution: {integrity: sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==} + /caniuse-lite@1.0.30001638: + resolution: {integrity: sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==} dev: false /chalk@4.1.2: @@ -1119,7 +1156,7 @@ packages: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.14.1)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.34.3(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -1159,7 +1196,7 @@ packages: enhanced-resolve: 5.17.0 eslint: 8.57.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.14.1)(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.5 is-core-module: 2.14.0 @@ -1171,6 +1208,35 @@ packages: - supports-color dev: true + /eslint-module-utils@2.8.1(@typescript-eslint/parser@7.14.1)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0): + resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==} + engines: {node: '>=4'} + peerDependencies: + '@typescript-eslint/parser': '*' + eslint: '*' + eslint-import-resolver-node: '*' + eslint-import-resolver-typescript: '*' + eslint-import-resolver-webpack: '*' + peerDependenciesMeta: + '@typescript-eslint/parser': + optional: true + eslint: + optional: true + eslint-import-resolver-node: + optional: true + eslint-import-resolver-typescript: + optional: true + eslint-import-resolver-webpack: + optional: true + dependencies: + '@typescript-eslint/parser': 7.14.1(eslint@8.57.0)(typescript@5.5.2) + debug: 3.2.7 + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 + transitivePeerDependencies: + - supports-color + dev: true + /eslint-module-utils@2.8.1(@typescript-eslint/parser@7.2.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==} engines: {node: '>=4'} @@ -1201,7 +1267,7 @@ packages: - supports-color dev: true - /eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + /eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.14.1)(eslint@8.57.0): resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==} engines: {node: '>=4'} peerDependencies: @@ -1211,7 +1277,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.2) + '@typescript-eslint/parser': 7.14.1(eslint@8.57.0)(typescript@5.5.2) array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 array.prototype.flat: 1.3.2 @@ -1220,7 +1286,7 @@ packages: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.14.1)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.14.0 is-glob: 4.0.3 @@ -1570,7 +1636,7 @@ packages: dependencies: foreground-child: 3.2.1 jackspeak: 2.3.6 - minimatch: 9.0.4 + minimatch: 9.0.5 minipass: 7.1.2 path-scurry: 1.11.1 dev: true @@ -1582,7 +1648,7 @@ packages: dependencies: foreground-child: 3.2.1 jackspeak: 3.4.0 - minimatch: 9.0.4 + minimatch: 9.0.5 minipass: 7.1.2 package-json-from-dist: 1.0.0 path-scurry: 1.11.1 @@ -2072,8 +2138,8 @@ packages: brace-expansion: 2.0.1 dev: true - /minimatch@9.0.4: - resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==} + /minimatch@9.0.5: + resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==} engines: {node: '>=16 || 14 >=14.17'} dependencies: brace-expansion: 2.0.1 @@ -2134,7 +2200,7 @@ packages: '@next/env': 14.2.4 '@swc/helpers': 0.5.5 busboy: 1.6.0 - caniuse-lite: 1.0.30001636 + caniuse-lite: 1.0.30001638 graceful-fs: 4.2.11 postcss: 8.4.31 react: 18.3.1 @@ -2475,7 +2541,6 @@ packages: engines: {node: '>=0.10.0'} dependencies: loose-envify: 1.4.0 - dev: false /read-cache@1.0.0: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} diff --git a/public/FIrst Date Logo.svg b/public/FIrst Date Logo.svg new file mode 100644 index 00000000..b3a132ce --- /dev/null +++ b/public/FIrst Date Logo.svg @@ -0,0 +1,426 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/border/whiteBorder.svg b/public/border/whiteBorder.svg new file mode 100644 index 00000000..d3256f60 --- /dev/null +++ b/public/border/whiteBorder.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/map.svg b/public/map.svg new file mode 100644 index 00000000..7a2f8f81 --- /dev/null +++ b/public/map.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx new file mode 100644 index 00000000..6de4e317 --- /dev/null +++ b/src/app/map/page.tsx @@ -0,0 +1,37 @@ +import Border from '@/components/Border'; +import FDLogo from '@public/FIrst Date Logo.svg'; +import MapImage from '@public/map.svg'; +import Image from 'next/image'; +import { Icon } from '@iconify/react'; + +export default function Map() { + return ( +
+ +
+ logo +
+
Map
+ map +
+ Lorem ipsum dolor sit +
+ +
+ + โปรไฟล์ +
+
+ ); +} diff --git a/src/components/Border.tsx b/src/components/Border.tsx index 4ec8fc51..87791f28 100644 --- a/src/components/Border.tsx +++ b/src/components/Border.tsx @@ -3,9 +3,10 @@ import darkPinkBorder from '../../public/border/darkPinkBorder.svg'; import lightPinkBorder from '../../public/border/lightPinkBorder.svg'; import whiteBrownBorder from '../../public/border/whiteBrownBorder.svg'; import transparentBorder from '../../public/border/transparentBorder.svg'; +import whiteBorder from '@public/border/whiteBorder.svg'; interface BorderProps { - variant: 'dark-pink' | 'light-pink' | 'white-brown' | 'transparent'; + variant: 'dark-pink' | 'light-pink' | 'white-brown' | 'transparent' | 'white'; className?: string; children?: React.ReactNode; } @@ -35,6 +36,12 @@ const borderStyles = { backgroundImage: `url(${transparentBorder.src})`, }, }, + white: { + base: '', + style: { + backgroundImage: `url(${whiteBorder.src})`, + }, + }, }; const Border: React.FC = ({