Merge branch 'dev' into staging
This commit is contained in:
Maxime Lalo
commit
4d9aaf3349
@ -1,4 +1,4 @@
|
|||||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#013391"/>
|
<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#005BCB"/>
|
||||||
<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#013391"/>
|
<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#005BCB"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
@ -1,15 +1,15 @@
|
|||||||
<svg width="264" height="40" viewBox="0 0 264 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="264" height="40" viewBox="0 0 264 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M57.3379 32.3839H67.4132V36.3293H52.4526V6.53737H57.3379V32.3839Z" fill="#013391"/>
|
<path d="M57.3379 32.3839H67.4132V36.3293H52.4526V6.53737H57.3379V32.3839Z" fill="#005BCB"/>
|
||||||
<path d="M91.7161 26.3419H73.6726C73.8172 28.2268 74.5144 29.745 75.7744 30.8863C77.0293 32.0276 78.5734 32.6008 80.4015 32.6008C83.0301 32.6008 84.8892 31.5008 85.9736 29.3009H91.2462C90.5336 31.475 89.2374 33.2515 87.3679 34.6355C85.4985 36.0195 83.1747 36.7166 80.4015 36.7166C78.1448 36.7166 76.1204 36.2105 74.3336 35.1932C72.5469 34.181 71.1474 32.7506 70.1352 30.907C69.123 29.0634 68.6118 26.9306 68.6118 24.4983C68.6118 22.066 69.1024 19.9332 70.0887 18.0896C71.0751 16.246 72.4591 14.8258 74.2459 13.824C76.0327 12.8221 78.0828 12.3212 80.3963 12.3212C82.7099 12.3212 84.6103 12.8066 86.3558 13.7775C88.1012 14.7484 89.4543 16.1117 90.4303 17.8727C91.4011 19.6285 91.8866 21.6528 91.8866 23.9354C91.8866 24.8236 91.8298 25.6241 91.7161 26.3367V26.3419ZM86.7844 22.3965C86.7534 20.5942 86.1131 19.1534 84.8582 18.0689C83.5981 16.9844 82.0437 16.4422 80.1846 16.4422C78.4959 16.4422 77.0552 16.9793 75.8571 18.0483C74.659 19.1224 73.9412 20.5684 73.714 22.3965H86.7844Z" fill="#013391"/>
|
<path d="M91.7161 26.3419H73.6726C73.8172 28.2268 74.5144 29.745 75.7744 30.8863C77.0293 32.0276 78.5734 32.6008 80.4015 32.6008C83.0301 32.6008 84.8892 31.5008 85.9736 29.3009H91.2462C90.5336 31.475 89.2374 33.2515 87.3679 34.6355C85.4985 36.0195 83.1747 36.7166 80.4015 36.7166C78.1448 36.7166 76.1204 36.2105 74.3336 35.1932C72.5469 34.181 71.1474 32.7506 70.1352 30.907C69.123 29.0634 68.6118 26.9306 68.6118 24.4983C68.6118 22.066 69.1024 19.9332 70.0887 18.0896C71.0751 16.246 72.4591 14.8258 74.2459 13.824C76.0327 12.8221 78.0828 12.3212 80.3963 12.3212C82.7099 12.3212 84.6103 12.8066 86.3558 13.7775C88.1012 14.7484 89.4543 16.1117 90.4303 17.8727C91.4011 19.6285 91.8866 21.6528 91.8866 23.9354C91.8866 24.8236 91.8298 25.6241 91.7161 26.3367V26.3419ZM86.7844 22.3965C86.7534 20.5942 86.1131 19.1534 84.8582 18.0689C83.5981 16.9844 82.0437 16.4422 80.1846 16.4422C78.4959 16.4422 77.0552 16.9793 75.8571 18.0483C74.659 19.1224 73.9412 20.5684 73.714 22.3965H86.7844Z" fill="#005BCB"/>
|
||||||
<path d="M97.9488 13.5245C99.307 11.2109 101.151 9.40347 103.48 8.10211C105.809 6.80074 108.36 6.15006 111.133 6.15006C114.304 6.15006 117.128 6.92985 119.597 8.48425C122.071 10.0438 123.862 12.2489 124.978 15.1047H119.106C118.337 13.5348 117.263 12.3625 115.894 11.5879C114.526 10.8133 112.935 10.4311 111.138 10.4311C109.165 10.4311 107.41 10.8752 105.865 11.7583C104.321 12.6466 103.113 13.9169 102.245 15.5746C101.373 17.2323 100.939 19.1585 100.939 21.3585C100.939 23.5584 101.373 25.4898 102.245 27.1475C103.118 28.8052 104.327 30.0859 105.865 30.9844C107.404 31.883 109.165 32.3323 111.138 32.3323C112.94 32.3323 114.526 31.9449 115.894 31.1755C117.263 30.406 118.337 29.2338 119.106 27.6587H124.978C123.862 30.5145 122.071 32.7144 119.597 34.2585C117.123 35.8026 114.304 36.572 111.133 36.572C108.334 36.572 105.772 35.9213 103.459 34.62C101.145 33.3186 99.307 31.5112 97.9488 29.1976C96.5907 26.8841 95.9141 24.2659 95.9141 21.3533C95.9141 18.4407 96.5907 15.8225 97.9488 13.509V13.5245Z" fill="#013391"/>
|
<path d="M97.9488 13.5245C99.307 11.2109 101.151 9.40347 103.48 8.10211C105.809 6.80074 108.36 6.15006 111.133 6.15006C114.304 6.15006 117.128 6.92985 119.597 8.48425C122.071 10.0438 123.862 12.2489 124.978 15.1047H119.106C118.337 13.5348 117.263 12.3625 115.894 11.5879C114.526 10.8133 112.935 10.4311 111.138 10.4311C109.165 10.4311 107.41 10.8752 105.865 11.7583C104.321 12.6466 103.113 13.9169 102.245 15.5746C101.373 17.2323 100.939 19.1585 100.939 21.3585C100.939 23.5584 101.373 25.4898 102.245 27.1475C103.118 28.8052 104.327 30.0859 105.865 30.9844C107.404 31.883 109.165 32.3323 111.138 32.3323C112.94 32.3323 114.526 31.9449 115.894 31.1755C117.263 30.406 118.337 29.2338 119.106 27.6587H124.978C123.862 30.5145 122.071 32.7144 119.597 34.2585C117.123 35.8026 114.304 36.572 111.133 36.572C108.334 36.572 105.772 35.9213 103.459 34.62C101.145 33.3186 99.307 31.5112 97.9488 29.1976C96.5907 26.8841 95.9141 24.2659 95.9141 21.3533C95.9141 18.4407 96.5907 15.8225 97.9488 13.509V13.5245Z" fill="#005BCB"/>
|
||||||
<path d="M133.55 35.1932C131.748 34.181 130.333 32.7506 129.305 30.907C128.278 29.0634 127.761 26.9306 127.761 24.4983C127.761 22.066 128.288 19.9693 129.347 18.1102C130.405 16.2511 131.846 14.8258 133.674 13.824C135.502 12.8221 137.547 12.3212 139.804 12.3212C142.061 12.3212 144.106 12.8221 145.934 13.824C147.762 14.8258 149.208 16.2511 150.262 18.1102C151.32 19.9693 151.847 22.0969 151.847 24.4983C151.847 26.8996 151.305 29.0272 150.22 30.8863C149.136 32.7454 147.654 34.181 145.784 35.1932C143.915 36.2054 141.849 36.7166 139.592 36.7166C137.336 36.7166 135.347 36.2105 133.55 35.1932ZM143.125 31.568C144.225 30.9689 145.118 30.0652 145.805 28.8671C146.492 27.669 146.833 26.2076 146.833 24.4931C146.833 22.7786 146.502 21.3275 145.846 20.1449C145.19 18.9571 144.318 18.0637 143.233 17.4647C142.149 16.8657 140.976 16.5661 139.716 16.5661C138.456 16.5661 137.294 16.8657 136.225 17.4647C135.151 18.0637 134.304 18.9571 133.674 20.1449C133.044 21.3326 132.729 22.7786 132.729 24.4931C132.729 27.039 133.38 29.0014 134.681 30.3854C135.983 31.7694 137.62 32.4665 139.587 32.4665C140.842 32.4665 142.025 32.167 143.125 31.568Z" fill="#013391"/>
|
<path d="M133.55 35.1932C131.748 34.181 130.333 32.7506 129.305 30.907C128.278 29.0634 127.761 26.9306 127.761 24.4983C127.761 22.066 128.288 19.9693 129.347 18.1102C130.405 16.2511 131.846 14.8258 133.674 13.824C135.502 12.8221 137.547 12.3212 139.804 12.3212C142.061 12.3212 144.106 12.8221 145.934 13.824C147.762 14.8258 149.208 16.2511 150.262 18.1102C151.32 19.9693 151.847 22.0969 151.847 24.4983C151.847 26.8996 151.305 29.0272 150.22 30.8863C149.136 32.7454 147.654 34.181 145.784 35.1932C143.915 36.2054 141.849 36.7166 139.592 36.7166C137.336 36.7166 135.347 36.2105 133.55 35.1932ZM143.125 31.568C144.225 30.9689 145.118 30.0652 145.805 28.8671C146.492 27.669 146.833 26.2076 146.833 24.4931C146.833 22.7786 146.502 21.3275 145.846 20.1449C145.19 18.9571 144.318 18.0637 143.233 17.4647C142.149 16.8657 140.976 16.5661 139.716 16.5661C138.456 16.5661 137.294 16.8657 136.225 17.4647C135.151 18.0637 134.304 18.9571 133.674 20.1449C133.044 21.3326 132.729 22.7786 132.729 24.4931C132.729 27.039 133.38 29.0014 134.681 30.3854C135.983 31.7694 137.62 32.4665 139.587 32.4665C140.842 32.4665 142.025 32.167 143.125 31.568Z" fill="#005BCB"/>
|
||||||
<path d="M161.964 16.6952V36.3241H157.037V16.6952H154.254V12.7085H157.037V11.0353C157.037 8.319 157.76 6.34114 159.201 5.09658C160.642 3.85202 162.909 3.23232 165.997 3.23232V7.30683C164.51 7.30683 163.467 7.58569 162.868 8.14342C162.269 8.70115 161.969 9.66684 161.969 11.0353V12.7085H166.343V16.6952H161.964Z" fill="#013391"/>
|
<path d="M161.964 16.6952V36.3241H157.037V16.6952H154.254V12.7085H157.037V11.0353C157.037 8.319 157.76 6.34114 159.201 5.09658C160.642 3.85202 162.909 3.23232 165.997 3.23232V7.30683C164.51 7.30683 163.467 7.58569 162.868 8.14342C162.269 8.70115 161.969 9.66684 161.969 11.0353V12.7085H166.343V16.6952H161.964Z" fill="#005BCB"/>
|
||||||
<path d="M177.049 16.6952V36.3241H172.122V16.6952H169.339V12.7085H172.122V11.0353C172.122 8.319 172.845 6.34114 174.286 5.09658C175.727 3.85202 177.994 3.23232 181.082 3.23232V7.30683C179.595 7.30683 178.552 7.58569 177.953 8.14342C177.354 8.70115 177.054 9.66684 177.054 11.0353V12.7085H181.428V16.6952H177.049Z" fill="#013391"/>
|
<path d="M177.049 16.6952V36.3241H172.122V16.6952H169.339V12.7085H172.122V11.0353C172.122 8.319 172.845 6.34114 174.286 5.09658C175.727 3.85202 177.994 3.23232 181.082 3.23232V7.30683C179.595 7.30683 178.552 7.58569 177.953 8.14342C177.354 8.70115 177.054 9.66684 177.054 11.0353V12.7085H181.428V16.6952H177.049Z" fill="#005BCB"/>
|
||||||
<path d="M192.587 13.3334C193.775 12.662 195.18 12.3264 196.811 12.3264V17.3821H195.567C193.651 17.3821 192.205 17.8675 191.219 18.8384C190.232 19.8092 189.742 21.4979 189.742 23.894V36.3241H184.856V12.7085H189.742V16.1375C190.454 14.9394 191.405 13.9996 192.592 13.3282L192.587 13.3334Z" fill="#013391"/>
|
<path d="M192.587 13.3334C193.775 12.662 195.18 12.3264 196.811 12.3264V17.3821H195.567C193.651 17.3821 192.205 17.8675 191.219 18.8384C190.232 19.8092 189.742 21.4979 189.742 23.894V36.3241H184.856V12.7085H189.742V16.1375C190.454 14.9394 191.405 13.9996 192.592 13.3282L192.587 13.3334Z" fill="#005BCB"/>
|
||||||
<path d="M221.414 26.3419H203.37C203.515 28.2268 204.212 29.745 205.472 30.8863C206.727 32.0276 208.271 32.6008 210.099 32.6008C212.728 32.6008 214.587 31.5008 215.671 29.3009H220.944C220.231 31.475 218.935 33.2515 217.066 34.6355C215.196 36.0195 212.872 36.7166 210.099 36.7166C207.842 36.7166 205.818 36.2105 204.031 35.1932C202.244 34.181 200.845 32.7506 199.833 30.907C198.821 29.0634 198.309 26.9306 198.309 24.4983C198.309 22.066 198.8 19.9332 199.786 18.0896C200.773 16.246 202.157 14.8258 203.943 13.824C205.73 12.8221 207.78 12.3212 210.094 12.3212C212.408 12.3212 214.308 12.8066 216.053 13.7775C217.799 14.7484 219.152 16.1117 220.128 17.8727C221.099 19.6285 221.584 21.6528 221.584 23.9354C221.584 24.8236 221.527 25.6241 221.414 26.3367V26.3419ZM216.482 22.3965C216.451 20.5942 215.811 19.1534 214.556 18.0689C213.296 16.9844 211.741 16.4422 209.882 16.4422C208.194 16.4422 206.753 16.9793 205.555 18.0483C204.357 19.1224 203.639 20.5684 203.412 22.3965H216.482Z" fill="#013391"/>
|
<path d="M221.414 26.3419H203.37C203.515 28.2268 204.212 29.745 205.472 30.8863C206.727 32.0276 208.271 32.6008 210.099 32.6008C212.728 32.6008 214.587 31.5008 215.671 29.3009H220.944C220.231 31.475 218.935 33.2515 217.066 34.6355C215.196 36.0195 212.872 36.7166 210.099 36.7166C207.842 36.7166 205.818 36.2105 204.031 35.1932C202.244 34.181 200.845 32.7506 199.833 30.907C198.821 29.0634 198.309 26.9306 198.309 24.4983C198.309 22.066 198.8 19.9332 199.786 18.0896C200.773 16.246 202.157 14.8258 203.943 13.824C205.73 12.8221 207.78 12.3212 210.094 12.3212C212.408 12.3212 214.308 12.8066 216.053 13.7775C217.799 14.7484 219.152 16.1117 220.128 17.8727C221.099 19.6285 221.584 21.6528 221.584 23.9354C221.584 24.8236 221.527 25.6241 221.414 26.3367V26.3419ZM216.482 22.3965C216.451 20.5942 215.811 19.1534 214.556 18.0689C213.296 16.9844 211.741 16.4422 209.882 16.4422C208.194 16.4422 206.753 16.9793 205.555 18.0483C204.357 19.1224 203.639 20.5684 203.412 22.3965H216.482Z" fill="#005BCB"/>
|
||||||
<path d="M226.04 35.9833C225.725 35.6683 225.57 35.2707 225.57 34.7852C225.57 34.2998 225.725 33.9022 226.04 33.5871C226.355 33.2721 226.753 33.1172 227.238 33.1172C227.693 33.1172 228.08 33.2721 228.395 33.5871C228.71 33.9022 228.865 34.2998 228.865 34.7852C228.865 35.2707 228.71 35.6735 228.395 35.9833C228.08 36.2983 227.693 36.4533 227.238 36.4533C226.753 36.4533 226.35 36.2983 226.04 35.9833Z" fill="#013391"/>
|
<path d="M226.04 35.9833C225.725 35.6683 225.57 35.2707 225.57 34.7852C225.57 34.2998 225.725 33.9022 226.04 33.5871C226.355 33.2721 226.753 33.1172 227.238 33.1172C227.693 33.1172 228.08 33.2721 228.395 33.5871C228.71 33.9022 228.865 34.2998 228.865 34.7852C228.865 35.2707 228.71 35.6735 228.395 35.9833C228.08 36.2983 227.693 36.4533 227.238 36.4533C226.753 36.4533 226.35 36.2983 226.04 35.9833Z" fill="#005BCB"/>
|
||||||
<path d="M233.756 7.41528C233.441 7.11576 233.286 6.70779 233.286 6.19138C233.286 5.70595 233.441 5.30831 233.756 4.9933C234.071 4.67828 234.459 4.52336 234.913 4.52336C235.368 4.52336 235.755 4.67828 236.07 4.9933C236.385 5.30831 236.54 5.70595 236.54 6.19138C236.54 6.70779 236.385 7.11059 236.07 7.41528C235.755 7.7148 235.368 7.86456 234.913 7.86456C234.459 7.86456 234.071 7.7148 233.756 7.41528ZM235.858 13.0545V36.3293H233.927V13.0545H235.858Z" fill="#013391"/>
|
<path d="M233.756 7.41528C233.441 7.11576 233.286 6.70779 233.286 6.19138C233.286 5.70595 233.441 5.30831 233.756 4.9933C234.071 4.67828 234.459 4.52336 234.913 4.52336C235.368 4.52336 235.755 4.67828 236.07 4.9933C236.385 5.30831 236.54 5.70595 236.54 6.19138C236.54 6.70779 236.385 7.11059 236.07 7.41528C235.755 7.7148 235.368 7.86456 234.913 7.86456C234.459 7.86456 234.071 7.7148 233.756 7.41528ZM235.858 13.0545V36.3293H233.927V13.0545H235.858Z" fill="#005BCB"/>
|
||||||
<path d="M246.145 35.2139C244.399 34.243 243.036 32.8487 242.05 31.0361C241.063 29.2235 240.573 27.101 240.573 24.6687C240.573 22.2364 241.074 20.1604 242.07 18.3478C243.072 16.5352 244.451 15.146 246.207 14.1906C247.963 13.2353 249.93 12.755 252.099 12.755C254.268 12.755 256.23 13.2353 257.971 14.1906C259.716 15.146 261.079 16.5248 262.066 18.3271C263.052 20.1294 263.543 22.2415 263.543 24.6687C263.543 27.0958 263.042 29.2183 262.045 31.0361C261.043 32.8487 259.665 34.243 257.909 35.2139C256.153 36.1847 254.185 36.6701 252.016 36.6701C249.847 36.6701 247.885 36.1847 246.145 35.2139ZM256.752 33.8195C258.224 33.0604 259.401 31.914 260.289 30.3699C261.172 28.8258 261.617 26.9254 261.617 24.6687C261.617 22.412 261.172 20.5529 260.289 19.0088C259.401 17.4647 258.234 16.3183 256.773 15.5591C255.316 14.8 253.741 14.423 252.058 14.423C250.374 14.423 248.809 14.8 247.364 15.5591C245.923 16.3183 244.756 17.4647 243.873 19.0088C242.984 20.5529 242.545 22.4378 242.545 24.6687C242.545 26.8996 242.979 28.8258 243.852 30.3699C244.725 31.914 245.881 33.0656 247.322 33.8195C248.763 34.5787 250.328 34.9557 252.016 34.9557C253.705 34.9557 255.28 34.5787 256.752 33.8195Z" fill="#013391"/>
|
<path d="M246.145 35.2139C244.399 34.243 243.036 32.8487 242.05 31.0361C241.063 29.2235 240.573 27.101 240.573 24.6687C240.573 22.2364 241.074 20.1604 242.07 18.3478C243.072 16.5352 244.451 15.146 246.207 14.1906C247.963 13.2353 249.93 12.755 252.099 12.755C254.268 12.755 256.23 13.2353 257.971 14.1906C259.716 15.146 261.079 16.5248 262.066 18.3271C263.052 20.1294 263.543 22.2415 263.543 24.6687C263.543 27.0958 263.042 29.2183 262.045 31.0361C261.043 32.8487 259.665 34.243 257.909 35.2139C256.153 36.1847 254.185 36.6701 252.016 36.6701C249.847 36.6701 247.885 36.1847 246.145 35.2139ZM256.752 33.8195C258.224 33.0604 259.401 31.914 260.289 30.3699C261.172 28.8258 261.617 26.9254 261.617 24.6687C261.617 22.412 261.172 20.5529 260.289 19.0088C259.401 17.4647 258.234 16.3183 256.773 15.5591C255.316 14.8 253.741 14.423 252.058 14.423C250.374 14.423 248.809 14.8 247.364 15.5591C245.923 16.3183 244.756 17.4647 243.873 19.0088C242.984 20.5529 242.545 22.4378 242.545 24.6687C242.545 26.8996 242.979 28.8258 243.852 30.3699C244.725 31.914 245.881 33.0656 247.322 33.8195C248.763 34.5787 250.328 34.9557 252.016 34.9557C253.705 34.9557 255.28 34.5787 256.752 33.8195Z" fill="#005BCB"/>
|
||||||
<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#013391"/>
|
<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#005BCB"/>
|
||||||
<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#013391"/>
|
<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#005BCB"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
@ -27,10 +27,6 @@
|
|||||||
max-width: 270px;
|
max-width: 270px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
||||||
> :first-child {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
@import "@Themes/constants.scss";
|
@import "@Themes/constants.scss";
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
|
width: fit-content;
|
||||||
padding: 2px 8px;
|
padding: 2px 8px;
|
||||||
border-radius: 360px;
|
border-radius: 360px;
|
||||||
|
|
||||||
|
|||||||
@ -19,7 +19,7 @@ export enum ETagVariant {
|
|||||||
type IProps = {
|
type IProps = {
|
||||||
label: string;
|
label: string;
|
||||||
color: ETagColor;
|
color: ETagColor;
|
||||||
variant: ETagVariant;
|
variant?: ETagVariant;
|
||||||
className?: string;
|
className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -36,7 +36,7 @@ const typoMap: Record<ETagVariant, ETypo> = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default function Tag(props: IProps) {
|
export default function Tag(props: IProps) {
|
||||||
const { className, label, color, variant } = props;
|
const { className, label, color, variant = ETagVariant.REGULAR } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(classes["root"], className, classes[color])}>
|
<div className={classNames(classes["root"], className, classes[color])}>
|
||||||
|
|||||||
@ -8,6 +8,8 @@ type IProps = {
|
|||||||
color?: ETypoColor;
|
color?: ETypoColor;
|
||||||
className?: string;
|
className?: string;
|
||||||
title?: string;
|
title?: string;
|
||||||
|
type?: "div" | "span";
|
||||||
|
onClick?: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export enum ETypo {
|
export enum ETypo {
|
||||||
@ -142,12 +144,20 @@ export enum ETypoColor {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Typography(props: IProps) {
|
export default function Typography(props: IProps) {
|
||||||
const { typo, color, className, title, children } = props;
|
const { typo, color, className, title, children, type = "div", onClick } = props;
|
||||||
|
|
||||||
const style = color ? ({ "--data-color": `var(${color})` } as React.CSSProperties) : undefined;
|
const style = color ? ({ "--data-color": `var(${color})` } as React.CSSProperties) : undefined;
|
||||||
|
|
||||||
|
if (type === "span") {
|
||||||
|
return (
|
||||||
|
<span className={classNames(classes["root"], classes[typo], className)} style={style} title={title}>
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(classes["root"], classes[typo], className)} style={style} title={title}>
|
<div className={classNames(classes["root"], classes[typo], className)} style={style} title={title} onClick={onClick}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -0,0 +1,16 @@
|
|||||||
|
.root {
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 0.08px;
|
||||||
|
|
||||||
|
border-bottom: 1px solid var(--color-neutral-500);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&[data-is-selected="true"] {
|
||||||
|
border-bottom: 2px solid var(--color-neutral-950, #24282e);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom: 2px solid var(--color-neutral-950, #24282e);
|
||||||
|
}
|
||||||
|
}
|
||||||
34
src/front/Components/Elements/Tabs/HorizontalTab/index.tsx
Normal file
34
src/front/Components/Elements/Tabs/HorizontalTab/index.tsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { useCallback } from "react";
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||||
|
import useHoverable from "@Front/Hooks/useHoverable";
|
||||||
|
import { ITabValue } from "..";
|
||||||
|
export type ITab = {
|
||||||
|
label: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type IProps<T> = {
|
||||||
|
onSelect: (value: ITabValue<T>) => void;
|
||||||
|
value: ITabValue<T>;
|
||||||
|
isSelected: boolean;
|
||||||
|
} & ITab;
|
||||||
|
|
||||||
|
export default function HorizontalTabs<T>(props: IProps<T>) {
|
||||||
|
const onClick = useCallback(() => props.onSelect(props.value), [props]);
|
||||||
|
|
||||||
|
const { isHovered, handleMouseEnter, handleMouseLeave } = useHoverable();
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={classes["root"]}
|
||||||
|
onClick={onClick}
|
||||||
|
onMouseEnter={handleMouseEnter}
|
||||||
|
onMouseLeave={handleMouseLeave}
|
||||||
|
data-is-selected={props.isSelected}>
|
||||||
|
<Typography
|
||||||
|
typo={ETypo.TEXT_MD_SEMIBOLD}
|
||||||
|
color={isHovered || props.isSelected ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_700}>
|
||||||
|
{props.label}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
.root {
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 0.08px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
24
src/front/Components/Elements/Tabs/VerticalTabs/index.tsx
Normal file
24
src/front/Components/Elements/Tabs/VerticalTabs/index.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { useCallback } from "react";
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||||
|
import { ITabValue } from "..";
|
||||||
|
export type ITab = {
|
||||||
|
label: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type IProps<T> = {
|
||||||
|
onSelect: (value: ITabValue<T>) => void;
|
||||||
|
value: ITabValue<T>;
|
||||||
|
isSelected: boolean;
|
||||||
|
} & ITab;
|
||||||
|
|
||||||
|
export default function VerticalTabs<T>(props: IProps<T>) {
|
||||||
|
const onClick = useCallback(() => props.onSelect(props.value), [props]);
|
||||||
|
return (
|
||||||
|
<div className={classes["root"]} onClick={onClick}>
|
||||||
|
<Typography typo={ETypo.TEXT_LG_REGULAR} color={props.isSelected ? ETypoColor.COLOR_NEUTRAL_950 : ETypoColor.COLOR_NEUTRAL_700}>
|
||||||
|
{props.label}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
49
src/front/Components/Elements/Tabs/classes.module.scss
Normal file
49
src/front/Components/Elements/Tabs/classes.module.scss
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
.root {
|
||||||
|
.hidden-tester {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
background: red;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.horizontal-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
.horizontal-tab {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.show-more-container {
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid var(--color-neutral-500);
|
||||||
|
.show-more {
|
||||||
|
padding: 8px 16px;
|
||||||
|
display: flex;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-container {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
top: 50px;
|
||||||
|
padding: var(--spacing-05, 4px) var(--spacing-2, 16px);
|
||||||
|
background: var(--color-generic-white, #fff);
|
||||||
|
|
||||||
|
border: 1px solid var(--menu-border, #d7dce0);
|
||||||
|
border-radius: var(--menu-radius, 0px);
|
||||||
|
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
&[data-visible="false"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
119
src/front/Components/Elements/Tabs/index.tsx
Normal file
119
src/front/Components/Elements/Tabs/index.tsx
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import { useCallback, useEffect, useRef, useState } from "react";
|
||||||
|
import classes from "./classes.module.scss";
|
||||||
|
import HorizontalTab, { ITab } from "./HorizontalTab";
|
||||||
|
import VerticalTabs from "./VerticalTabs";
|
||||||
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||||
|
import { useDebounce, useWindowSize } from "@uidotdev/usehooks";
|
||||||
|
import useOpenable from "@Front/Hooks/useOpenable";
|
||||||
|
|
||||||
|
export type ITabValue<T> = T & {
|
||||||
|
id: unknown;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ITabInternal<T> = ITab & {
|
||||||
|
key?: string;
|
||||||
|
value: ITabValue<T>;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IProps<T> = {
|
||||||
|
tabs: ITabInternal<T>[];
|
||||||
|
onSelect: (value: T) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Tabs<T>(props: IProps<T>) {
|
||||||
|
const { onSelect } = props;
|
||||||
|
const rootRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [visibleElements, setVisibleElements] = useState<ITabInternal<T>[]>([]);
|
||||||
|
const [overflowedElements, setOverflowedElements] = useState<ITabInternal<T>[]>([]);
|
||||||
|
|
||||||
|
const [selectedTab, setSelectedTab] = useState<ITabValue<T>>(props.tabs[0]!.value);
|
||||||
|
|
||||||
|
const { close, isOpen, toggle } = useOpenable();
|
||||||
|
|
||||||
|
const windowSize = useWindowSize();
|
||||||
|
const windowSizeDebounced = useDebounce(windowSize, 100);
|
||||||
|
|
||||||
|
const calculateVisibleElements = useCallback(() => {
|
||||||
|
const container = rootRef.current;
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const containerWidth = container.offsetWidth;
|
||||||
|
let totalWidth = 115;
|
||||||
|
let visibleCount = 0;
|
||||||
|
|
||||||
|
const children = Array.from(container.children) as HTMLDivElement[];
|
||||||
|
for (let i = 0; i < children.length; i++) {
|
||||||
|
totalWidth += children[i]!.offsetWidth;
|
||||||
|
if (totalWidth > containerWidth) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
visibleCount++;
|
||||||
|
}
|
||||||
|
|
||||||
|
setVisibleElements(props.tabs.slice(0, visibleCount));
|
||||||
|
setOverflowedElements(props.tabs.slice(visibleCount));
|
||||||
|
}, [props.tabs]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
calculateVisibleElements();
|
||||||
|
}, [calculateVisibleElements, windowSizeDebounced]);
|
||||||
|
|
||||||
|
const handleSelect = useCallback(
|
||||||
|
(value: ITabValue<T>) => {
|
||||||
|
setSelectedTab(value);
|
||||||
|
onSelect(value);
|
||||||
|
close();
|
||||||
|
},
|
||||||
|
[close, onSelect],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes["root"]}>
|
||||||
|
<div className={classes["hidden-tester"]} ref={rootRef}>
|
||||||
|
{props.tabs.map((element, index) => (
|
||||||
|
<HorizontalTab<T>
|
||||||
|
label={element.label}
|
||||||
|
key={element.key ?? index}
|
||||||
|
value={element.value}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
isSelected={element.value.id === selectedTab.id}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className={classes["horizontal-container"]}>
|
||||||
|
<div className={classes["horizontal-tab"]}>
|
||||||
|
{visibleElements.map((element, index) => (
|
||||||
|
<HorizontalTab<T>
|
||||||
|
label={element.label}
|
||||||
|
key={element.key ?? index}
|
||||||
|
value={element.value}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
isSelected={element.value.id === selectedTab.id}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{overflowedElements.length > 0 && (
|
||||||
|
<div className={classes["show-more-container"]}>
|
||||||
|
<div className={classes["show-more"]} onClick={toggle}>
|
||||||
|
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_NEUTRAL_500}>
|
||||||
|
{overflowedElements.length} de plus...
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className={classes["vertical-container"]} data-visible={isOpen}>
|
||||||
|
{overflowedElements.length > 0 &&
|
||||||
|
overflowedElements.map((element, index) => (
|
||||||
|
<VerticalTabs<T>
|
||||||
|
label={element.label}
|
||||||
|
key={element.key ?? index}
|
||||||
|
value={element.value}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
isSelected={selectedTab === element.value}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -7,13 +7,58 @@ import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
|
|||||||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||||||
|
|
||||||
import classes from "./classes.module.scss";
|
import classes from "./classes.module.scss";
|
||||||
|
import Tabs from "@Front/Components/Elements/Tabs";
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
|
||||||
export default function DesignSystem() {
|
export default function DesignSystem() {
|
||||||
|
const userDb = [
|
||||||
|
{
|
||||||
|
username: "Maxime",
|
||||||
|
id: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
username: "Vincent",
|
||||||
|
id: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
username: "Massi",
|
||||||
|
id: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
username: "Maxime",
|
||||||
|
id: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
username: "Arnaud",
|
||||||
|
id: 5,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const [selectedTab, setSelectedTab] = useState<(typeof userDb)[number]>(userDb[0]!);
|
||||||
|
|
||||||
|
const onSelect = useCallback((value: (typeof userDb)[number]) => {
|
||||||
|
setSelectedTab(value);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultTemplate title={"DesignSystem"}>
|
<DefaultTemplate title={"DesignSystem"}>
|
||||||
|
<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
|
||||||
<Newsletter isOpen />
|
<Newsletter isOpen />
|
||||||
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
|
||||||
|
<Tabs<(typeof userDb)[number]>
|
||||||
|
tabs={userDb.map((user) => ({
|
||||||
|
label: user.username,
|
||||||
|
key: user.id.toString(),
|
||||||
|
value: user,
|
||||||
|
}))}
|
||||||
|
onSelect={onSelect}
|
||||||
|
/>
|
||||||
|
<div className={classes["tab-content"]}>
|
||||||
|
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
||||||
|
{selectedTab.id} - {selectedTab.username}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
<div className={classes["root"]}>
|
<div className={classes["root"]}>
|
||||||
<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
|
|
||||||
<div className={classes["components"]}>
|
<div className={classes["components"]}>
|
||||||
<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
|
||||||
<div className={classes["rows"]}>
|
<div className={classes["rows"]}>
|
||||||
@ -83,48 +128,48 @@ export default function DesignSystem() {
|
|||||||
|
|
||||||
<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
|
||||||
<div className={classes["rows"]}>
|
<div className={classes["rows"]}>
|
||||||
<Button variant={EButtonVariant.PRIMARY}>PRIMARY</Button>
|
<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
|
||||||
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
|
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
|
||||||
PRIMARY
|
Primary
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
|
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
|
||||||
PRIMARY
|
Primary
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes["rows"]}>
|
<div className={classes["rows"]}>
|
||||||
<Button variant={EButtonVariant.SECONDARY}>SECONDARY</Button>
|
<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
|
||||||
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
|
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
|
||||||
SECONDARY
|
Secondary
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
|
<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
|
||||||
SECONDARY
|
Secondary
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes["rows"]}>
|
<div className={classes["rows"]}>
|
||||||
<Button variant={EButtonVariant.NEUTRAL}>NEUTRAL</Button>
|
<Button variant={EButtonVariant.NEUTRAL}>Neutral</Button>
|
||||||
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
|
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
|
||||||
NEUTRAL
|
Neutral
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
|
<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
|
||||||
NEUTRAL
|
Neutral
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes["rows"]}>
|
<div className={classes["rows"]}>
|
||||||
<Button variant={EButtonVariant.ERROR}>ERROR</Button>
|
<Button variant={EButtonVariant.ERROR}>Error</Button>
|
||||||
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
|
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
|
||||||
ERROR
|
Error
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
|
<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
|
||||||
ERROR
|
Error
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes["rows"]}>
|
<div className={classes["rows"]}>
|
||||||
<Button variant={EButtonVariant.WARNING}>WARNING</Button>
|
<Button variant={EButtonVariant.WARNING}>Warning</Button>
|
||||||
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
|
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
|
||||||
WARNING
|
Warning
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
|
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
|
||||||
WARNING
|
Warning
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes["rows"]}>
|
<div className={classes["rows"]}>
|
||||||
|
|||||||
@ -1,5 +1,55 @@
|
|||||||
@import "@Themes/constants.scss";
|
@import "@Themes/constants.scss";
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
}
|
.content {
|
||||||
|
display: flex;
|
||||||
|
width: 648px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-2xl, 40px);
|
||||||
|
|
||||||
|
.title-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-md, 16px);
|
||||||
|
align-self: stretch;
|
||||||
|
|
||||||
|
.logo{
|
||||||
|
fill: "red"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-folder {
|
||||||
|
display: flex;
|
||||||
|
padding: var(--spacing-xl, 32px) var(--spacing-lg, 24px);
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-lg, 24px);
|
||||||
|
align-self: stretch;
|
||||||
|
|
||||||
|
border-radius: var(--radius-rounded, 16px);
|
||||||
|
background: var(--background-primary, #fff);
|
||||||
|
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
stroke: var(--primary-default-base);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-container {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-lg, 24px);
|
||||||
|
|
||||||
|
.box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-sm, 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
background-color: var(--separator-stroke-light);
|
||||||
|
width: 1px;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,20 +1,77 @@
|
|||||||
|
import LogoIcon from "@Assets/logo_small_blue.svg";
|
||||||
|
import Button, { EButtonVariant, EButtonStyleType } from "@Front/Components/DesignSystem/Button";
|
||||||
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
||||||
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
||||||
|
import { DocumentIcon } from "@heroicons/react/24/outline";
|
||||||
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
import classes from "./classes.module.scss";
|
import classes from "./classes.module.scss";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Module from "@Front/Config/Module";
|
||||||
|
|
||||||
export default function Folder() {
|
export default function Folder() {
|
||||||
const [_selectedFolder, setSelectedFolder] = useState<OfficeFolder | null>(null);
|
const [_folder, setFolder] = useState<OfficeFolder | null>(null);
|
||||||
const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
|
const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
|
||||||
|
|
||||||
const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
|
const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
|
||||||
setSelectedFolder(folder);
|
setFolder(folder);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={onSelectedFolder} mobileBackText={"Liste des dossiers"}>
|
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={onSelectedFolder} mobileBackText={"Liste des dossiers"}>
|
||||||
<div className={classes["root"]}></div>
|
<div className={classes["root"]}>
|
||||||
|
<div className={classes["content"]}>
|
||||||
|
<div className={classes["title-container"]}>
|
||||||
|
<Image src={LogoIcon} alt="logo" />
|
||||||
|
|
||||||
|
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.COLOR_PRIMARY_500}>
|
||||||
|
Bonjour John, bienvenue sur LeCoffre.io
|
||||||
|
</Typography>
|
||||||
|
<Typography typo={ETypo.TEXT_LG_REGULAR}>
|
||||||
|
Commencez par créer votre{" "}
|
||||||
|
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} type="span">
|
||||||
|
premier dossier
|
||||||
|
</Typography>{" "}
|
||||||
|
pour profiter de toutes les fonctionnalités de notre plateforme sécurisée.
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={classes["no-folder"]}>
|
||||||
|
<DocumentIcon width={32} />
|
||||||
|
<div className={classes["text-container"]}>
|
||||||
|
<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>Aucun dossier créé</Typography>
|
||||||
|
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
||||||
|
Vous n'avez pas encore de dossier créé. En quelques clics, commencez un nouveau dossier pour organiser et
|
||||||
|
sécuriser vos documents notariés.
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<Link href={Module.getInstance().get().modules.pages.Folder.pages.CreateFolder.props.path}>
|
||||||
|
<Button variant={EButtonVariant.INFO}>Créer votre premier dossier</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={classes["help-container"]}>
|
||||||
|
<div className={classes["box"]}>
|
||||||
|
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography>
|
||||||
|
<Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography>
|
||||||
|
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
|
||||||
|
Accéder aux guides
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className={classes["separator"]} />
|
||||||
|
|
||||||
|
<div className={classes["box"]}>
|
||||||
|
<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>
|
||||||
|
<Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est là pour vous aider.</Typography>
|
||||||
|
<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
|
||||||
|
Contactez le support
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</DefaultNotaryDashboard>
|
</DefaultNotaryDashboard>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,7 +16,7 @@ export default function SubscriptionClientInfos(props: IProps) {
|
|||||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
||||||
{customer.email}
|
{customer.email}
|
||||||
</Typography>
|
</Typography>
|
||||||
{/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
|
{/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
||||||
Adresse de facturation
|
Adresse de facturation
|
||||||
</Typography> */}
|
</Typography> */}
|
||||||
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user