Design system/ora notifications (#4)
https://app.ora.pm/p/fb56ed95daa7456b888d266a050b9afa?v=86662&s=28293&t=k&c=564eead1724741e293030d9250daf679 Notification component Front integration done but we will need to make further modifications around notifications states when backed will be setup.
This commit is contained in:
Arnaud D. Natali
GitHub
commit
676db99cb8
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,5 +1,6 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
|
||||||
dist
|
dist
|
||||||
.next
|
.next
|
||||||
|
|
||||||
|
|||||||
504
package-lock.json
generated
504
package-lock.json
generated
@ -83,6 +83,36 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz",
|
||||||
"integrity": "sha512-0Ry4NhJy6qLbXhvxPRUQ1H6RzgtryGdUto7hfgAK0Iw/bScgeVjwLZdfhm2iT7qsOS32apo9cWzLCxjc6iGPsA=="
|
"integrity": "sha512-0Ry4NhJy6qLbXhvxPRUQ1H6RzgtryGdUto7hfgAK0Iw/bScgeVjwLZdfhm2iT7qsOS32apo9cWzLCxjc6iGPsA=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@next/swc-android-arm-eabi": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-QAEf3YM9U0qWVQTxgF3Tsh4OeCN1i9Smsf6cVlwZsPzoLyj2nQ879joCoN+ONqDknkBgG6OG/ajefywL3jw9Cg==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"android"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-android-arm64": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-ZmtGPTghRuT5YKL0nNcC2bBVSiG1O0is16eIZ2rWSP/hRW64ZCcAew6pxw2rihntNp22UfequjSTHd91WE/tyQ==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"android"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@next/swc-darwin-arm64": {
|
"node_modules/@next/swc-darwin-arm64": {
|
||||||
"version": "13.1.5",
|
"version": "13.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz",
|
||||||
@ -98,6 +128,156 @@
|
|||||||
"node": ">= 10"
|
"node": ">= 10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@next/swc-darwin-x64": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-6mPX0GNRg8NzjV70at8I8pD9YBnPHDpxJCoMuIqysdTjtQhd09Xk6GUhquNhp1kEJzzVk7OW5l2ch4XIJjtY3A==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-freebsd-x64": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-nR4a/SNblG0w8hhYRflTZjk4yD99ld18w/FCftw99ziw8sgciBlOXRICJIiRIaMRU8UH7QLSgBOQVnfNcVNKMA==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"freebsd"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-linux-arm-gnueabihf": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-EzkltCVKg3gUzamoeKPhGeSgXTTLAhSzc7v/+g1Y+HQa7JKMrlzdRkrJf+H4LJXcz7lnxgNKHGRyZBSXnmJKJw==",
|
||||||
|
"cpu": [
|
||||||
|
"arm"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-E7HMkdoxStmTUJU4KzBUU4vZ5DHT4Gd327tC3KFZS5lda0NRerJAOCfsRg+fBj22FvCb1UWsX6XI+weL6xhyeQ==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-linux-arm64-musl": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-qlO0Fd3GQwJS6YpbF9NyL5NGHVZ43dKtZDC/jP4vdeMIYDtSu13HcY/nmA1NdW+RpMwDxSCpx4WKsCCEZGIX8Q==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-linux-x64-gnu": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-GftSBFAay2nocGl+KNqFsj6EVSvomaM/bp86hzezbKsTwQmu76PjOCVcejI1gE+4k7f5zPDgCuorF6F04BV0HQ==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-linux-x64-musl": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-UD+3lxU4yuAjd+uBkCDfBpAcbGAVfEcE8mX/efIxUGIImmzN0QzgTHYEpKFnY3Lxu02dIBcwQRT3Q5mfO4obng==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"linux"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-uzsvkQY+K3EbL+97IUHPWZPwjsCmCkdH/O5Cf9wCnh0k0gaj7ob1mGKqr1vNNak+9U7HloGwuHcXnZpijWSP7w==",
|
||||||
|
"cpu": [
|
||||||
|
"arm64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-win32-ia32-msvc": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-v0NaC1w8mPf620GlJaHBdEm3dm4G4AEQMasDqjzQvo0yCRrvtvzMgCIe8MocBxFHzaF6868NybMqvumxP5YxEg==",
|
||||||
|
"cpu": [
|
||||||
|
"ia32"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@next/swc-win32-x64-msvc": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-IZHwvd649ccbWyLCfu92IXEpR250NpmBkaRelPV+WVm4jrd62FKRFCNdqdCXq6TrEg9wN8cK4YG8tm44uEZqLA==",
|
||||||
|
"cpu": [
|
||||||
|
"x64"
|
||||||
|
],
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"win32"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@prisma/client": {
|
"node_modules/@prisma/client": {
|
||||||
"version": "4.9.0",
|
"version": "4.9.0",
|
||||||
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz",
|
||||||
@ -2270,186 +2450,6 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"node_modules/@next/swc-android-arm-eabi": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-QAEf3YM9U0qWVQTxgF3Tsh4OeCN1i9Smsf6cVlwZsPzoLyj2nQ879joCoN+ONqDknkBgG6OG/ajefywL3jw9Cg==",
|
|
||||||
"cpu": [
|
|
||||||
"arm"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"android"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-android-arm64": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-ZmtGPTghRuT5YKL0nNcC2bBVSiG1O0is16eIZ2rWSP/hRW64ZCcAew6pxw2rihntNp22UfequjSTHd91WE/tyQ==",
|
|
||||||
"cpu": [
|
|
||||||
"arm64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"android"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-darwin-x64": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-6mPX0GNRg8NzjV70at8I8pD9YBnPHDpxJCoMuIqysdTjtQhd09Xk6GUhquNhp1kEJzzVk7OW5l2ch4XIJjtY3A==",
|
|
||||||
"cpu": [
|
|
||||||
"x64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"darwin"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-freebsd-x64": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-nR4a/SNblG0w8hhYRflTZjk4yD99ld18w/FCftw99ziw8sgciBlOXRICJIiRIaMRU8UH7QLSgBOQVnfNcVNKMA==",
|
|
||||||
"cpu": [
|
|
||||||
"x64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"freebsd"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-linux-arm-gnueabihf": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-EzkltCVKg3gUzamoeKPhGeSgXTTLAhSzc7v/+g1Y+HQa7JKMrlzdRkrJf+H4LJXcz7lnxgNKHGRyZBSXnmJKJw==",
|
|
||||||
"cpu": [
|
|
||||||
"arm"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"linux"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-E7HMkdoxStmTUJU4KzBUU4vZ5DHT4Gd327tC3KFZS5lda0NRerJAOCfsRg+fBj22FvCb1UWsX6XI+weL6xhyeQ==",
|
|
||||||
"cpu": [
|
|
||||||
"arm64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"linux"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-linux-arm64-musl": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-qlO0Fd3GQwJS6YpbF9NyL5NGHVZ43dKtZDC/jP4vdeMIYDtSu13HcY/nmA1NdW+RpMwDxSCpx4WKsCCEZGIX8Q==",
|
|
||||||
"cpu": [
|
|
||||||
"arm64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"linux"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-linux-x64-gnu": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-GftSBFAay2nocGl+KNqFsj6EVSvomaM/bp86hzezbKsTwQmu76PjOCVcejI1gE+4k7f5zPDgCuorF6F04BV0HQ==",
|
|
||||||
"cpu": [
|
|
||||||
"x64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"linux"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-linux-x64-musl": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-UD+3lxU4yuAjd+uBkCDfBpAcbGAVfEcE8mX/efIxUGIImmzN0QzgTHYEpKFnY3Lxu02dIBcwQRT3Q5mfO4obng==",
|
|
||||||
"cpu": [
|
|
||||||
"x64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"linux"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-uzsvkQY+K3EbL+97IUHPWZPwjsCmCkdH/O5Cf9wCnh0k0gaj7ob1mGKqr1vNNak+9U7HloGwuHcXnZpijWSP7w==",
|
|
||||||
"cpu": [
|
|
||||||
"arm64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"win32"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-win32-ia32-msvc": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-v0NaC1w8mPf620GlJaHBdEm3dm4G4AEQMasDqjzQvo0yCRrvtvzMgCIe8MocBxFHzaF6868NybMqvumxP5YxEg==",
|
|
||||||
"cpu": [
|
|
||||||
"ia32"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"win32"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@next/swc-win32-x64-msvc": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-IZHwvd649ccbWyLCfu92IXEpR250NpmBkaRelPV+WVm4jrd62FKRFCNdqdCXq6TrEg9wN8cK4YG8tm44uEZqLA==",
|
|
||||||
"cpu": [
|
|
||||||
"x64"
|
|
||||||
],
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"win32"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 10"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -2485,12 +2485,84 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.5.tgz",
|
||||||
"integrity": "sha512-0Ry4NhJy6qLbXhvxPRUQ1H6RzgtryGdUto7hfgAK0Iw/bScgeVjwLZdfhm2iT7qsOS32apo9cWzLCxjc6iGPsA=="
|
"integrity": "sha512-0Ry4NhJy6qLbXhvxPRUQ1H6RzgtryGdUto7hfgAK0Iw/bScgeVjwLZdfhm2iT7qsOS32apo9cWzLCxjc6iGPsA=="
|
||||||
},
|
},
|
||||||
|
"@next/swc-android-arm-eabi": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-QAEf3YM9U0qWVQTxgF3Tsh4OeCN1i9Smsf6cVlwZsPzoLyj2nQ879joCoN+ONqDknkBgG6OG/ajefywL3jw9Cg==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-android-arm64": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-ZmtGPTghRuT5YKL0nNcC2bBVSiG1O0is16eIZ2rWSP/hRW64ZCcAew6pxw2rihntNp22UfequjSTHd91WE/tyQ==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"@next/swc-darwin-arm64": {
|
"@next/swc-darwin-arm64": {
|
||||||
"version": "13.1.5",
|
"version": "13.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.5.tgz",
|
||||||
"integrity": "sha512-aeFXK+M/zmG/CNdMJ0tGNs0MWcLueUe7vZ2V6fa+2yz/ZgYJLI7fEfFvVh1p1yBMzupSbZDowvMuCSFTaeg3MA==",
|
"integrity": "sha512-aeFXK+M/zmG/CNdMJ0tGNs0MWcLueUe7vZ2V6fa+2yz/ZgYJLI7fEfFvVh1p1yBMzupSbZDowvMuCSFTaeg3MA==",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"@next/swc-darwin-x64": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-6mPX0GNRg8NzjV70at8I8pD9YBnPHDpxJCoMuIqysdTjtQhd09Xk6GUhquNhp1kEJzzVk7OW5l2ch4XIJjtY3A==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-freebsd-x64": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-nR4a/SNblG0w8hhYRflTZjk4yD99ld18w/FCftw99ziw8sgciBlOXRICJIiRIaMRU8UH7QLSgBOQVnfNcVNKMA==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-linux-arm-gnueabihf": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-EzkltCVKg3gUzamoeKPhGeSgXTTLAhSzc7v/+g1Y+HQa7JKMrlzdRkrJf+H4LJXcz7lnxgNKHGRyZBSXnmJKJw==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-linux-arm64-gnu": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-E7HMkdoxStmTUJU4KzBUU4vZ5DHT4Gd327tC3KFZS5lda0NRerJAOCfsRg+fBj22FvCb1UWsX6XI+weL6xhyeQ==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-linux-arm64-musl": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-qlO0Fd3GQwJS6YpbF9NyL5NGHVZ43dKtZDC/jP4vdeMIYDtSu13HcY/nmA1NdW+RpMwDxSCpx4WKsCCEZGIX8Q==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-linux-x64-gnu": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-GftSBFAay2nocGl+KNqFsj6EVSvomaM/bp86hzezbKsTwQmu76PjOCVcejI1gE+4k7f5zPDgCuorF6F04BV0HQ==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-linux-x64-musl": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-UD+3lxU4yuAjd+uBkCDfBpAcbGAVfEcE8mX/efIxUGIImmzN0QzgTHYEpKFnY3Lxu02dIBcwQRT3Q5mfO4obng==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-win32-arm64-msvc": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-uzsvkQY+K3EbL+97IUHPWZPwjsCmCkdH/O5Cf9wCnh0k0gaj7ob1mGKqr1vNNak+9U7HloGwuHcXnZpijWSP7w==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-win32-ia32-msvc": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-v0NaC1w8mPf620GlJaHBdEm3dm4G4AEQMasDqjzQvo0yCRrvtvzMgCIe8MocBxFHzaF6868NybMqvumxP5YxEg==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@next/swc-win32-x64-msvc": {
|
||||||
|
"version": "13.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.5.tgz",
|
||||||
|
"integrity": "sha512-IZHwvd649ccbWyLCfu92IXEpR250NpmBkaRelPV+WVm4jrd62FKRFCNdqdCXq6TrEg9wN8cK4YG8tm44uEZqLA==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"@prisma/client": {
|
"@prisma/client": {
|
||||||
"version": "4.9.0",
|
"version": "4.9.0",
|
||||||
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-4.9.0.tgz",
|
||||||
@ -4158,78 +4230,6 @@
|
|||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
|
||||||
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
|
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
|
||||||
},
|
|
||||||
"@next/swc-android-arm-eabi": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-QAEf3YM9U0qWVQTxgF3Tsh4OeCN1i9Smsf6cVlwZsPzoLyj2nQ879joCoN+ONqDknkBgG6OG/ajefywL3jw9Cg==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-android-arm64": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-ZmtGPTghRuT5YKL0nNcC2bBVSiG1O0is16eIZ2rWSP/hRW64ZCcAew6pxw2rihntNp22UfequjSTHd91WE/tyQ==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-darwin-x64": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-6mPX0GNRg8NzjV70at8I8pD9YBnPHDpxJCoMuIqysdTjtQhd09Xk6GUhquNhp1kEJzzVk7OW5l2ch4XIJjtY3A==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-freebsd-x64": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-nR4a/SNblG0w8hhYRflTZjk4yD99ld18w/FCftw99ziw8sgciBlOXRICJIiRIaMRU8UH7QLSgBOQVnfNcVNKMA==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-linux-arm-gnueabihf": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-EzkltCVKg3gUzamoeKPhGeSgXTTLAhSzc7v/+g1Y+HQa7JKMrlzdRkrJf+H4LJXcz7lnxgNKHGRyZBSXnmJKJw==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-linux-arm64-gnu": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-E7HMkdoxStmTUJU4KzBUU4vZ5DHT4Gd327tC3KFZS5lda0NRerJAOCfsRg+fBj22FvCb1UWsX6XI+weL6xhyeQ==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-linux-arm64-musl": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-qlO0Fd3GQwJS6YpbF9NyL5NGHVZ43dKtZDC/jP4vdeMIYDtSu13HcY/nmA1NdW+RpMwDxSCpx4WKsCCEZGIX8Q==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-linux-x64-gnu": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-GftSBFAay2nocGl+KNqFsj6EVSvomaM/bp86hzezbKsTwQmu76PjOCVcejI1gE+4k7f5zPDgCuorF6F04BV0HQ==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-linux-x64-musl": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-UD+3lxU4yuAjd+uBkCDfBpAcbGAVfEcE8mX/efIxUGIImmzN0QzgTHYEpKFnY3Lxu02dIBcwQRT3Q5mfO4obng==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-win32-arm64-msvc": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-uzsvkQY+K3EbL+97IUHPWZPwjsCmCkdH/O5Cf9wCnh0k0gaj7ob1mGKqr1vNNak+9U7HloGwuHcXnZpijWSP7w==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-win32-ia32-msvc": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-v0NaC1w8mPf620GlJaHBdEm3dm4G4AEQMasDqjzQvo0yCRrvtvzMgCIe8MocBxFHzaF6868NybMqvumxP5YxEg==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"@next/swc-win32-x64-msvc": {
|
|
||||||
"version": "13.1.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.5.tgz",
|
|
||||||
"integrity": "sha512-IZHwvd649ccbWyLCfu92IXEpR250NpmBkaRelPV+WVm4jrd62FKRFCNdqdCXq6TrEg9wN8cK4YG8tm44uEZqLA==",
|
|
||||||
"optional": true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
10
package.json
10
package.json
@ -4,17 +4,23 @@
|
|||||||
"description": "tezosLink project",
|
"description": "tezosLink project",
|
||||||
"_moduleAliases": {
|
"_moduleAliases": {
|
||||||
"@Api": "./dist/api",
|
"@Api": "./dist/api",
|
||||||
|
"@Front": "./dist/front/*",
|
||||||
|
"@Assets": "./dist/front/Assets/*",
|
||||||
|
"@Components": "./dist/front/Components/*",
|
||||||
|
"@Themes": "./dist/front/Themes/*",
|
||||||
|
"@Stores": "./dist/front/Stores/*",
|
||||||
|
"@FrontServices": "./dist/front/services/*",
|
||||||
"@Pages": "./dist/pages",
|
"@Pages": "./dist/pages",
|
||||||
"@Components": "./dist/front/components",
|
"@Components": "./dist/front/components",
|
||||||
"@Common": "./dist/common",
|
"@Common": "./dist/common",
|
||||||
"@Services": "./dist/common/services",
|
"@Services": "./dist/common/services",
|
||||||
"@Entries": "./dist/common/entries",
|
"@Entries": "./dist/common/entries",
|
||||||
|
"@Common": "./dist/common",
|
||||||
"@Config": "./dist/common/config",
|
"@Config": "./dist/common/config",
|
||||||
"@Entities": "./dist/common/entities",
|
"@Entities": "./dist/common/entities",
|
||||||
"@System": "./dist/common/system",
|
"@System": "./dist/common/system",
|
||||||
"@ControllerPattern": "./dist/common/system/controller-pattern",
|
"@ControllerPattern": "./dist/common/system/controller-pattern",
|
||||||
"@Front": "./dist/front/*",
|
"@Front": "./dist/front/*"
|
||||||
"@Themes": "./dist/front/Themes*"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "next build && tsc",
|
"build": "next build && tsc",
|
||||||
|
|||||||
@ -1,16 +1,17 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
files: "src/**/*.ts",
|
files: ["src/**/*.ts", "src/**/*.tsx", "src/**/*.scss", "./*.js"],
|
||||||
options: {
|
options: {
|
||||||
tabWidth: 4,
|
tabWidth: 4,
|
||||||
useTabs: true,
|
useTabs: true,
|
||||||
singleQuote: false,
|
singleQuote: false,
|
||||||
trailingComma: "all",
|
trailingComma: "all",
|
||||||
printWidth: 240,
|
printWidth: 240,
|
||||||
endOfLine: "crlf",
|
|
||||||
semi: true,
|
semi: true,
|
||||||
|
bracketSameLine: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
9
src/front/Services/EventEmitter.ts
Normal file
9
src/front/Services/EventEmitter.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import Events from "events";
|
||||||
|
|
||||||
|
export default class EventEmitter extends Events {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.setMaxListeners(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
16
src/front/Stores/BaseStore.ts
Normal file
16
src/front/Stores/BaseStore.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import EventEmitter from "@Front/Services/EventEmitter";
|
||||||
|
|
||||||
|
|
||||||
|
export default abstract class BaseStore {
|
||||||
|
protected readonly event = new EventEmitter();
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||||
|
protected constructor() {}
|
||||||
|
|
||||||
|
public onChange<T>(callback: (params: T) => void) {
|
||||||
|
this.event.on("change", callback);
|
||||||
|
return () => {
|
||||||
|
this.event.off("change", callback);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
106
src/front/Stores/Toasts.tsx
Normal file
106
src/front/Stores/Toasts.tsx
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
import EventEmitter from "@Front/Services/EventEmitter";
|
||||||
|
// import I18n from "Components/Elements/I18n";
|
||||||
|
|
||||||
|
export enum EToastPriority {
|
||||||
|
HIGH = "high",
|
||||||
|
LOW = "low",
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IToast {
|
||||||
|
id?: number;
|
||||||
|
title: string | React.ReactNode;
|
||||||
|
icon?: React.ReactNode;
|
||||||
|
text?: string | React.ReactNode;
|
||||||
|
button?: React.ReactNode;
|
||||||
|
time?: number;
|
||||||
|
closable?: boolean;
|
||||||
|
priority?: EToastPriority;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Toasts {
|
||||||
|
private static ctx: Toasts;
|
||||||
|
private readonly event = new EventEmitter();
|
||||||
|
private toastList: IToast[] = [];
|
||||||
|
private uid: number = 0;
|
||||||
|
|
||||||
|
private defaultTime: IToast["time"] = 10000;
|
||||||
|
private defaultClosable: IToast["closable"] = true;
|
||||||
|
private defaultPriority: IToast["priority"] = EToastPriority.LOW;
|
||||||
|
|
||||||
|
private constructor() {
|
||||||
|
Toasts.ctx = this;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static getInstance() {
|
||||||
|
if (!Toasts.ctx) new this();
|
||||||
|
return Toasts.ctx;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get toasts() {
|
||||||
|
return this.toastList;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns removelistener callback
|
||||||
|
*/
|
||||||
|
public onChange(callback: (toastList: IToast[]) => void) {
|
||||||
|
this.event.on("change", callback);
|
||||||
|
return () => this.event.off("change", callback);
|
||||||
|
}
|
||||||
|
|
||||||
|
public open(toast: IToast): () => void {
|
||||||
|
const index = this.toastList.indexOf(toast);
|
||||||
|
if (index !== -1) return () => this.close(toast);
|
||||||
|
|
||||||
|
toast.id = toast.id ?? this.uid++;
|
||||||
|
toast.time = toast.time ?? this.defaultTime;
|
||||||
|
toast.closable = toast.closable ?? this.defaultClosable;
|
||||||
|
toast.priority = toast.priority ?? this.defaultPriority;
|
||||||
|
|
||||||
|
const highToasts = this.toastList.filter((toast) => {
|
||||||
|
return toast.priority === EToastPriority.HIGH;
|
||||||
|
});
|
||||||
|
|
||||||
|
const lowToasts = this.toastList.filter((toast) => {
|
||||||
|
return toast.priority === EToastPriority.LOW;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (toast.priority === EToastPriority.HIGH) {
|
||||||
|
highToasts.unshift(toast);
|
||||||
|
} else {
|
||||||
|
lowToasts.unshift(toast);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toastList.splice(0);
|
||||||
|
this.toastList.unshift(...lowToasts);
|
||||||
|
this.toastList.unshift(...highToasts);
|
||||||
|
|
||||||
|
this.event.emit("change", this.toastList);
|
||||||
|
|
||||||
|
return () => this.close(toast);
|
||||||
|
}
|
||||||
|
|
||||||
|
public close(toast: IToast) {
|
||||||
|
const index = this.toastList.indexOf(toast);
|
||||||
|
if (index === -1) return;
|
||||||
|
this.toastList.splice(index, 1);
|
||||||
|
this.event.emit("change", this.toastList);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* An utility static method you can use to quickly display an error toast
|
||||||
|
* with a custom error message.
|
||||||
|
*
|
||||||
|
* @param message_key a key to a l18n message.
|
||||||
|
*/
|
||||||
|
public static errorToast(message_key: string) {
|
||||||
|
Toasts.getInstance().open({
|
||||||
|
text: "Toast text",
|
||||||
|
title: "Toast title",
|
||||||
|
// text: <I18n map={message_key} />,
|
||||||
|
// title: <I18n map="toast.an_error_occured" />,
|
||||||
|
closable: true,
|
||||||
|
priority: EToastPriority.HIGH,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
5
src/front/assets/icons/info.svg
Normal file
5
src/front/assets/icons/info.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="6" cy="6" r="6" fill="#FFB017"/>
|
||||||
|
<path d="M6 3V5.66667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<circle cx="6" cy="9" r="1" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 295 B |
@ -0,0 +1,37 @@
|
|||||||
|
@import "@Themes/constants.scss";
|
||||||
|
|
||||||
|
.root {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 300px;
|
||||||
|
max-height: 80%;
|
||||||
|
background-color: $white;
|
||||||
|
box-shadow: $shadow-nav;
|
||||||
|
padding: 24px;
|
||||||
|
position: absolute;
|
||||||
|
top: 107px;
|
||||||
|
right:56px;
|
||||||
|
|
||||||
|
.notification-header{
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.close-icon{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.notification-body{
|
||||||
|
margin-top: 24px;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.background{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
import React from "react";
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||||
|
import CloseIcon from "@Assets/icons/cross.svg";
|
||||||
|
import Image from "next/image";
|
||||||
|
import ToastHandler from "@Front/Components/DesignSystem/Toasts/ToastsHandler";
|
||||||
|
import Toasts, { IToast } from "@Front/Stores/Toasts";
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
isOpen: boolean;
|
||||||
|
closeModal: () => void;
|
||||||
|
};
|
||||||
|
type IState = {
|
||||||
|
toastList: IToast[] | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class NotificationModal extends React.Component<IProps, IState> {
|
||||||
|
private removeOnToastChange: () => void = () => { };
|
||||||
|
|
||||||
|
constructor(props: IProps) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
toastList: Toasts.getInstance().toasts,
|
||||||
|
};
|
||||||
|
this.handleToastChange = this.handleToastChange.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override render(): JSX.Element | null {
|
||||||
|
if (!this.props.isOpen) return null;
|
||||||
|
return <>
|
||||||
|
<div className={classes["background"]} onClick={this.props.closeModal}/>
|
||||||
|
<div className={classes["root"]}>
|
||||||
|
<div className={classes["notification-header"]}>
|
||||||
|
<Typography typo={ITypo.P_16}>
|
||||||
|
Notifications
|
||||||
|
</Typography>
|
||||||
|
<div className={classes["close-icon"]} onClick={this.props.closeModal}>
|
||||||
|
<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
|
||||||
|
<div className={classes["notification-body"]}>
|
||||||
|
<>
|
||||||
|
{Toasts.getInstance().toasts.length === 0
|
||||||
|
?
|
||||||
|
<div>
|
||||||
|
<Typography typo={ITypo.P_16}>No notification yet</Typography>
|
||||||
|
</div>
|
||||||
|
: <ToastHandler />}
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
|
public override componentDidMount() {
|
||||||
|
this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override componentWillUnmount() {
|
||||||
|
this.removeOnToastChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleToastChange(toastList: IToast[] | null) {
|
||||||
|
this.setState({
|
||||||
|
toastList,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,8 +1,18 @@
|
|||||||
@import "@Themes/constants.scss";
|
@import "@Themes/constants.scss";
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
|
.icon-container{
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
.notification-icon{
|
.notification-icon{
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
}
|
}
|
||||||
|
.notification-dot{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,14 +2,66 @@ import React from "react";
|
|||||||
import classes from "./classes.module.scss";
|
import classes from "./classes.module.scss";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import NotificationIcon from "@Assets/icons/notification.svg";
|
import NotificationIcon from "@Assets/icons/notification.svg";
|
||||||
|
import Toasts, { IToast } from "@Front/Stores/Toasts";
|
||||||
|
import NotificationModal from "./NotificationModal";
|
||||||
|
import InfoIcon from "@Assets/icons/info.svg";
|
||||||
|
|
||||||
type IProps = {};
|
type IProps = {};
|
||||||
type IState = {};
|
type IState = {
|
||||||
|
hasNotifications: boolean;
|
||||||
|
isModalOpen: boolean;
|
||||||
|
toastList: IToast[] | null;
|
||||||
|
};
|
||||||
|
|
||||||
export default class Notifications extends React.Component<IProps, IState> {
|
export default class Notifications extends React.Component<IProps, IState> {
|
||||||
|
private removeOnToastChange: () => void = () => { };
|
||||||
|
|
||||||
|
constructor(props: IProps) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
isModalOpen: false,
|
||||||
|
toastList: Toasts.getInstance().toasts, //TODO : Get from bbd
|
||||||
|
hasNotifications: Toasts.getInstance().toasts.length > 0, // TODO: Change this when we have notification stored in bbd, unread notifications
|
||||||
|
};
|
||||||
|
this.openModal = this.openModal.bind(this);
|
||||||
|
this.closeModal = this.closeModal.bind(this);
|
||||||
|
this.handleToastChange = this.handleToastChange.bind(this);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
public override render(): JSX.Element {
|
public override render(): JSX.Element {
|
||||||
return <div className={classes["root"]}>
|
return <div className={classes["root"]}>
|
||||||
<Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]}/>
|
<div className={classes["icon-container"]} onClick={this.openModal}>
|
||||||
|
<Image alt="notifications" src={NotificationIcon} className={classes["notification-icon"]} />
|
||||||
|
{this.state.hasNotifications &&
|
||||||
|
<Image className={classes["notification-dot"]} src={InfoIcon} alt="Unread notification" />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{this.state.isModalOpen && <NotificationModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public override componentDidMount() {
|
||||||
|
this.removeOnToastChange = Toasts.getInstance().onChange(this.handleToastChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override componentWillUnmount() {
|
||||||
|
this.removeOnToastChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleToastChange(toastList: IToast[] | null) {
|
||||||
|
this.setState({
|
||||||
|
toastList,
|
||||||
|
hasNotifications: toastList ? toastList.length > 0 : false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private openModal() {
|
||||||
|
this.setState({ isModalOpen: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
private closeModal() {
|
||||||
|
this.setState({ isModalOpen: false });
|
||||||
|
};
|
||||||
}
|
}
|
||||||
@ -6,7 +6,7 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 83px;
|
height: 83px;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
box-shadow: $shadow-neutral;
|
box-shadow: $shadow-nav;
|
||||||
padding: 0 48px;
|
padding: 0 48px;
|
||||||
|
|
||||||
.logo-container {
|
.logo-container {
|
||||||
|
|||||||
@ -0,0 +1,96 @@
|
|||||||
|
@import "@Themes/constants.scss";
|
||||||
|
|
||||||
|
@keyframes slide-left {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(120%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-right {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(120%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.root {
|
||||||
|
pointer-events: all;
|
||||||
|
position: relative;
|
||||||
|
padding: 24px;
|
||||||
|
background: $orange-soft;
|
||||||
|
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
animation-name: slide-left;
|
||||||
|
animation-duration: 400ms;
|
||||||
|
animation-timing-function: $custom-easing;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
|
||||||
|
&[data-will-close="true"] {
|
||||||
|
animation-duration: 200ms;
|
||||||
|
animation-name: slide-right;
|
||||||
|
animation-timing-function: $custom-easing;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadbar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color-neutral-500);
|
||||||
|
border-radius: 5px;
|
||||||
|
transform-origin: right;
|
||||||
|
transform: scaleX(0);
|
||||||
|
animation: loadbar-animation var(--data-duration) linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: var(--color-neutral-900);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.cross {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-icon_row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
p {
|
||||||
|
padding-left: 14px;
|
||||||
|
width: 150%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-container {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: var(--color-neutral-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,102 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
|
||||||
|
// Stores
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
import Toasts, { IToast } from "@Front/Stores/Toasts";
|
||||||
|
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
toast: IToast;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IState = {
|
||||||
|
willClose: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class ToastElement extends React.Component<IProps, IState> {
|
||||||
|
private closeTimeout = 0;
|
||||||
|
constructor(props: IProps) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
willClose: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onClose = this.onClose.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override render(): JSX.Element {
|
||||||
|
const toast = this.props.toast;
|
||||||
|
const style = {
|
||||||
|
"--data-duration": `${toast.time}ms`,
|
||||||
|
} as React.CSSProperties;
|
||||||
|
return (
|
||||||
|
<div className={classes["root"]} data-will-close={this.state.willClose}>
|
||||||
|
{toast.time !== 0 && <div className={classes["loadbar"]} style={style} />}
|
||||||
|
<div className={classes["header"]}>
|
||||||
|
<div className={classes["text-icon_row"]}>
|
||||||
|
{toast.icon && toast.icon}
|
||||||
|
<div className={classes["text-container"]}>
|
||||||
|
{this.getToastTitle(toast.title)}
|
||||||
|
{this.getToastText(toast.text)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* {toast.closable && <Cross className={classes["cross"]} onClick={this.onClose} />} */}
|
||||||
|
</div>
|
||||||
|
{toast.button}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override componentDidMount() {
|
||||||
|
if (this.props.toast.time === 0) return;
|
||||||
|
|
||||||
|
this.closeTimeout = window.setTimeout(() => {
|
||||||
|
this.close();
|
||||||
|
}, this.props.toast.time);
|
||||||
|
}
|
||||||
|
|
||||||
|
private getToastTitle(title: string | React.ReactNode) {
|
||||||
|
if (typeof title === "string") {
|
||||||
|
return (
|
||||||
|
<Typography typo={ITypo.P_16}>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return title;
|
||||||
|
}
|
||||||
|
|
||||||
|
private getToastText(text: React.ReactNode) {
|
||||||
|
if (typeof text === "string") {
|
||||||
|
return (
|
||||||
|
<div className={classes["text-container"]}>
|
||||||
|
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
|
||||||
|
{text}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
private onClose(e: React.MouseEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
private close() {
|
||||||
|
window.clearTimeout(this.closeTimeout);
|
||||||
|
this.setState({
|
||||||
|
willClose: true,
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
Toasts.getInstance().close(this.props.toast);
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
@import "@Themes/constants.scss";
|
||||||
|
|
||||||
|
.root {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
& > *:not(:first-child) {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 444px) {
|
||||||
|
width: unset;
|
||||||
|
left: 0;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import React from "react";
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
import ToastElement from "./ToastElement";
|
||||||
|
import classNames from "classnames";
|
||||||
|
import Toasts, { IToast } from "@Front/Stores/Toasts";
|
||||||
|
|
||||||
|
type IProps = {};
|
||||||
|
type IState = {
|
||||||
|
toastList: IToast[];
|
||||||
|
};
|
||||||
|
export default class ToastsContainer extends React.Component<IProps, IState> {
|
||||||
|
private removeOnChange = () => { };
|
||||||
|
|
||||||
|
public constructor(props: IProps) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
toastList: Toasts.getInstance().toasts,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.updateToasts = this.updateToasts.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override render(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className={classNames(classes["root"], this.state.toastList.length > 0 && classes["open"])}>
|
||||||
|
<>
|
||||||
|
{this.state.toastList.map((toast) => {
|
||||||
|
return <ToastElement toast={toast} key={toast.id} />;
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override componentDidMount() {
|
||||||
|
this.removeOnChange = Toasts.getInstance().onChange(this.updateToasts);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override componentWillUnmount() {
|
||||||
|
this.removeOnChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateToasts(toastList: IToast[]) {
|
||||||
|
this.setState({ toastList });
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ToastsContainer from "../ToastsContainer";
|
||||||
|
|
||||||
|
type IProps = {};
|
||||||
|
type IState = {};
|
||||||
|
|
||||||
|
export default class ToastHandler extends React.Component<IProps, IState> {
|
||||||
|
public override render(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<ToastsContainer />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -31,7 +31,7 @@ export enum ITypo {
|
|||||||
|
|
||||||
export enum ITypoColor {
|
export enum ITypoColor {
|
||||||
RE_HOVER = "re-hover",
|
RE_HOVER = "re-hover",
|
||||||
GREY = "grey"
|
GREY = "grey",
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Typography extends React.Component<IProps, IState> {
|
export default class Typography extends React.Component<IProps, IState> {
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
import BasePage from "@Front/Components/Layouts/Base";
|
||||||
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
|
||||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||||
import BasePage from "../Base";
|
|
||||||
import classes from "./classes.module.scss";
|
import classes from "./classes.module.scss";
|
||||||
|
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
|
||||||
|
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||||||
|
import Toasts, { IToast } from "@Front/Stores/Toasts";
|
||||||
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||||||
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
|
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
|
||||||
|
|
||||||
@ -54,7 +55,12 @@ export default class DesignSystem extends BasePage<IProps, IState> {
|
|||||||
<Button variant={EButtonVariant.GHOST}>Ghost</Button>
|
<Button variant={EButtonVariant.GHOST}>Ghost</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className={classes["section"]}>
|
||||||
|
<div className={classes["sub-section"]}>
|
||||||
|
<Typography typo={ITypo.H3}>Toaster component</Typography>
|
||||||
|
</div>
|
||||||
|
<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>Spawn a toast</Button>
|
||||||
|
</div>
|
||||||
<div className={classes["section"]}>
|
<div className={classes["section"]}>
|
||||||
<div className={classes["sub-section"]}>
|
<div className={classes["sub-section"]}>
|
||||||
<Typography typo={ITypo.H3}>Modal components</Typography>
|
<Typography typo={ITypo.H3}>Modal components</Typography>
|
||||||
@ -97,4 +103,10 @@ export default class DesignSystem extends BasePage<IProps, IState> {
|
|||||||
isModalDisplayed: false
|
isModalDisplayed: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private spawnToast() {
|
||||||
|
const toast: IToast = { title: "Un collaborateur veut rejoindre votre office", text: "12:00 - 1 fev 2023" }
|
||||||
|
Toasts.getInstance().open(toast)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,9 +8,7 @@ export default class Home extends BasePage {
|
|||||||
return (
|
return (
|
||||||
<DefaultTemplate title={"HomePage"}>
|
<DefaultTemplate title={"HomePage"}>
|
||||||
<div className={classes["root"]}>
|
<div className={classes["root"]}>
|
||||||
<div style={{ fontSize: "20px" }}>JDJADJIZDIAZN?DIAZ?</div>
|
<Typography typo={ITypo.H1}>HomePage</Typography>
|
||||||
<Typography typo={ITypo.H1}>COUCOU JE SUIS UNE TYPO</Typography>
|
|
||||||
<Typography typo={ITypo.H1Bis}>COUCOU JE SUIS UNE TYPO</Typography>
|
|
||||||
</div>
|
</div>
|
||||||
</DefaultTemplate>
|
</DefaultTemplate>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
// import UnpluggedIcon from "@Assets/icons/unplugged.svg"
|
|
||||||
// import Image from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
import classes from "./classes.module.scss";
|
|
||||||
import BasePage from "../Base";
|
|
||||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||||
|
import Link from "next/link";
|
||||||
|
import BasePage from "../Base";
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
|
||||||
export default class PageNotFound extends BasePage {
|
export default class PageNotFound extends BasePage {
|
||||||
public override render(): JSX.Element {
|
public override render(): JSX.Element {
|
||||||
|
|||||||
58
src/front/components/Materials/Header/index.tsx
Normal file
58
src/front/components/Materials/Header/index.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import React from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import TezosLinkLogo from "@Assets/link_logo.svg";
|
||||||
|
import Logo from "@Assets/logo.svg";
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
import Burger from "@Front/Components/Elements/Burger";
|
||||||
|
|
||||||
|
type IProps = {};
|
||||||
|
type IState = {
|
||||||
|
status: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class Header extends React.Component<IProps, IState> {
|
||||||
|
public constructor(props: IProps) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
status: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.switchStatus = this.switchStatus.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public override render(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={classes["root"]}>
|
||||||
|
<Burger state={this.state.status} callback={this.switchStatus} />
|
||||||
|
<div className={classes["menu"]}>
|
||||||
|
<Link href="/">
|
||||||
|
<Image alt="TEZOS LINK" src={TezosLinkLogo} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className={classes["triangle-under-logo"]}></div>
|
||||||
|
<div className={classes["logo"]}>
|
||||||
|
<Link href="/">
|
||||||
|
<Image alt="entire stack" src={Logo} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className={classes["button"]}>
|
||||||
|
<Link href="/show-project">
|
||||||
|
{/* <Button color="transparent" text="MY PROJECT" icon={LoginIcon} /> */}
|
||||||
|
</Link>
|
||||||
|
<Link href="/new-project">
|
||||||
|
{/* <Button text="CREATE" icon={PlusCardIcon} /> */}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private switchStatus() {
|
||||||
|
this.state.status
|
||||||
|
? this.setState({ status: false })
|
||||||
|
: this.setState({ status: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,10 +7,11 @@ $screen-s: 767px;
|
|||||||
|
|
||||||
$custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
|
$custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
|
||||||
// Colors
|
// Generic colors
|
||||||
$black: #000000;
|
$black: #000000;
|
||||||
$white: #ffffff;
|
$white: #ffffff;
|
||||||
|
|
||||||
|
// Flash colors
|
||||||
$green-flash: #12bf4d;
|
$green-flash: #12bf4d;
|
||||||
$blue-flash: #005176;
|
$blue-flash: #005176;
|
||||||
$turquoise-flash: #3fa79e;
|
$turquoise-flash: #3fa79e;
|
||||||
@ -22,8 +23,10 @@ $re-hover: #cc4c31;
|
|||||||
$pink-flash: #bd4b91;
|
$pink-flash: #bd4b91;
|
||||||
$pink-hover: #e34ba9;
|
$pink-hover: #e34ba9;
|
||||||
|
|
||||||
|
// Soft colors
|
||||||
$green-soft: #baf2cd;
|
$green-soft: #baf2cd;
|
||||||
$blue-soft: #a7c6d4;
|
$blue-soft: #a7c6d4;
|
||||||
|
$orange-soft: #FFDC99;
|
||||||
$turquoise-soft: #c3eae6;
|
$turquoise-soft: #c3eae6;
|
||||||
$purple-soft: #c5b2d4;
|
$purple-soft: #c5b2d4;
|
||||||
$orange-soft: #ffdc99;
|
$orange-soft: #ffdc99;
|
||||||
@ -36,4 +39,5 @@ $grey-soft: #f9f9f9;
|
|||||||
|
|
||||||
$modal-background: rgba(0, 0, 0, 0.44);
|
$modal-background: rgba(0, 0, 0, 0.44);
|
||||||
|
|
||||||
$shadow-neutral: 0px 8px 10px 0px #00000012;
|
$shadow-nav: 0px 8px 10px rgba(0, 0, 0, 0.07);
|
||||||
|
$shadow-tooltip: 0px 4px 24px rgba(0, 0, 0, 0.15);
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import PageNotFound from "@Front/Components/Layouts/PageNotFound";
|
import PageNotFound from "@Front/Components/Layouts/PageNotFound"
|
||||||
|
|
||||||
|
|
||||||
export default function Route() {
|
export default function Route() {
|
||||||
return <PageNotFound/>
|
return <PageNotFound/>
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import DesignSystem from "@Front/Components/Layouts/DesignSystem";
|
import DesignSystem from "@Front/Components/Layouts/DesignSystem";
|
||||||
|
|
||||||
|
|
||||||
export default function Route() {
|
export default function Route() {
|
||||||
return <DesignSystem />;
|
return <DesignSystem />;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
import Home from "@Front/Components/Layouts/Home";
|
import Home from "@Front/Components/Layouts/Home";
|
||||||
|
|
||||||
|
|
||||||
export default function Route() {
|
export default function Route() {
|
||||||
return <Home />;
|
return <Home />;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -40,9 +40,11 @@
|
|||||||
"paths": {
|
"paths": {
|
||||||
"@Api/*": ["src/api/*"],
|
"@Api/*": ["src/api/*"],
|
||||||
"@Front/*": ["src/front/*"],
|
"@Front/*": ["src/front/*"],
|
||||||
"@Assets/*": ["src/front/assets/*"],
|
"@Assets/*": ["src/front/Assets/*"],
|
||||||
"@Components/*": ["src/front/components/*"],
|
"@Components/*": ["src/front/Components/*"],
|
||||||
"@Themes/*": ["src/front/Themes/*"],
|
"@Themes/*": ["src/front/Themes/*"],
|
||||||
|
"@Stores/*": ["src/front/Stores/*"],
|
||||||
|
"@FrontServices/*": ["src/front/services/*"],
|
||||||
"@Page/*": ["src/pages/*"],
|
"@Page/*": ["src/pages/*"],
|
||||||
"@Services/*": ["src/common/services/*"],
|
"@Services/*": ["src/common/services/*"],
|
||||||
"@Entries/*": ["src/entries/*"],
|
"@Entries/*": ["src/entries/*"],
|
||||||
@ -50,7 +52,7 @@
|
|||||||
"@Config/*": ["src/common/config/*"],
|
"@Config/*": ["src/common/config/*"],
|
||||||
"@Entities/*": ["src/common/ressources/*"],
|
"@Entities/*": ["src/common/ressources/*"],
|
||||||
"@System/*": ["src/common/system/*"],
|
"@System/*": ["src/common/system/*"],
|
||||||
"@ControllerPattern/*": ["src/common/system/controller-pattern/*"],
|
"@ControllerPattern/*": ["src/common/system/controller-pattern/*"]
|
||||||
},
|
},
|
||||||
// "rootDirs": [],
|
// "rootDirs": [],
|
||||||
// "typeRoots": [],
|
// "typeRoots": [],
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user