New Frontend Preps
This commit is contained in:
root
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>devto</title>
|
||||||
|
<g id="devto" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g transform="translate(15.000000, 17.000000)" fill="#000000" fill-rule="nonzero" id="Shape">
|
||||||
|
<path d="M28.689375,42.1049777 C27.7626786,41.4123437 26.8335937,41.0660268 25.9068973,41.0660268 L21.7415402,41.0660268 L21.7415402,66.017567 L25.9092857,66.017567 C26.8359821,66.017567 27.765067,65.67125 28.6917634,64.9786161 C29.6184598,64.2859821 30.081808,63.2470312 30.081808,61.859375 L30.081808,45.2242187 C30.0794196,43.8389509 29.613683,42.7976116 28.689375,42.1049777 L28.689375,42.1049777 Z M96.5149554,0 L10.4850446,0 C4.70513393,0 0.0143303571,4.67886161 0,10.4611607 L0,96.5388393 C0.0143303571,102.321138 4.70513393,107 10.4850446,107 L96.5149554,107 C102.297254,107 106.98567,102.321138 107,96.5388393 L107,10.4611607 C106.98567,4.67886161 102.294866,0 96.5149554,0 L96.5149554,0 Z M36.8290179,61.9047545 C36.8290179,66.3973214 34.0560937,73.2042411 25.27875,73.1899333 L14.1966071,73.1899333 L14.1966071,33.6715625 L25.5128125,33.6715625 C33.9772768,33.6715625 36.8242411,40.4689286 36.8266295,44.9638839 L36.8290179,61.9047545 Z M60.8753571,40.7292634 L48.15,40.7292634 L48.15,49.9054687 L55.9289955,49.9054687 L55.9289955,56.9679464 L48.15,56.9679464 L48.15,66.1417634 L60.8777455,66.1417634 L60.8777455,73.2042411 L46.0267187,73.2042411 C43.3612723,73.2735045 41.1448437,71.166942 41.0779687,68.5014955 L41.0779687,38.6203125 C41.0134821,35.9572545 43.122433,33.7456027 45.7854911,33.6787277 L60.8777455,33.6787277 L60.8753571,40.7292634 Z M85.6286607,68.2650446 C82.4759821,75.6093527 76.827433,74.1476562 74.298125,68.2650446 L65.0956473,33.6811161 L72.8746429,33.6811161 L79.970558,60.8419196 L87.0330357,33.6811161 L94.8144196,33.6811161 L85.6286607,68.2650446 Z"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 809 B |
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>github</title>
|
||||||
|
<g id="github" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="github-icon-1" transform="translate(15.000000, 19.000000)" fill="#161614" fill-rule="nonzero">
|
||||||
|
<path d="M53.0002078,0 C23.7327702,0 0,23.6406273 0,52.8036819 C0,76.1341256 15.1861464,95.9270685 36.2449012,102.909305 C38.8935606,103.397979 39.8662322,101.763821 39.8662322,100.36903 C39.8662322,99.1100738 39.8167673,94.9501351 39.794321,90.5379911 C25.0492022,93.732178 21.9379002,84.3078151 21.9379002,84.3078151 C19.5270049,78.2043629 16.0532373,76.5818005 16.0532373,76.5818005 C11.2447482,73.3043734 16.415703,73.3714625 16.415703,73.3714625 C21.7379622,73.7441798 24.5404201,78.8131345 24.5404201,78.8131345 C29.2674376,86.8857761 36.9390727,84.5517378 39.9634993,83.2029155 C40.4390276,79.7896537 41.8128223,77.4605849 43.328361,76.1419941 C31.5565411,74.806424 19.1811662,70.2787376 19.1811662,50.0459884 C19.1811662,44.2812948 21.2516264,39.5705628 24.6422597,35.8727935 C24.0919105,34.542607 22.2779196,29.1721655 25.1556141,21.8987953 C25.1556141,21.8987953 29.60621,20.4795708 39.7344643,27.3114781 C43.9618445,26.141146 48.4959903,25.5547375 53.0002078,25.5348592 C57.5044253,25.5547375 62.0418966,26.141146 66.2775902,27.3114781 C76.39379,20.4795708 80.8381508,21.8987953 80.8381508,21.8987953 C83.7229117,29.1721655 81.9080895,34.542607 81.3577403,35.8727935 C84.7558557,39.5705628 86.8121831,44.2808807 86.8121831,50.0459884 C86.8121831,70.3267767 74.4135305,74.7927577 62.6117823,76.0997528 C64.5126486,77.7384664 66.2065104,80.9521174 66.2065104,85.8781971 C66.2065104,92.9432598 66.144991,98.6296827 66.144991,100.36903 C66.144991,101.774174 67.0989573,103.420756 69.7858585,102.902265 C90.8329745,95.9121598 106,76.1262572 106,52.8036819 C106,23.6406273 82.2705552,0 53.0002078,0" id="Path"></path>
|
||||||
|
<path d="M19.3815873,74.9620202 C19.268311,75.243666 18.8645619,75.3282042 18.4976277,75.1351011 C18.1234113,74.9500069 17.913041,74.5655804 18.0344085,74.2825998 C18.145662,73.9925001 18.5494111,73.9115214 18.9228183,74.1064043 C19.2978438,74.2910536 19.5114505,74.6790396 19.3815873,74.9620202 M21.9189764,77.4518937 C21.673005,77.7028388 21.1919853,77.586265 20.8655068,77.1898252 C20.5281053,76.7942752 20.4649942,76.2656888 20.7146066,76.0107393 C20.9682646,75.7602391 21.4347202,75.8772578 21.7729309,76.2732527 C22.1103324,76.6732521 22.1758708,77.1987239 21.9185718,77.4523386 M23.6597903,80.6376503 C23.3434258,80.8792517 22.8264004,80.6527782 22.507204,80.1482184 C22.1912441,79.6441036 22.1912441,79.0389878 22.5140815,78.7964966 C22.8344916,78.5540053 23.3434258,78.772025 23.6670724,79.2725803 C23.9826278,79.7855939 23.9826278,80.3907097 23.6593858,80.6380953 M26.6033558,84.3275218 C26.3205697,84.6701241 25.718587,84.5784669 25.2776186,84.110392 C24.8269408,83.6529957 24.7011232,83.003831 24.9847185,82.6607837 C25.2707411,82.3172916 25.8763647,82.4138431 26.3205697,82.8779135 C26.7684156,83.33442 26.9051563,83.988479 26.6037604,84.3275218 M30.4078212,85.5733484 C30.2836218,86.0173966 29.7034854,86.2193985 29.1193033,86.0307447 C28.5359304,85.8363068 28.1540274,85.3157292 28.2717539,84.8667867 C28.3931213,84.419624 28.9756851,84.2091683 29.5643173,84.4111701 C30.1468811,84.6047182 30.5295932,85.1212913 30.4082257,85.5733484 M34.7382122,86.1014899 C34.7527763,86.5695647 34.2571925,86.9575508 33.6438823,86.9660046 C33.026931,86.9806875 32.5281107,86.6020452 32.5216378,86.1419793 C32.5216378,85.669455 33.005894,85.2850285 33.6224407,85.2739051 C34.2357509,85.2605569 34.7382122,85.6365296 34.7382122,86.1014899 M38.9917372,85.9221798 C39.0653668,86.3786863 38.6389624,86.847651 38.0301023,86.9722337 C37.4313562,87.092367 36.8771114,86.8107212 36.8006499,86.3582192 C36.7262112,85.8901443 37.1607067,85.4216245 37.7582392,85.3001564 C38.368313,85.1835826 38.914062,85.4581094 38.9917372,85.9221798" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<defs>
|
||||||
|
<radialGradient cx="50.0135415%" cy="54.714503%" fx="50.0135415%" fy="54.714503%" r="71.9292757%" gradientTransform="translate(0.500135,0.547145),scale(0.921739,1.000000),translate(-0.500135,-0.547145)" id="radialGradient-1">
|
||||||
|
<stop stop-color="#FFB900" offset="0%"></stop>
|
||||||
|
<stop stop-color="#F95D8F" offset="60%"></stop>
|
||||||
|
<stop stop-color="#F95353" offset="99.9%"></stop>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="asana-logo" transform="translate(31.000000, 22.000000)" fill="url(#radialGradient-1)" fill-rule="nonzero">
|
||||||
|
<path d="M89.9906921,56.1170331 C76.175985,56.1170331 64.97895,67.282887 64.97895,81.056696 C64.97895,94.8318401 76.175985,106 89.9906921,106 C103.803087,106 115,94.8318401 115,81.056696 C115,67.282887 103.803087,56.1170331 89.9906921,56.1170331 Z M25.010525,56.1182468 C11.1981304,56.1194604 0,67.282887 0,81.0579097 C0,94.8318401 11.1981304,105.998786 25.010525,105.998786 C38.824015,105.998786 50.0222671,94.8318401 50.0222671,81.0579097 C50.0222671,67.2827656 38.824015,56.1182468 25.0093079,56.1182468 L25.010525,56.1182468 L25.010525,56.1182468 Z M82.5105859,24.9408766 C82.5105859,38.714807 71.3136726,49.8841806 57.5012779,49.8841806 C43.6865709,49.8841806 32.4895359,38.714807 32.4895359,24.9408766 C32.4895359,11.1669462 43.6865709,0 57.5011562,0 C71.3135508,0 82.5093688,11.1669462 82.5093688,24.9408766 L82.5105859,24.9408766 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="80.5250892%" y1="15.6897142%" x2="43.803046%" y2="97.3483651%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#0052CC" offset="0%"></stop>
|
||||||
|
<stop stop-color="#2684FF" offset="92%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="atlassian-1" transform="translate(35.000000, 21.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M32.2177437,50.2228454 C31.1791646,48.8591721 29.2398559,48.5964284 27.8794818,49.635084 C27.4950585,49.9399792 27.1849667,50.3291598 26.9728674,50.7729298 L0.336388365,104.364716 C-0.449192603,105.946205 0.18801967,107.868741 1.75999765,108.659896 C2.20126182,108.88437 2.68910685,109 3.18360694,108.998989 L40.2948533,108.998989 C41.5095132,109.030231 42.627261,108.335051 43.1420719,107.228169 C51.1517473,90.5899995 46.2964903,65.2936515 32.2177437,50.2228454 Z" id="Path" fill="url(#linearGradient-1)"></path>
|
||||||
|
<path d="M51.4733618,1.73446471 C37.8211056,22.5862851 36.24436,49.0339597 47.3237511,71.3383072 L65.4063614,107.233778 C65.9512026,108.315801 67.0651049,109 68.2838287,109 L105.781771,109 C106.635913,109.001993 107.455652,108.666103 108.059623,108.066637 C108.663594,107.467171 109.002008,106.653546 109,105.805775 C109,105.310759 108.886342,104.822253 108.666811,104.377773 L56.948122,1.71943311 C56.4470574,0.669442923 55.3812876,0 54.2107419,0 C53.0401961,0 51.9744264,0.669442923 51.4733618,1.71943311 L51.4733618,1.73446471 Z" id="Path" fill="#2684FF"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="invision" transform="translate(36.000000, 22.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M96.3908516,0 L9.60914844,0 C4.30210938,0 0,4.30210938 0,9.60914844 L0,96.3908516 C0,101.697891 4.30210938,106 9.60914844,106 L96.3908516,106 C101.697891,106 106,101.697891 106,96.3908516 L106,9.60914844 C106,4.30210938 101.697891,0 96.3908516,0" id="Path" fill="#DC395F"></path>
|
||||||
|
<path d="M35.8726639,33.7452625 C39.3481912,33.7452625 42.2597111,30.9866909 42.2597111,27.3711837 C42.2597111,23.758158 39.3481912,21 35.8726639,21 C32.3971366,21 29.4864335,23.758158 29.4864335,27.3711837 C29.4864335,30.9862773 32.3971366,33.7452625 35.8726639,33.7452625 M22.6297204,67.8737974 C22.2543961,69.4908911 22.0661214,71.2370214 22.0661214,72.6613873 C22.0661214,78.2740672 25.0715744,82 31.4586217,82 C36.7556357,82 41.0500152,78.8146149 44.1420502,73.6709335 L42.2539935,81.3440638 L52.7724666,81.3440638 L58.7841895,56.9267762 C60.2871203,50.744598 63.1986402,47.535639 67.6134992,47.535639 C71.0886182,47.535639 73.2486727,49.7242988 73.2486727,53.3373245 C73.2486727,54.3840928 73.1547395,55.52433 72.7790068,56.7613446 L69.6792122,67.9846366 C69.2095463,69.6017303 69.0224968,71.2196511 69.0224968,72.7403809 C69.0224968,78.0685185 72.1210662,81.9656729 78.6020466,81.9656729 C84.1436953,81.9656729 88.5577376,78.3530608 91,69.697267 L86.8677573,68.0818276 C84.8012275,73.8806181 83.0164973,74.9290407 81.6074997,74.9290407 C80.1985021,74.9290407 79.4470368,73.9786363 79.4470368,72.0774138 C79.4470368,71.2213054 79.6357199,70.2713146 79.9167026,69.1273552 L82.9229725,58.1931549 C83.6740295,55.6256568 83.9562374,53.3489047 83.9562374,51.2570224 C83.9562374,43.0772579 79.0717125,38.808296 73.1547395,38.808296 C67.6134992,38.808296 61.977509,43.8700887 59.1603306,49.1973992 L61.2260436,39.6354539 L45.1659218,39.6354539 L42.9115257,48.0575756 L50.4257709,48.0575756 L45.7985412,66.8175168 C42.1649611,74.9972812 35.4903967,75.1300401 34.6527579,74.9402073 C33.2772495,74.6258873 32.397545,74.0969199 32.397545,72.2870984 C32.397545,71.2428115 32.5854113,69.7427607 33.0550772,67.9341799 L40.100065,39.6354539 L22.2543961,39.6354539 L20,48.0575756 L27.4194953,48.0575756 L22.6301288,67.8737974" id="Shape" fill="#FFFFFF"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,21 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="67.9273487%" y1="40.3110476%" x2="40.6754218%" y2="81.641044%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#0052CC" offset="18%"></stop>
|
||||||
|
<stop stop-color="#2684FF" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient x1="32.3045012%" y1="-23.3247078%" x2="59.5183684%" y2="17.8549121%" id="linearGradient-2">
|
||||||
|
<stop stop-color="#0052CC" offset="18%"></stop>
|
||||||
|
<stop stop-color="#2684FF" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="jira-3" transform="translate(35.000000, 21.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M105.705696,51.9209821 L58.1065074,4.58660714 L53.4942403,0 L17.6627523,35.6321429 L1.27784635,51.9209821 C-0.425948784,53.6240313 -0.425948784,56.3759687 1.27784635,58.0790179 L34.0130909,90.6321429 L53.4942403,110 L89.3207902,74.3678571 L89.8788054,73.8178571 L105.705696,58.1035714 C106.534097,57.2858004 107,56.173045 107,55.0122768 C107,53.8515086 106.534097,52.7387531 105.705696,51.9209821 Z M53.4942403,71.2642857 L37.1389635,55 L53.4942403,38.7357143 L69.8445789,55 L53.4942403,71.2642857 Z" id="Shape" fill="#2684FF"></path>
|
||||||
|
<path d="M53,38.6445299 C42.2639805,27.9872611 42.2108919,10.7221586 52.8811718,0 L17,35.6113693 L36.5274378,55 L53,38.6445299 Z" id="Path" fill="url(#linearGradient-1)"></path>
|
||||||
|
<path d="M69.446952,55 L53,71.2982957 C63.7858387,81.9863246 63.7858387,99.3119711 53,110 L89,74.3557598 L69.446952,55 Z" id="Path" fill="url(#linearGradient-2)"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="slack-new-logo" transform="translate(35.000000, 22.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M39.2803996,-1.77635684e-15 C33.3581411,0.00436871997 28.5651823,4.80122324 28.5695565,10.7121014 C28.5651823,16.6229795 33.3625182,21.419834 39.2847767,21.4242027 L49.999997,21.4242027 L49.999997,10.7164701 C50.0043711,4.80559196 45.2070353,0.00873743993 39.2803996,-1.77635684e-15 C39.2847767,-1.77635684e-15 39.2847767,-1.77635684e-15 39.2803996,-1.77635684e-15 M39.2803996,28.5714286 L10.7152412,28.5714286 C4.7929826,28.5757973 -0.00435323957,33.3726518 1.19295144e-05,39.2835299 C-0.0087303708,45.194408 4.78860547,49.9912626 10.710864,50 L39.2803996,50 C45.2026582,49.9956313 49.999994,45.1987768 49.9956199,39.2878986 C49.999994,33.3726518 45.2026582,28.5757973 39.2803996,28.5714286 Z" id="Shape" fill="#36C5F0"></path>
|
||||||
|
<path d="M106.999997,39.2835299 C107.004372,33.3726518 102.206616,28.5757973 96.2838386,28.5714286 C90.3610616,28.5757973 85.5633057,33.3726518 85.5676802,39.2835299 L85.5676802,50 L96.2838386,50 C102.206616,49.9956313 107.004372,45.1987768 106.999997,39.2835299 Z M78.4279602,39.2835299 L78.4279602,10.7121014 C78.4323347,4.80559196 73.6389563,0.00873743993 67.7161793,7.10542736e-15 C61.7934022,0.00436871997 56.9956464,4.80122324 57.0000119,10.7121014 L57.0000119,39.2835299 C56.9912689,45.194408 61.7890247,49.9912626 67.7118018,50 C73.6345788,49.9956313 78.4323347,45.1987768 78.4279602,39.2835299 Z" id="Shape" fill="#2EB67D"></path>
|
||||||
|
<path d="M67.7152233,107 C73.6374818,106.995632 78.4348177,102.199196 78.4304435,96.2888345 C78.4348177,90.3784728 73.6374818,85.5820374 67.7152233,85.5776691 L57.000003,85.5776691 L57.000003,96.2888345 C56.9956289,102.194828 61.7929647,106.991263 67.7152233,107 Z M67.7152233,78.4266993 L96.2847588,78.4266993 C102.207017,78.4223309 107.004353,73.6258955 106.999988,67.7155338 C107.00873,61.8051721 102.211395,57.0087367 96.289136,57 L67.7196004,57 C61.7973418,57.0043683 57.000006,61.8008038 57.0043801,67.7111655 C57.000006,73.6258955 61.7929647,78.4223309 67.7152233,78.4266993 L67.7152233,78.4266993 Z" id="Shape" fill="#ECB22E"></path>
|
||||||
|
<path d="M2.98908926e-06,67.7121014 C-0.00437153219,73.6229795 4.79338431,78.419834 10.7161614,78.4242027 C16.6389384,78.419834 21.4366943,73.6229795 21.4323198,67.7121014 L21.4323198,57 L10.7161614,57 C4.79338431,57.0043687 -0.00437153219,61.8012232 2.98908926e-06,67.7121014 Z M28.5720309,67.7121014 L28.5720309,96.2835299 C28.5632878,102.194408 33.3610437,106.991263 39.2838207,107 C45.2065978,106.995631 50.0043536,102.198777 49.9999881,96.2878986 L49.9999881,67.7208388 C50.0087311,61.8099607 45.2109753,57.0131062 39.2881982,57.0043687 C33.3610437,57.0043687 28.5676653,61.8012232 28.5720309,67.7121014 C28.5720309,67.7121014 28.5720309,67.7164701 28.5720309,67.7121014" id="Shape" fill="#E01E5A"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="spotify-2" transform="translate(36.000000, 22.000000)" fill="#2EBD59" fill-rule="nonzero">
|
||||||
|
<path d="M53.5,0 C23.9517912,0 0,23.9517912 0,53.5 C0,83.0482088 23.9517912,107 53.5,107 C83.0482088,107 107,83.0482088 107,53.5 C107,23.9554418 83.0482088,0.00365063118 53.5,0 Z M78.0358922,77.1597407 C77.0757762,78.7368134 75.0204708,79.2296486 73.4506994,78.2695326 C60.8888775,70.5922552 45.0743432,68.8582054 26.4524736,73.1111907 C24.656363,73.523712 22.8675537,72.3993176 22.458683,70.6032071 C22.0461617,68.8070966 23.1669055,67.0182873 24.9666667,66.6094166 C45.3444899,61.9548618 62.8273627,63.9590583 76.9297509,72.5745479 C78.4995223,73.5419652 78.9996588,75.5899693 78.0358922,77.1597407 L78.0358922,77.1597407 Z M84.5814739,62.5973729 C83.373115,64.5614125 80.8030706,65.1747185 78.8426817,63.9700102 C64.4664961,55.1318321 42.5408052,52.5727397 25.5325145,57.7347322 C23.3275333,58.4027977 20.9984306,57.1579324 20.3267144,54.9566018 C19.6622996,52.7516206 20.9071648,50.4261685 23.1084954,49.7544524 C42.5371546,43.858683 66.6933811,46.7134766 83.2051859,56.8622313 C85.1692255,58.0705902 85.7898328,60.636984 84.5814739,62.5973729 Z M85.1436711,47.4253497 C67.8980894,37.1853292 39.4523712,36.2434664 22.9880246,41.2375299 C20.3449676,42.0406687 17.5485841,40.5475606 16.7490959,37.9045036 C15.9496076,35.2614466 17.4390652,32.4650631 20.0857728,31.6619243 C38.9850904,25.9267827 70.3987718,27.0329239 90.2509041,38.8171614 C92.627465,40.2299556 93.4087001,43.3001365 91.9995565,45.6730467 C90.5940635,48.0532583 87.5165814,48.838144 85.1436711,47.4253497 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="adobe-xd-1" transform="translate(35.000000, 23.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M88.87536,105 L19.12464,105 C8.54928,105 0,96.4750769 0,85.9298462 L0,19.0701538 C0,8.52492308 8.54928,0 19.12464,0 L88.87536,0 C99.45072,0 108,8.52492308 108,19.0701538 L108,85.9298462 C108,96.4750769 99.45072,105 88.87536,105 Z" id="Path" fill="#FF26BE"></path>
|
||||||
|
<path d="M85.8661662,101 L20.1764293,101 C11.2646329,101 4,93.7634471 4,84.8860975 L4,22.1139025 C4,13.2365529 11.2646329,6 20.1764293,6 L85.8233827,6 C94.7822409,6 102,13.2365529 102,22.1139025 L102,84.8434794 C102.042595,93.7634471 94.7779626,101 85.8661662,101 L85.8661662,101 Z" id="Path" fill="#2E001F"></path>
|
||||||
|
<path d="M42.8937592,49.0345674 L55.6917204,73.6219562 C55.9198637,73.9861163 55.7838552,74.3546639 55.4153161,74.3546639 L47.4610124,74.3546639 C46.9564647,74.3546639 46.7283214,74.2186523 46.5001781,73.7623553 C43.5738017,67.7295823 40.6035515,61.6968094 37.5411665,55.2077394 L37.4490317,55.2077394 C34.7069249,61.3326493 31.6884136,67.7778445 28.7664245,73.8106174 C28.5382812,74.1747775 28.3101379,74.3151766 27.9415987,74.3151766 L20.4084827,74.3151766 C19.9521961,74.3151766 19.903935,73.9510165 20.1364657,73.6746058 L32.6580226,49.8155373 L20.5488786,25.6844455 C20.2724742,25.3202854 20.5488786,25.0438747 20.8208956,25.0438747 L28.6830644,25.0438747 C29.139351,25.0438747 29.3236206,25.1360116 29.5035028,25.5484339 C32.3816182,31.5812068 35.3079947,37.7982536 38.0501016,43.8749012 L38.1422364,43.8749012 C40.7922085,37.8421283 43.7185849,31.5812068 46.5528266,25.5923086 C46.7809699,25.2281485 46.9169784,25 47.3776523,25 L54.7352735,25 C55.0994253,25 55.2398212,25.2764107 55.0116779,25.6405708 L42.8937592,49.0345674 Z M57.933665,56.4844935 C57.933665,45.8361009 65.0192712,37.5174554 76.2597158,37.5174554 C77.22055,37.5174554 77.7207103,37.5174554 78.6376708,37.6095923 L78.6376708,25.5001717 C78.6376708,25.223761 78.8658141,25.0438747 79.0939574,25.0438747 L86.3155701,25.0438747 C86.6797219,25.0438747 86.7718567,25.1798863 86.7718567,25.4080348 L86.7718567,67.3654222 C86.7718567,68.5983016 86.7718567,70.1514664 87,71.8450303 C87,72.121441 86.9078652,72.2091904 86.6358482,72.3495895 C82.7968986,74.179165 78.7736793,74.999812 74.9347297,74.999812 C65.0148838,75.0391094 57.9292796,68.918587 57.933665,56.4844935 L57.933665,56.4844935 Z M78.6332835,44.7874952 C77.9927273,44.5110846 77.0801541,44.3311982 75.9833114,44.3311982 C70.2226932,44.3311982 66.2038614,48.7625442 66.2038614,56.1247209 C66.2038614,64.5355033 70.3192154,67.9182436 75.4831511,67.9182436 C76.5799938,67.9182436 77.7689714,67.782232 78.6376708,67.4136844 L78.6376708,44.7874952 L78.6332835,44.7874952 Z" id="Shape" fill="#FFD9F2"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
@@ -1,12 +1,39 @@
|
|||||||
|
<!--
|
||||||
|
=========================================================
|
||||||
|
* Material Tailwind Dashboard React - v2.1.0
|
||||||
|
=========================================================
|
||||||
|
* Product Page: https://www.creative-tim.com/product/material-tailwind-dashboard-react
|
||||||
|
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||||
|
* Licensed under MIT (https://github.com/creativetimofficial/material-tailwind-dashboard-react/blob/main/LICENSE.md)
|
||||||
|
* Coded by Creative Tim
|
||||||
|
=========================================================
|
||||||
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
-->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/img/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>StackPulse</title>
|
<title>Material Tailwind Dashboard React | By Creative Tim</title>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
|
||||||
|
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
|
||||||
|
crossorigin="anonymous"
|
||||||
|
referrerpolicy="no-referrer"
|
||||||
|
/>
|
||||||
|
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||||
|
|
||||||
<script type="module" crossorigin src="/assets/index-a1f09468.js"></script>
|
<!-- Nepcha Analytics (nepcha.com) -->
|
||||||
<link rel="stylesheet" href="/assets/index-0842cd3a.css">
|
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||||
|
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||||
|
<script type="module" crossorigin src="/assets/index-f7ebd6e7.js"></script>
|
||||||
|
<link rel="stylesheet" href="/assets/index-43406193.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -0,0 +1,40 @@
|
|||||||
|
<!--
|
||||||
|
=========================================================
|
||||||
|
* Material Tailwind Dashboard React - v2.1.0
|
||||||
|
=========================================================
|
||||||
|
* Product Page: https://www.creative-tim.com/product/material-tailwind-dashboard-react
|
||||||
|
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||||
|
* Licensed under MIT (https://github.com/creativetimofficial/material-tailwind-dashboard-react/blob/main/LICENSE.md)
|
||||||
|
* Coded by Creative Tim
|
||||||
|
=========================================================
|
||||||
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/img/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Material Tailwind Dashboard React | By Creative Tim</title>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
|
||||||
|
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
|
||||||
|
crossorigin="anonymous"
|
||||||
|
referrerpolicy="no-referrer"
|
||||||
|
/>
|
||||||
|
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||||
|
|
||||||
|
<!-- Nepcha Analytics (nepcha.com) -->
|
||||||
|
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||||
|
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "material-tailwind-dashboard-react",
|
||||||
|
"private": true,
|
||||||
|
"version": "2.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@heroicons/react": "2.0.18",
|
||||||
|
"@material-tailwind/react": "2.1.4",
|
||||||
|
"apexcharts": "3.44.0",
|
||||||
|
"prop-types": "15.8.1",
|
||||||
|
"react": "18.2.0",
|
||||||
|
"react-apexcharts": "1.4.1",
|
||||||
|
"react-dom": "18.2.0",
|
||||||
|
"react-router-dom": "6.17.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "18.2.31",
|
||||||
|
"@types/react-dom": "18.2.14",
|
||||||
|
"@vitejs/plugin-react": "4.1.0",
|
||||||
|
"autoprefixer": "10.4.16",
|
||||||
|
"postcss": "8.4.31",
|
||||||
|
"prettier": "3.0.3",
|
||||||
|
"prettier-plugin-tailwindcss": "0.5.6",
|
||||||
|
"tailwindcss": "3.3.4",
|
||||||
|
"vite": "4.5.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
module.exports = {
|
||||||
|
tailwindConfig: "./tailwind.config.cjs",
|
||||||
|
plugins: [require("prettier-plugin-tailwindcss")],
|
||||||
|
};
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>devto</title>
|
||||||
|
<g id="devto" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g transform="translate(15.000000, 17.000000)" fill="#000000" fill-rule="nonzero" id="Shape">
|
||||||
|
<path d="M28.689375,42.1049777 C27.7626786,41.4123437 26.8335937,41.0660268 25.9068973,41.0660268 L21.7415402,41.0660268 L21.7415402,66.017567 L25.9092857,66.017567 C26.8359821,66.017567 27.765067,65.67125 28.6917634,64.9786161 C29.6184598,64.2859821 30.081808,63.2470312 30.081808,61.859375 L30.081808,45.2242187 C30.0794196,43.8389509 29.613683,42.7976116 28.689375,42.1049777 L28.689375,42.1049777 Z M96.5149554,0 L10.4850446,0 C4.70513393,0 0.0143303571,4.67886161 0,10.4611607 L0,96.5388393 C0.0143303571,102.321138 4.70513393,107 10.4850446,107 L96.5149554,107 C102.297254,107 106.98567,102.321138 107,96.5388393 L107,10.4611607 C106.98567,4.67886161 102.294866,0 96.5149554,0 L96.5149554,0 Z M36.8290179,61.9047545 C36.8290179,66.3973214 34.0560937,73.2042411 25.27875,73.1899333 L14.1966071,73.1899333 L14.1966071,33.6715625 L25.5128125,33.6715625 C33.9772768,33.6715625 36.8242411,40.4689286 36.8266295,44.9638839 L36.8290179,61.9047545 Z M60.8753571,40.7292634 L48.15,40.7292634 L48.15,49.9054687 L55.9289955,49.9054687 L55.9289955,56.9679464 L48.15,56.9679464 L48.15,66.1417634 L60.8777455,66.1417634 L60.8777455,73.2042411 L46.0267187,73.2042411 C43.3612723,73.2735045 41.1448437,71.166942 41.0779687,68.5014955 L41.0779687,38.6203125 C41.0134821,35.9572545 43.122433,33.7456027 45.7854911,33.6787277 L60.8777455,33.6787277 L60.8753571,40.7292634 Z M85.6286607,68.2650446 C82.4759821,75.6093527 76.827433,74.1476562 74.298125,68.2650446 L65.0956473,33.6811161 L72.8746429,33.6811161 L79.970558,60.8419196 L87.0330357,33.6811161 L94.8144196,33.6811161 L85.6286607,68.2650446 Z"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 809 B |
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>github</title>
|
||||||
|
<g id="github" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="github-icon-1" transform="translate(15.000000, 19.000000)" fill="#161614" fill-rule="nonzero">
|
||||||
|
<path d="M53.0002078,0 C23.7327702,0 0,23.6406273 0,52.8036819 C0,76.1341256 15.1861464,95.9270685 36.2449012,102.909305 C38.8935606,103.397979 39.8662322,101.763821 39.8662322,100.36903 C39.8662322,99.1100738 39.8167673,94.9501351 39.794321,90.5379911 C25.0492022,93.732178 21.9379002,84.3078151 21.9379002,84.3078151 C19.5270049,78.2043629 16.0532373,76.5818005 16.0532373,76.5818005 C11.2447482,73.3043734 16.415703,73.3714625 16.415703,73.3714625 C21.7379622,73.7441798 24.5404201,78.8131345 24.5404201,78.8131345 C29.2674376,86.8857761 36.9390727,84.5517378 39.9634993,83.2029155 C40.4390276,79.7896537 41.8128223,77.4605849 43.328361,76.1419941 C31.5565411,74.806424 19.1811662,70.2787376 19.1811662,50.0459884 C19.1811662,44.2812948 21.2516264,39.5705628 24.6422597,35.8727935 C24.0919105,34.542607 22.2779196,29.1721655 25.1556141,21.8987953 C25.1556141,21.8987953 29.60621,20.4795708 39.7344643,27.3114781 C43.9618445,26.141146 48.4959903,25.5547375 53.0002078,25.5348592 C57.5044253,25.5547375 62.0418966,26.141146 66.2775902,27.3114781 C76.39379,20.4795708 80.8381508,21.8987953 80.8381508,21.8987953 C83.7229117,29.1721655 81.9080895,34.542607 81.3577403,35.8727935 C84.7558557,39.5705628 86.8121831,44.2808807 86.8121831,50.0459884 C86.8121831,70.3267767 74.4135305,74.7927577 62.6117823,76.0997528 C64.5126486,77.7384664 66.2065104,80.9521174 66.2065104,85.8781971 C66.2065104,92.9432598 66.144991,98.6296827 66.144991,100.36903 C66.144991,101.774174 67.0989573,103.420756 69.7858585,102.902265 C90.8329745,95.9121598 106,76.1262572 106,52.8036819 C106,23.6406273 82.2705552,0 53.0002078,0" id="Path"></path>
|
||||||
|
<path d="M19.3815873,74.9620202 C19.268311,75.243666 18.8645619,75.3282042 18.4976277,75.1351011 C18.1234113,74.9500069 17.913041,74.5655804 18.0344085,74.2825998 C18.145662,73.9925001 18.5494111,73.9115214 18.9228183,74.1064043 C19.2978438,74.2910536 19.5114505,74.6790396 19.3815873,74.9620202 M21.9189764,77.4518937 C21.673005,77.7028388 21.1919853,77.586265 20.8655068,77.1898252 C20.5281053,76.7942752 20.4649942,76.2656888 20.7146066,76.0107393 C20.9682646,75.7602391 21.4347202,75.8772578 21.7729309,76.2732527 C22.1103324,76.6732521 22.1758708,77.1987239 21.9185718,77.4523386 M23.6597903,80.6376503 C23.3434258,80.8792517 22.8264004,80.6527782 22.507204,80.1482184 C22.1912441,79.6441036 22.1912441,79.0389878 22.5140815,78.7964966 C22.8344916,78.5540053 23.3434258,78.772025 23.6670724,79.2725803 C23.9826278,79.7855939 23.9826278,80.3907097 23.6593858,80.6380953 M26.6033558,84.3275218 C26.3205697,84.6701241 25.718587,84.5784669 25.2776186,84.110392 C24.8269408,83.6529957 24.7011232,83.003831 24.9847185,82.6607837 C25.2707411,82.3172916 25.8763647,82.4138431 26.3205697,82.8779135 C26.7684156,83.33442 26.9051563,83.988479 26.6037604,84.3275218 M30.4078212,85.5733484 C30.2836218,86.0173966 29.7034854,86.2193985 29.1193033,86.0307447 C28.5359304,85.8363068 28.1540274,85.3157292 28.2717539,84.8667867 C28.3931213,84.419624 28.9756851,84.2091683 29.5643173,84.4111701 C30.1468811,84.6047182 30.5295932,85.1212913 30.4082257,85.5733484 M34.7382122,86.1014899 C34.7527763,86.5695647 34.2571925,86.9575508 33.6438823,86.9660046 C33.026931,86.9806875 32.5281107,86.6020452 32.5216378,86.1419793 C32.5216378,85.669455 33.005894,85.2850285 33.6224407,85.2739051 C34.2357509,85.2605569 34.7382122,85.6365296 34.7382122,86.1014899 M38.9917372,85.9221798 C39.0653668,86.3786863 38.6389624,86.847651 38.0301023,86.9722337 C37.4313562,87.092367 36.8771114,86.8107212 36.8006499,86.3582192 C36.7262112,85.8901443 37.1607067,85.4216245 37.7582392,85.3001564 C38.368313,85.1835826 38.914062,85.4581094 38.9917372,85.9221798" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<defs>
|
||||||
|
<radialGradient cx="50.0135415%" cy="54.714503%" fx="50.0135415%" fy="54.714503%" r="71.9292757%" gradientTransform="translate(0.500135,0.547145),scale(0.921739,1.000000),translate(-0.500135,-0.547145)" id="radialGradient-1">
|
||||||
|
<stop stop-color="#FFB900" offset="0%"></stop>
|
||||||
|
<stop stop-color="#F95D8F" offset="60%"></stop>
|
||||||
|
<stop stop-color="#F95353" offset="99.9%"></stop>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="asana-logo" transform="translate(31.000000, 22.000000)" fill="url(#radialGradient-1)" fill-rule="nonzero">
|
||||||
|
<path d="M89.9906921,56.1170331 C76.175985,56.1170331 64.97895,67.282887 64.97895,81.056696 C64.97895,94.8318401 76.175985,106 89.9906921,106 C103.803087,106 115,94.8318401 115,81.056696 C115,67.282887 103.803087,56.1170331 89.9906921,56.1170331 Z M25.010525,56.1182468 C11.1981304,56.1194604 0,67.282887 0,81.0579097 C0,94.8318401 11.1981304,105.998786 25.010525,105.998786 C38.824015,105.998786 50.0222671,94.8318401 50.0222671,81.0579097 C50.0222671,67.2827656 38.824015,56.1182468 25.0093079,56.1182468 L25.010525,56.1182468 L25.010525,56.1182468 Z M82.5105859,24.9408766 C82.5105859,38.714807 71.3136726,49.8841806 57.5012779,49.8841806 C43.6865709,49.8841806 32.4895359,38.714807 32.4895359,24.9408766 C32.4895359,11.1669462 43.6865709,0 57.5011562,0 C71.3135508,0 82.5093688,11.1669462 82.5093688,24.9408766 L82.5105859,24.9408766 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,16 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="80.5250892%" y1="15.6897142%" x2="43.803046%" y2="97.3483651%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#0052CC" offset="0%"></stop>
|
||||||
|
<stop stop-color="#2684FF" offset="92%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="atlassian-1" transform="translate(35.000000, 21.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M32.2177437,50.2228454 C31.1791646,48.8591721 29.2398559,48.5964284 27.8794818,49.635084 C27.4950585,49.9399792 27.1849667,50.3291598 26.9728674,50.7729298 L0.336388365,104.364716 C-0.449192603,105.946205 0.18801967,107.868741 1.75999765,108.659896 C2.20126182,108.88437 2.68910685,109 3.18360694,108.998989 L40.2948533,108.998989 C41.5095132,109.030231 42.627261,108.335051 43.1420719,107.228169 C51.1517473,90.5899995 46.2964903,65.2936515 32.2177437,50.2228454 Z" id="Path" fill="url(#linearGradient-1)"></path>
|
||||||
|
<path d="M51.4733618,1.73446471 C37.8211056,22.5862851 36.24436,49.0339597 47.3237511,71.3383072 L65.4063614,107.233778 C65.9512026,108.315801 67.0651049,109 68.2838287,109 L105.781771,109 C106.635913,109.001993 107.455652,108.666103 108.059623,108.066637 C108.663594,107.467171 109.002008,106.653546 109,105.805775 C109,105.310759 108.886342,104.822253 108.666811,104.377773 L56.948122,1.71943311 C56.4470574,0.669442923 55.3812876,0 54.2107419,0 C53.0401961,0 51.9744264,0.669442923 51.4733618,1.71943311 L51.4733618,1.73446471 Z" id="Path" fill="#2684FF"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="invision" transform="translate(36.000000, 22.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M96.3908516,0 L9.60914844,0 C4.30210938,0 0,4.30210938 0,9.60914844 L0,96.3908516 C0,101.697891 4.30210938,106 9.60914844,106 L96.3908516,106 C101.697891,106 106,101.697891 106,96.3908516 L106,9.60914844 C106,4.30210938 101.697891,0 96.3908516,0" id="Path" fill="#DC395F"></path>
|
||||||
|
<path d="M35.8726639,33.7452625 C39.3481912,33.7452625 42.2597111,30.9866909 42.2597111,27.3711837 C42.2597111,23.758158 39.3481912,21 35.8726639,21 C32.3971366,21 29.4864335,23.758158 29.4864335,27.3711837 C29.4864335,30.9862773 32.3971366,33.7452625 35.8726639,33.7452625 M22.6297204,67.8737974 C22.2543961,69.4908911 22.0661214,71.2370214 22.0661214,72.6613873 C22.0661214,78.2740672 25.0715744,82 31.4586217,82 C36.7556357,82 41.0500152,78.8146149 44.1420502,73.6709335 L42.2539935,81.3440638 L52.7724666,81.3440638 L58.7841895,56.9267762 C60.2871203,50.744598 63.1986402,47.535639 67.6134992,47.535639 C71.0886182,47.535639 73.2486727,49.7242988 73.2486727,53.3373245 C73.2486727,54.3840928 73.1547395,55.52433 72.7790068,56.7613446 L69.6792122,67.9846366 C69.2095463,69.6017303 69.0224968,71.2196511 69.0224968,72.7403809 C69.0224968,78.0685185 72.1210662,81.9656729 78.6020466,81.9656729 C84.1436953,81.9656729 88.5577376,78.3530608 91,69.697267 L86.8677573,68.0818276 C84.8012275,73.8806181 83.0164973,74.9290407 81.6074997,74.9290407 C80.1985021,74.9290407 79.4470368,73.9786363 79.4470368,72.0774138 C79.4470368,71.2213054 79.6357199,70.2713146 79.9167026,69.1273552 L82.9229725,58.1931549 C83.6740295,55.6256568 83.9562374,53.3489047 83.9562374,51.2570224 C83.9562374,43.0772579 79.0717125,38.808296 73.1547395,38.808296 C67.6134992,38.808296 61.977509,43.8700887 59.1603306,49.1973992 L61.2260436,39.6354539 L45.1659218,39.6354539 L42.9115257,48.0575756 L50.4257709,48.0575756 L45.7985412,66.8175168 C42.1649611,74.9972812 35.4903967,75.1300401 34.6527579,74.9402073 C33.2772495,74.6258873 32.397545,74.0969199 32.397545,72.2870984 C32.397545,71.2428115 32.5854113,69.7427607 33.0550772,67.9341799 L40.100065,39.6354539 L22.2543961,39.6354539 L20,48.0575756 L27.4194953,48.0575756 L22.6301288,67.8737974" id="Shape" fill="#FFFFFF"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,21 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="67.9273487%" y1="40.3110476%" x2="40.6754218%" y2="81.641044%" id="linearGradient-1">
|
||||||
|
<stop stop-color="#0052CC" offset="18%"></stop>
|
||||||
|
<stop stop-color="#2684FF" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient x1="32.3045012%" y1="-23.3247078%" x2="59.5183684%" y2="17.8549121%" id="linearGradient-2">
|
||||||
|
<stop stop-color="#0052CC" offset="18%"></stop>
|
||||||
|
<stop stop-color="#2684FF" offset="100%"></stop>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="jira-3" transform="translate(35.000000, 21.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M105.705696,51.9209821 L58.1065074,4.58660714 L53.4942403,0 L17.6627523,35.6321429 L1.27784635,51.9209821 C-0.425948784,53.6240313 -0.425948784,56.3759687 1.27784635,58.0790179 L34.0130909,90.6321429 L53.4942403,110 L89.3207902,74.3678571 L89.8788054,73.8178571 L105.705696,58.1035714 C106.534097,57.2858004 107,56.173045 107,55.0122768 C107,53.8515086 106.534097,52.7387531 105.705696,51.9209821 Z M53.4942403,71.2642857 L37.1389635,55 L53.4942403,38.7357143 L69.8445789,55 L53.4942403,71.2642857 Z" id="Shape" fill="#2684FF"></path>
|
||||||
|
<path d="M53,38.6445299 C42.2639805,27.9872611 42.2108919,10.7221586 52.8811718,0 L17,35.6113693 L36.5274378,55 L53,38.6445299 Z" id="Path" fill="url(#linearGradient-1)"></path>
|
||||||
|
<path d="M69.446952,55 L53,71.2982957 C63.7858387,81.9863246 63.7858387,99.3119711 53,110 L89,74.3557598 L69.446952,55 Z" id="Path" fill="url(#linearGradient-2)"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="slack-new-logo" transform="translate(35.000000, 22.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M39.2803996,-1.77635684e-15 C33.3581411,0.00436871997 28.5651823,4.80122324 28.5695565,10.7121014 C28.5651823,16.6229795 33.3625182,21.419834 39.2847767,21.4242027 L49.999997,21.4242027 L49.999997,10.7164701 C50.0043711,4.80559196 45.2070353,0.00873743993 39.2803996,-1.77635684e-15 C39.2847767,-1.77635684e-15 39.2847767,-1.77635684e-15 39.2803996,-1.77635684e-15 M39.2803996,28.5714286 L10.7152412,28.5714286 C4.7929826,28.5757973 -0.00435323957,33.3726518 1.19295144e-05,39.2835299 C-0.0087303708,45.194408 4.78860547,49.9912626 10.710864,50 L39.2803996,50 C45.2026582,49.9956313 49.999994,45.1987768 49.9956199,39.2878986 C49.999994,33.3726518 45.2026582,28.5757973 39.2803996,28.5714286 Z" id="Shape" fill="#36C5F0"></path>
|
||||||
|
<path d="M106.999997,39.2835299 C107.004372,33.3726518 102.206616,28.5757973 96.2838386,28.5714286 C90.3610616,28.5757973 85.5633057,33.3726518 85.5676802,39.2835299 L85.5676802,50 L96.2838386,50 C102.206616,49.9956313 107.004372,45.1987768 106.999997,39.2835299 Z M78.4279602,39.2835299 L78.4279602,10.7121014 C78.4323347,4.80559196 73.6389563,0.00873743993 67.7161793,7.10542736e-15 C61.7934022,0.00436871997 56.9956464,4.80122324 57.0000119,10.7121014 L57.0000119,39.2835299 C56.9912689,45.194408 61.7890247,49.9912626 67.7118018,50 C73.6345788,49.9956313 78.4323347,45.1987768 78.4279602,39.2835299 Z" id="Shape" fill="#2EB67D"></path>
|
||||||
|
<path d="M67.7152233,107 C73.6374818,106.995632 78.4348177,102.199196 78.4304435,96.2888345 C78.4348177,90.3784728 73.6374818,85.5820374 67.7152233,85.5776691 L57.000003,85.5776691 L57.000003,96.2888345 C56.9956289,102.194828 61.7929647,106.991263 67.7152233,107 Z M67.7152233,78.4266993 L96.2847588,78.4266993 C102.207017,78.4223309 107.004353,73.6258955 106.999988,67.7155338 C107.00873,61.8051721 102.211395,57.0087367 96.289136,57 L67.7196004,57 C61.7973418,57.0043683 57.000006,61.8008038 57.0043801,67.7111655 C57.000006,73.6258955 61.7929647,78.4223309 67.7152233,78.4266993 L67.7152233,78.4266993 Z" id="Shape" fill="#ECB22E"></path>
|
||||||
|
<path d="M2.98908926e-06,67.7121014 C-0.00437153219,73.6229795 4.79338431,78.419834 10.7161614,78.4242027 C16.6389384,78.419834 21.4366943,73.6229795 21.4323198,67.7121014 L21.4323198,57 L10.7161614,57 C4.79338431,57.0043687 -0.00437153219,61.8012232 2.98908926e-06,67.7121014 Z M28.5720309,67.7121014 L28.5720309,96.2835299 C28.5632878,102.194408 33.3610437,106.991263 39.2838207,107 C45.2065978,106.995631 50.0043536,102.198777 49.9999881,96.2878986 L49.9999881,67.7208388 C50.0087311,61.8099607 45.2109753,57.0131062 39.2881982,57.0043687 C33.3610437,57.0043687 28.5676653,61.8012232 28.5720309,67.7121014 C28.5720309,67.7121014 28.5720309,67.7164701 28.5720309,67.7121014" id="Shape" fill="#E01E5A"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="spotify-2" transform="translate(36.000000, 22.000000)" fill="#2EBD59" fill-rule="nonzero">
|
||||||
|
<path d="M53.5,0 C23.9517912,0 0,23.9517912 0,53.5 C0,83.0482088 23.9517912,107 53.5,107 C83.0482088,107 107,83.0482088 107,53.5 C107,23.9554418 83.0482088,0.00365063118 53.5,0 Z M78.0358922,77.1597407 C77.0757762,78.7368134 75.0204708,79.2296486 73.4506994,78.2695326 C60.8888775,70.5922552 45.0743432,68.8582054 26.4524736,73.1111907 C24.656363,73.523712 22.8675537,72.3993176 22.458683,70.6032071 C22.0461617,68.8070966 23.1669055,67.0182873 24.9666667,66.6094166 C45.3444899,61.9548618 62.8273627,63.9590583 76.9297509,72.5745479 C78.4995223,73.5419652 78.9996588,75.5899693 78.0358922,77.1597407 L78.0358922,77.1597407 Z M84.5814739,62.5973729 C83.373115,64.5614125 80.8030706,65.1747185 78.8426817,63.9700102 C64.4664961,55.1318321 42.5408052,52.5727397 25.5325145,57.7347322 C23.3275333,58.4027977 20.9984306,57.1579324 20.3267144,54.9566018 C19.6622996,52.7516206 20.9071648,50.4261685 23.1084954,49.7544524 C42.5371546,43.858683 66.6933811,46.7134766 83.2051859,56.8622313 C85.1692255,58.0705902 85.7898328,60.636984 84.5814739,62.5973729 Z M85.1436711,47.4253497 C67.8980894,37.1853292 39.4523712,36.2434664 22.9880246,41.2375299 C20.3449676,42.0406687 17.5485841,40.5475606 16.7490959,37.9045036 C15.9496076,35.2614466 17.4390652,32.4650631 20.0857728,31.6619243 C38.9850904,25.9267827 70.3987718,27.0329239 90.2509041,38.8171614 C92.627465,40.2299556 93.4087001,43.3001365 91.9995565,45.6730467 C90.5940635,48.0532583 87.5165814,48.838144 85.1436711,47.4253497 Z" id="Shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<title>Logos</title>
|
||||||
|
<g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="adobe-xd-1" transform="translate(35.000000, 23.000000)" fill-rule="nonzero">
|
||||||
|
<path d="M88.87536,105 L19.12464,105 C8.54928,105 0,96.4750769 0,85.9298462 L0,19.0701538 C0,8.52492308 8.54928,0 19.12464,0 L88.87536,0 C99.45072,0 108,8.52492308 108,19.0701538 L108,85.9298462 C108,96.4750769 99.45072,105 88.87536,105 Z" id="Path" fill="#FF26BE"></path>
|
||||||
|
<path d="M85.8661662,101 L20.1764293,101 C11.2646329,101 4,93.7634471 4,84.8860975 L4,22.1139025 C4,13.2365529 11.2646329,6 20.1764293,6 L85.8233827,6 C94.7822409,6 102,13.2365529 102,22.1139025 L102,84.8434794 C102.042595,93.7634471 94.7779626,101 85.8661662,101 L85.8661662,101 Z" id="Path" fill="#2E001F"></path>
|
||||||
|
<path d="M42.8937592,49.0345674 L55.6917204,73.6219562 C55.9198637,73.9861163 55.7838552,74.3546639 55.4153161,74.3546639 L47.4610124,74.3546639 C46.9564647,74.3546639 46.7283214,74.2186523 46.5001781,73.7623553 C43.5738017,67.7295823 40.6035515,61.6968094 37.5411665,55.2077394 L37.4490317,55.2077394 C34.7069249,61.3326493 31.6884136,67.7778445 28.7664245,73.8106174 C28.5382812,74.1747775 28.3101379,74.3151766 27.9415987,74.3151766 L20.4084827,74.3151766 C19.9521961,74.3151766 19.903935,73.9510165 20.1364657,73.6746058 L32.6580226,49.8155373 L20.5488786,25.6844455 C20.2724742,25.3202854 20.5488786,25.0438747 20.8208956,25.0438747 L28.6830644,25.0438747 C29.139351,25.0438747 29.3236206,25.1360116 29.5035028,25.5484339 C32.3816182,31.5812068 35.3079947,37.7982536 38.0501016,43.8749012 L38.1422364,43.8749012 C40.7922085,37.8421283 43.7185849,31.5812068 46.5528266,25.5923086 C46.7809699,25.2281485 46.9169784,25 47.3776523,25 L54.7352735,25 C55.0994253,25 55.2398212,25.2764107 55.0116779,25.6405708 L42.8937592,49.0345674 Z M57.933665,56.4844935 C57.933665,45.8361009 65.0192712,37.5174554 76.2597158,37.5174554 C77.22055,37.5174554 77.7207103,37.5174554 78.6376708,37.6095923 L78.6376708,25.5001717 C78.6376708,25.223761 78.8658141,25.0438747 79.0939574,25.0438747 L86.3155701,25.0438747 C86.6797219,25.0438747 86.7718567,25.1798863 86.7718567,25.4080348 L86.7718567,67.3654222 C86.7718567,68.5983016 86.7718567,70.1514664 87,71.8450303 C87,72.121441 86.9078652,72.2091904 86.6358482,72.3495895 C82.7968986,74.179165 78.7736793,74.999812 74.9347297,74.999812 C65.0148838,75.0391094 57.9292796,68.918587 57.933665,56.4844935 L57.933665,56.4844935 Z M78.6332835,44.7874952 C77.9927273,44.5110846 77.0801541,44.3311982 75.9833114,44.3311982 C70.2226932,44.3311982 66.2038614,48.7625442 66.2038614,56.1247209 C66.2038614,64.5355033 70.3192154,67.9182436 75.4831511,67.9182436 C76.5799938,67.9182436 77.7689714,67.782232 78.6376708,67.4136844 L78.6376708,44.7874952 L78.6332835,44.7874952 Z" id="Shape" fill="#FFD9F2"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,14 @@
|
|||||||
|
import { Routes, Route, Navigate } from "react-router-dom";
|
||||||
|
import { Dashboard, Auth } from "@/layouts";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<Routes>
|
||||||
|
<Route path="/dashboard/*" element={<Dashboard />} />
|
||||||
|
<Route path="/auth/*" element={<Auth />} />
|
||||||
|
<Route path="*" element={<Navigate to="/dashboard/home" replace />} />
|
||||||
|
</Routes>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
export const chartsConfig = {
|
||||||
|
chart: {
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: "",
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: "#37474f",
|
||||||
|
fontSize: "13px",
|
||||||
|
fontFamily: "inherit",
|
||||||
|
fontWeight: 300,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: "#37474f",
|
||||||
|
fontSize: "13px",
|
||||||
|
fontFamily: "inherit",
|
||||||
|
fontWeight: 300,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: true,
|
||||||
|
borderColor: "#dddddd",
|
||||||
|
strokeDashArray: 5,
|
||||||
|
xaxis: {
|
||||||
|
lines: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
top: 5,
|
||||||
|
right: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
theme: "dark",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default chartsConfig;
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export * from "@/configs/charts-config";
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import React from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
|
export const MaterialTailwind = React.createContext(null);
|
||||||
|
MaterialTailwind.displayName = "MaterialTailwindContext";
|
||||||
|
|
||||||
|
export function reducer(state, action) {
|
||||||
|
switch (action.type) {
|
||||||
|
case "OPEN_SIDENAV": {
|
||||||
|
return { ...state, openSidenav: action.value };
|
||||||
|
}
|
||||||
|
case "SIDENAV_TYPE": {
|
||||||
|
return { ...state, sidenavType: action.value };
|
||||||
|
}
|
||||||
|
case "SIDENAV_COLOR": {
|
||||||
|
return { ...state, sidenavColor: action.value };
|
||||||
|
}
|
||||||
|
case "TRANSPARENT_NAVBAR": {
|
||||||
|
return { ...state, transparentNavbar: action.value };
|
||||||
|
}
|
||||||
|
case "FIXED_NAVBAR": {
|
||||||
|
return { ...state, fixedNavbar: action.value };
|
||||||
|
}
|
||||||
|
case "OPEN_CONFIGURATOR": {
|
||||||
|
return { ...state, openConfigurator: action.value };
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
throw new Error(`Unhandled action type: ${action.type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MaterialTailwindControllerProvider({ children }) {
|
||||||
|
const initialState = {
|
||||||
|
openSidenav: false,
|
||||||
|
sidenavColor: "dark",
|
||||||
|
sidenavType: "white",
|
||||||
|
transparentNavbar: true,
|
||||||
|
fixedNavbar: false,
|
||||||
|
openConfigurator: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
const [controller, dispatch] = React.useReducer(reducer, initialState);
|
||||||
|
const value = React.useMemo(
|
||||||
|
() => [controller, dispatch],
|
||||||
|
[controller, dispatch]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MaterialTailwind.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</MaterialTailwind.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useMaterialTailwindController() {
|
||||||
|
const context = React.useContext(MaterialTailwind);
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error(
|
||||||
|
"useMaterialTailwindController should be used inside the MaterialTailwindControllerProvider."
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
MaterialTailwindControllerProvider.displayName = "/src/context/index.jsx";
|
||||||
|
|
||||||
|
MaterialTailwindControllerProvider.propTypes = {
|
||||||
|
children: PropTypes.node.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const setOpenSidenav = (dispatch, value) =>
|
||||||
|
dispatch({ type: "OPEN_SIDENAV", value });
|
||||||
|
export const setSidenavType = (dispatch, value) =>
|
||||||
|
dispatch({ type: "SIDENAV_TYPE", value });
|
||||||
|
export const setSidenavColor = (dispatch, value) =>
|
||||||
|
dispatch({ type: "SIDENAV_COLOR", value });
|
||||||
|
export const setTransparentNavbar = (dispatch, value) =>
|
||||||
|
dispatch({ type: "TRANSPARENT_NAVBAR", value });
|
||||||
|
export const setFixedNavbar = (dispatch, value) =>
|
||||||
|
dispatch({ type: "FIXED_NAVBAR", value });
|
||||||
|
export const setOpenConfigurator = (dispatch, value) =>
|
||||||
|
dispatch({ type: "OPEN_CONFIGURATOR", value });
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
export const authorsTableData = [
|
||||||
|
{
|
||||||
|
img: "/img/team-2.jpeg",
|
||||||
|
name: "John Michael",
|
||||||
|
email: "john@creative-tim.com",
|
||||||
|
job: ["Manager", "Organization"],
|
||||||
|
online: true,
|
||||||
|
date: "23/04/18",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/team-1.jpeg",
|
||||||
|
name: "Alexa Liras",
|
||||||
|
email: "alexa@creative-tim.com",
|
||||||
|
job: ["Programator", "Developer"],
|
||||||
|
online: false,
|
||||||
|
date: "11/01/19",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/team-4.jpeg",
|
||||||
|
name: "Laurent Perrier",
|
||||||
|
email: "laurent@creative-tim.com",
|
||||||
|
job: ["Executive", "Projects"],
|
||||||
|
online: true,
|
||||||
|
date: "19/09/17",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/team-3.jpeg",
|
||||||
|
name: "Michael Levi",
|
||||||
|
email: "michael@creative-tim.com",
|
||||||
|
job: ["Programator", "Developer"],
|
||||||
|
online: true,
|
||||||
|
date: "24/12/08",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/bruce-mars.jpeg",
|
||||||
|
name: "Bruce Mars",
|
||||||
|
email: "bruce@creative-tim.com",
|
||||||
|
job: ["Manager", "Executive"],
|
||||||
|
online: false,
|
||||||
|
date: "04/10/21",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/team-2.jpeg",
|
||||||
|
name: "Alexander",
|
||||||
|
email: "alexander@creative-tim.com",
|
||||||
|
job: ["Programator", "Developer"],
|
||||||
|
online: false,
|
||||||
|
date: "14/09/20",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default authorsTableData;
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
export const conversationsData = [
|
||||||
|
{
|
||||||
|
img: "/img/team-1.jpeg",
|
||||||
|
name: "Sophie B.",
|
||||||
|
message: "Hi! I need more information...",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/team-2.jpeg",
|
||||||
|
name: "Alexander",
|
||||||
|
message: "Awesome work, can you...",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/team-3.jpeg",
|
||||||
|
name: "Ivanna",
|
||||||
|
message: "About files I can...",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/team-4.jpeg",
|
||||||
|
name: "Peterson",
|
||||||
|
message: "Have a great afternoon...",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/bruce-mars.jpeg",
|
||||||
|
name: "Bruce Mars",
|
||||||
|
message: "Hi! I need more information...",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default conversationsData;
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
export * from "@/data/statistics-cards-data";
|
||||||
|
export * from "@/data/statistics-charts-data";
|
||||||
|
export * from "@/data/projects-table-data";
|
||||||
|
export * from "@/data/orders-overview-data";
|
||||||
|
export * from "@/data/platform-settings-data";
|
||||||
|
export * from "@/data/conversations-data";
|
||||||
|
export * from "@/data/projects-data";
|
||||||
|
export * from "@/data/authors-table-data";
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
import {
|
||||||
|
BellIcon,
|
||||||
|
PlusCircleIcon,
|
||||||
|
ShoppingCartIcon,
|
||||||
|
CreditCardIcon,
|
||||||
|
LockOpenIcon,
|
||||||
|
BanknotesIcon,
|
||||||
|
} from "@heroicons/react/24/solid";
|
||||||
|
|
||||||
|
export const ordersOverviewData = [
|
||||||
|
{
|
||||||
|
icon: BellIcon,
|
||||||
|
color: "text-blue-gray-300",
|
||||||
|
title: "$2400, Design changes",
|
||||||
|
description: "22 DEC 7:20 PM",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: PlusCircleIcon,
|
||||||
|
color: "text-blue-gray-300",
|
||||||
|
title: "New order #1832412",
|
||||||
|
description: "21 DEC 11 PM",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ShoppingCartIcon,
|
||||||
|
color: "text-blue-gray-300",
|
||||||
|
title: "Server payments for April",
|
||||||
|
description: "21 DEC 9:34 PM",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: CreditCardIcon,
|
||||||
|
color: "text-blue-gray-300",
|
||||||
|
title: "New card added for order #4395133",
|
||||||
|
description: "20 DEC 2:20 AM",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: LockOpenIcon,
|
||||||
|
color: "text-blue-gray-300",
|
||||||
|
title: "Unlock packages for development",
|
||||||
|
description: "18 DEC 4:54 AM",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: BanknotesIcon,
|
||||||
|
color: "text-blue-gray-300",
|
||||||
|
title: "New order #9583120",
|
||||||
|
description: "17 DEC",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default ordersOverviewData;
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
export const platformSettingsData = [
|
||||||
|
{
|
||||||
|
title: "account",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
checked: true,
|
||||||
|
label: "Email me when someone follows me",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checked: false,
|
||||||
|
label: "Email me when someone answers on my post",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checked: true,
|
||||||
|
label: "Email me when someone mentions me",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "application",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
checked: false,
|
||||||
|
label: "New launches and projects",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checked: true,
|
||||||
|
label: "Monthly product updates",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checked: false,
|
||||||
|
label: "Subscribe to newsletter",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default platformSettingsData;
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
export const projectsData = [
|
||||||
|
{
|
||||||
|
img: "/img/home-decor-1.jpeg",
|
||||||
|
title: "Modern",
|
||||||
|
tag: "Project #1",
|
||||||
|
description:
|
||||||
|
"As Uber works through a huge amount of internal management turmoil.",
|
||||||
|
route: "/dashboard/profile",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
|
||||||
|
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
|
||||||
|
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
|
||||||
|
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/home-decor-2.jpeg",
|
||||||
|
title: "Scandinavian",
|
||||||
|
tag: "Project #2",
|
||||||
|
description:
|
||||||
|
"Music is something that every person has his or her own specific opinion about.",
|
||||||
|
route: "/dashboard/profile",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
|
||||||
|
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
|
||||||
|
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
|
||||||
|
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/home-decor-3.jpeg",
|
||||||
|
title: "Minimalist",
|
||||||
|
tag: "Project #3",
|
||||||
|
description:
|
||||||
|
"Different people have different taste, and various types of music.",
|
||||||
|
route: "/dashboard/profile",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
|
||||||
|
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
|
||||||
|
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
|
||||||
|
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/home-decor-4.jpeg",
|
||||||
|
title: "Gothic",
|
||||||
|
tag: "Project #4",
|
||||||
|
description:
|
||||||
|
"Why would anyone pick blue over pink? Pink is obviously a better color.",
|
||||||
|
route: "/dashboard/profile",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
|
||||||
|
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
|
||||||
|
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
|
||||||
|
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default projectsData;
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
export const projectsTableData = [
|
||||||
|
{
|
||||||
|
img: "/img/logo-xd.svg",
|
||||||
|
name: "Material XD Version",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
|
||||||
|
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
|
||||||
|
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
|
||||||
|
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
|
||||||
|
],
|
||||||
|
budget: "$14,000",
|
||||||
|
completion: 60,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/logo-atlassian.svg",
|
||||||
|
name: "Add Progress Track",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
|
||||||
|
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
|
||||||
|
],
|
||||||
|
budget: "$3,000",
|
||||||
|
completion: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/logo-slack.svg",
|
||||||
|
name: "Fix Platform Errors",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
|
||||||
|
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
|
||||||
|
],
|
||||||
|
budget: "Not set",
|
||||||
|
completion: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/logo-spotify.svg",
|
||||||
|
name: "Launch our Mobile App",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
|
||||||
|
{ img: "/img/team-3.jpeg", name: "Jessica Doe" },
|
||||||
|
{ img: "/img/team-2.jpeg", name: "Ryan Tompson" },
|
||||||
|
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
|
||||||
|
],
|
||||||
|
budget: "$20,500",
|
||||||
|
completion: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/logo-jira.svg",
|
||||||
|
name: "Add the New Pricing Page",
|
||||||
|
members: [{ img: "/img/team-4.jpeg", name: "Alexander Smith" }],
|
||||||
|
budget: "$500",
|
||||||
|
completion: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "/img/logo-invision.svg",
|
||||||
|
name: "Redesign New Online Shop",
|
||||||
|
members: [
|
||||||
|
{ img: "/img/team-1.jpeg", name: "Romina Hadid" },
|
||||||
|
{ img: "/img/team-4.jpeg", name: "Alexander Smith" },
|
||||||
|
],
|
||||||
|
budget: "$2,000",
|
||||||
|
completion: 40,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default projectsTableData;
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import {
|
||||||
|
BanknotesIcon,
|
||||||
|
UserPlusIcon,
|
||||||
|
UsersIcon,
|
||||||
|
ChartBarIcon,
|
||||||
|
} from "@heroicons/react/24/solid";
|
||||||
|
|
||||||
|
export const statisticsCardsData = [
|
||||||
|
{
|
||||||
|
color: "gray",
|
||||||
|
icon: BanknotesIcon,
|
||||||
|
title: "Today's Money",
|
||||||
|
value: "$53k",
|
||||||
|
footer: {
|
||||||
|
color: "text-green-500",
|
||||||
|
value: "+55%",
|
||||||
|
label: "than last week",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "gray",
|
||||||
|
icon: UsersIcon,
|
||||||
|
title: "Today's Users",
|
||||||
|
value: "2,300",
|
||||||
|
footer: {
|
||||||
|
color: "text-green-500",
|
||||||
|
value: "+3%",
|
||||||
|
label: "than last month",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "gray",
|
||||||
|
icon: UserPlusIcon,
|
||||||
|
title: "New Clients",
|
||||||
|
value: "3,462",
|
||||||
|
footer: {
|
||||||
|
color: "text-red-500",
|
||||||
|
value: "-2%",
|
||||||
|
label: "than yesterday",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "gray",
|
||||||
|
icon: ChartBarIcon,
|
||||||
|
title: "Sales",
|
||||||
|
value: "$103,430",
|
||||||
|
footer: {
|
||||||
|
color: "text-green-500",
|
||||||
|
value: "+5%",
|
||||||
|
label: "than yesterday",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default statisticsCardsData;
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
import { chartsConfig } from "@/configs";
|
||||||
|
|
||||||
|
const websiteViewsChart = {
|
||||||
|
type: "bar",
|
||||||
|
height: 220,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Views",
|
||||||
|
data: [50, 20, 10, 22, 50, 10, 40],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
...chartsConfig,
|
||||||
|
colors: "#388e3c",
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
columnWidth: "16%",
|
||||||
|
borderRadius: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
...chartsConfig.xaxis,
|
||||||
|
categories: ["M", "T", "W", "T", "F", "S", "S"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const dailySalesChart = {
|
||||||
|
type: "line",
|
||||||
|
height: 220,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Sales",
|
||||||
|
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
...chartsConfig,
|
||||||
|
colors: ["#0288d1"],
|
||||||
|
stroke: {
|
||||||
|
lineCap: "round",
|
||||||
|
},
|
||||||
|
markers: {
|
||||||
|
size: 5,
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
...chartsConfig.xaxis,
|
||||||
|
categories: [
|
||||||
|
"Apr",
|
||||||
|
"May",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Aug",
|
||||||
|
"Sep",
|
||||||
|
"Oct",
|
||||||
|
"Nov",
|
||||||
|
"Dec",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const completedTaskChart = {
|
||||||
|
type: "line",
|
||||||
|
height: 220,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Sales",
|
||||||
|
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
...chartsConfig,
|
||||||
|
colors: ["#388e3c"],
|
||||||
|
stroke: {
|
||||||
|
lineCap: "round",
|
||||||
|
},
|
||||||
|
markers: {
|
||||||
|
size: 5,
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
...chartsConfig.xaxis,
|
||||||
|
categories: [
|
||||||
|
"Apr",
|
||||||
|
"May",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Aug",
|
||||||
|
"Sep",
|
||||||
|
"Oct",
|
||||||
|
"Nov",
|
||||||
|
"Dec",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const completedTasksChart = {
|
||||||
|
...completedTaskChart,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Tasks",
|
||||||
|
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const statisticsChartsData = [
|
||||||
|
{
|
||||||
|
color: "white",
|
||||||
|
title: "Website View",
|
||||||
|
description: "Last Campaign Performance",
|
||||||
|
footer: "campaign sent 2 days ago",
|
||||||
|
chart: websiteViewsChart,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "white",
|
||||||
|
title: "Daily Sales",
|
||||||
|
description: "15% increase in today sales",
|
||||||
|
footer: "updated 4 min ago",
|
||||||
|
chart: dailySalesChart,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: "white",
|
||||||
|
title: "Completed Tasks",
|
||||||
|
description: "Last Campaign Performance",
|
||||||
|
footer: "just updated",
|
||||||
|
chart: completedTasksChart,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default statisticsChartsData;
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { Routes, Route } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
ChartPieIcon,
|
||||||
|
UserIcon,
|
||||||
|
UserPlusIcon,
|
||||||
|
ArrowRightOnRectangleIcon,
|
||||||
|
} from "@heroicons/react/24/solid";
|
||||||
|
import { Navbar, Footer } from "@/widgets/layout";
|
||||||
|
import routes from "@/routes";
|
||||||
|
|
||||||
|
export function Auth() {
|
||||||
|
const navbarRoutes = [
|
||||||
|
{
|
||||||
|
name: "dashboard",
|
||||||
|
path: "/dashboard/home",
|
||||||
|
icon: ChartPieIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "profile",
|
||||||
|
path: "/dashboard/home",
|
||||||
|
icon: UserIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "sign up",
|
||||||
|
path: "/auth/sign-up",
|
||||||
|
icon: UserPlusIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "sign in",
|
||||||
|
path: "/auth/sign-in",
|
||||||
|
icon: ArrowRightOnRectangleIcon,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen w-full">
|
||||||
|
<Routes>
|
||||||
|
{routes.map(
|
||||||
|
({ layout, pages }) =>
|
||||||
|
layout === "auth" &&
|
||||||
|
pages.map(({ path, element }) => (
|
||||||
|
<Route exact path={path} element={element} />
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</Routes>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Auth.displayName = "/src/layout/Auth.jsx";
|
||||||
|
|
||||||
|
export default Auth;
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import { Routes, Route } from "react-router-dom";
|
||||||
|
import { Cog6ToothIcon } from "@heroicons/react/24/solid";
|
||||||
|
import { IconButton } from "@material-tailwind/react";
|
||||||
|
import {
|
||||||
|
Sidenav,
|
||||||
|
DashboardNavbar,
|
||||||
|
Configurator,
|
||||||
|
Footer,
|
||||||
|
} from "@/widgets/layout";
|
||||||
|
import routes from "@/routes";
|
||||||
|
import { useMaterialTailwindController, setOpenConfigurator } from "@/context";
|
||||||
|
|
||||||
|
export function Dashboard() {
|
||||||
|
const [controller, dispatch] = useMaterialTailwindController();
|
||||||
|
const { sidenavType } = controller;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-blue-gray-50/50">
|
||||||
|
<Sidenav
|
||||||
|
routes={routes}
|
||||||
|
brandImg={
|
||||||
|
sidenavType === "dark" ? "/img/logo-ct.png" : "/img/logo-ct-dark.png"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="p-4 xl:ml-80">
|
||||||
|
<DashboardNavbar />
|
||||||
|
<Configurator />
|
||||||
|
<IconButton
|
||||||
|
size="lg"
|
||||||
|
color="white"
|
||||||
|
className="fixed bottom-8 right-8 z-40 rounded-full shadow-blue-gray-900/10"
|
||||||
|
ripple={false}
|
||||||
|
onClick={() => setOpenConfigurator(dispatch, true)}
|
||||||
|
>
|
||||||
|
<Cog6ToothIcon className="h-5 w-5" />
|
||||||
|
</IconButton>
|
||||||
|
<Routes>
|
||||||
|
{routes.map(
|
||||||
|
({ layout, pages }) =>
|
||||||
|
layout === "dashboard" &&
|
||||||
|
pages.map(({ path, element }) => (
|
||||||
|
<Route exact path={path} element={element} />
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</Routes>
|
||||||
|
<div className="text-blue-gray-600">
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Dashboard.displayName = "/src/layout/dashboard.jsx";
|
||||||
|
|
||||||
|
export default Dashboard;
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export * from "@/layouts/dashboard";
|
||||||
|
export * from "@/layouts/auth";
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
/**
|
||||||
|
=========================================================
|
||||||
|
* Material Tailwind Dashboard React - v2.1.0
|
||||||
|
=========================================================
|
||||||
|
* Product Page: https://www.creative-tim.com/product/material-tailwind-dashboard-react
|
||||||
|
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||||
|
* Licensed under MIT (https://github.com/creativetimofficial/material-tailwind-dashboard-react/blob/main/LICENSE.md)
|
||||||
|
* Coded by Creative Tim
|
||||||
|
=========================================================
|
||||||
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
*/
|
||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import App from "./App";
|
||||||
|
import { BrowserRouter } from "react-router-dom";
|
||||||
|
import { ThemeProvider } from "@material-tailwind/react";
|
||||||
|
import { MaterialTailwindControllerProvider } from "@/context";
|
||||||
|
import "../public/css/tailwind.css";
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<BrowserRouter>
|
||||||
|
<ThemeProvider>
|
||||||
|
<MaterialTailwindControllerProvider>
|
||||||
|
<App />
|
||||||
|
</MaterialTailwindControllerProvider>
|
||||||
|
</ThemeProvider>
|
||||||
|
</BrowserRouter>
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export * from "@/pages/auth/sign-in";
|
||||||
|
export * from "@/pages/auth/sign-up";
|
||||||
@@ -0,0 +1,126 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
Input,
|
||||||
|
Checkbox,
|
||||||
|
Button,
|
||||||
|
Typography,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
|
||||||
|
export function SignIn() {
|
||||||
|
return (
|
||||||
|
<section className="m-8 flex gap-4">
|
||||||
|
<div className="w-full lg:w-3/5 mt-24">
|
||||||
|
<div className="text-center">
|
||||||
|
<Typography variant="h2" className="font-bold mb-4">Sign In</Typography>
|
||||||
|
<Typography variant="paragraph" color="blue-gray" className="text-lg font-normal">Enter your email and password to Sign In.</Typography>
|
||||||
|
</div>
|
||||||
|
<form className="mt-8 mb-2 mx-auto w-80 max-w-screen-lg lg:w-1/2">
|
||||||
|
<div className="mb-1 flex flex-col gap-6">
|
||||||
|
<Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
|
||||||
|
Your email
|
||||||
|
</Typography>
|
||||||
|
<Input
|
||||||
|
size="lg"
|
||||||
|
placeholder="name@mail.com"
|
||||||
|
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
|
||||||
|
labelProps={{
|
||||||
|
className: "before:content-none after:content-none",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
|
||||||
|
Password
|
||||||
|
</Typography>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
size="lg"
|
||||||
|
placeholder="********"
|
||||||
|
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
|
||||||
|
labelProps={{
|
||||||
|
className: "before:content-none after:content-none",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Checkbox
|
||||||
|
label={
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="gray"
|
||||||
|
className="flex items-center justify-start font-medium"
|
||||||
|
>
|
||||||
|
I agree the
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="font-normal text-black transition-colors hover:text-gray-900 underline"
|
||||||
|
>
|
||||||
|
Terms and Conditions
|
||||||
|
</a>
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
containerProps={{ className: "-ml-2.5" }}
|
||||||
|
/>
|
||||||
|
<Button className="mt-6" fullWidth>
|
||||||
|
Sign In
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between gap-2 mt-6">
|
||||||
|
<Checkbox
|
||||||
|
label={
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="gray"
|
||||||
|
className="flex items-center justify-start font-medium"
|
||||||
|
>
|
||||||
|
Subscribe me to newsletter
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
containerProps={{ className: "-ml-2.5" }}
|
||||||
|
/>
|
||||||
|
<Typography variant="small" className="font-medium text-gray-900">
|
||||||
|
<a href="#">
|
||||||
|
Forgot Password
|
||||||
|
</a>
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4 mt-8">
|
||||||
|
<Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
|
||||||
|
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clipPath="url(#clip0_1156_824)">
|
||||||
|
<path d="M16.3442 8.18429C16.3442 7.64047 16.3001 7.09371 16.206 6.55872H8.66016V9.63937H12.9813C12.802 10.6329 12.2258 11.5119 11.3822 12.0704V14.0693H13.9602C15.4741 12.6759 16.3442 10.6182 16.3442 8.18429Z" fill="#4285F4" />
|
||||||
|
<path d="M8.65974 16.0006C10.8174 16.0006 12.637 15.2922 13.9627 14.0693L11.3847 12.0704C10.6675 12.5584 9.7415 12.8347 8.66268 12.8347C6.5756 12.8347 4.80598 11.4266 4.17104 9.53357H1.51074V11.5942C2.86882 14.2956 5.63494 16.0006 8.65974 16.0006Z" fill="#34A853" />
|
||||||
|
<path d="M4.16852 9.53356C3.83341 8.53999 3.83341 7.46411 4.16852 6.47054V4.40991H1.51116C0.376489 6.67043 0.376489 9.33367 1.51116 11.5942L4.16852 9.53356Z" fill="#FBBC04" />
|
||||||
|
<path d="M8.65974 3.16644C9.80029 3.1488 10.9026 3.57798 11.7286 4.36578L14.0127 2.08174C12.5664 0.72367 10.6469 -0.0229773 8.65974 0.000539111C5.63494 0.000539111 2.86882 1.70548 1.51074 4.40987L4.1681 6.4705C4.8001 4.57449 6.57266 3.16644 8.65974 3.16644Z" fill="#EA4335" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1156_824">
|
||||||
|
<rect width="16" height="16" fill="white" transform="translate(0.5)" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
<span>Sign in With Google</span>
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
|
||||||
|
<img src="/img/twitter-logo.svg" height={24} width={24} alt="" />
|
||||||
|
<span>Sign in With Twitter</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Typography variant="paragraph" className="text-center text-blue-gray-500 font-medium mt-4">
|
||||||
|
Not registered?
|
||||||
|
<Link to="/auth/sign-up" className="text-gray-900 ml-1">Create account</Link>
|
||||||
|
</Typography>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="w-2/5 h-full hidden lg:block">
|
||||||
|
<img
|
||||||
|
src="/img/pattern.png"
|
||||||
|
className="h-full w-full object-cover rounded-3xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SignIn;
|
||||||
@@ -0,0 +1,94 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
Input,
|
||||||
|
Checkbox,
|
||||||
|
Button,
|
||||||
|
Typography,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
|
||||||
|
export function SignUp() {
|
||||||
|
return (
|
||||||
|
<section className="m-8 flex">
|
||||||
|
<div className="w-2/5 h-full hidden lg:block">
|
||||||
|
<img
|
||||||
|
src="/img/pattern.png"
|
||||||
|
className="h-full w-full object-cover rounded-3xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="w-full lg:w-3/5 flex flex-col items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<Typography variant="h2" className="font-bold mb-4">Join Us Today</Typography>
|
||||||
|
<Typography variant="paragraph" color="blue-gray" className="text-lg font-normal">Enter your email and password to register.</Typography>
|
||||||
|
</div>
|
||||||
|
<form className="mt-8 mb-2 mx-auto w-80 max-w-screen-lg lg:w-1/2">
|
||||||
|
<div className="mb-1 flex flex-col gap-6">
|
||||||
|
<Typography variant="small" color="blue-gray" className="-mb-3 font-medium">
|
||||||
|
Your email
|
||||||
|
</Typography>
|
||||||
|
<Input
|
||||||
|
size="lg"
|
||||||
|
placeholder="name@mail.com"
|
||||||
|
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
|
||||||
|
labelProps={{
|
||||||
|
className: "before:content-none after:content-none",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Checkbox
|
||||||
|
label={
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="gray"
|
||||||
|
className="flex items-center justify-start font-medium"
|
||||||
|
>
|
||||||
|
I agree the
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="font-normal text-black transition-colors hover:text-gray-900 underline"
|
||||||
|
>
|
||||||
|
Terms and Conditions
|
||||||
|
</a>
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
containerProps={{ className: "-ml-2.5" }}
|
||||||
|
/>
|
||||||
|
<Button className="mt-6" fullWidth>
|
||||||
|
Register Now
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="space-y-4 mt-8">
|
||||||
|
<Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
|
||||||
|
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clipPath="url(#clip0_1156_824)">
|
||||||
|
<path d="M16.3442 8.18429C16.3442 7.64047 16.3001 7.09371 16.206 6.55872H8.66016V9.63937H12.9813C12.802 10.6329 12.2258 11.5119 11.3822 12.0704V14.0693H13.9602C15.4741 12.6759 16.3442 10.6182 16.3442 8.18429Z" fill="#4285F4" />
|
||||||
|
<path d="M8.65974 16.0006C10.8174 16.0006 12.637 15.2922 13.9627 14.0693L11.3847 12.0704C10.6675 12.5584 9.7415 12.8347 8.66268 12.8347C6.5756 12.8347 4.80598 11.4266 4.17104 9.53357H1.51074V11.5942C2.86882 14.2956 5.63494 16.0006 8.65974 16.0006Z" fill="#34A853" />
|
||||||
|
<path d="M4.16852 9.53356C3.83341 8.53999 3.83341 7.46411 4.16852 6.47054V4.40991H1.51116C0.376489 6.67043 0.376489 9.33367 1.51116 11.5942L4.16852 9.53356Z" fill="#FBBC04" />
|
||||||
|
<path d="M8.65974 3.16644C9.80029 3.1488 10.9026 3.57798 11.7286 4.36578L14.0127 2.08174C12.5664 0.72367 10.6469 -0.0229773 8.65974 0.000539111C5.63494 0.000539111 2.86882 1.70548 1.51074 4.40987L4.1681 6.4705C4.8001 4.57449 6.57266 3.16644 8.65974 3.16644Z" fill="#EA4335" />
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1156_824">
|
||||||
|
<rect width="16" height="16" fill="white" transform="translate(0.5)" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
<span>Sign in With Google</span>
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" color="white" className="flex items-center gap-2 justify-center shadow-md" fullWidth>
|
||||||
|
<img src="/img/twitter-logo.svg" height={24} width={24} alt="" />
|
||||||
|
<span>Sign in With Twitter</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Typography variant="paragraph" className="text-center text-blue-gray-500 font-medium mt-4">
|
||||||
|
Already have an account?
|
||||||
|
<Link to="/auth/sign-in" className="text-gray-900 ml-1">Sign in</Link>
|
||||||
|
</Typography>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SignUp;
|
||||||
@@ -0,0 +1,258 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Typography,
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardBody,
|
||||||
|
IconButton,
|
||||||
|
Menu,
|
||||||
|
MenuHandler,
|
||||||
|
MenuList,
|
||||||
|
MenuItem,
|
||||||
|
Avatar,
|
||||||
|
Tooltip,
|
||||||
|
Progress,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import {
|
||||||
|
EllipsisVerticalIcon,
|
||||||
|
ArrowUpIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
|
import { StatisticsCard } from "@/widgets/cards";
|
||||||
|
import { StatisticsChart } from "@/widgets/charts";
|
||||||
|
import {
|
||||||
|
statisticsCardsData,
|
||||||
|
statisticsChartsData,
|
||||||
|
projectsTableData,
|
||||||
|
ordersOverviewData,
|
||||||
|
} from "@/data";
|
||||||
|
import { CheckCircleIcon, ClockIcon } from "@heroicons/react/24/solid";
|
||||||
|
|
||||||
|
export function Home() {
|
||||||
|
return (
|
||||||
|
<div className="mt-12">
|
||||||
|
<div className="mb-12 grid gap-y-10 gap-x-6 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
{statisticsCardsData.map(({ icon, title, footer, ...rest }) => (
|
||||||
|
<StatisticsCard
|
||||||
|
key={title}
|
||||||
|
{...rest}
|
||||||
|
title={title}
|
||||||
|
icon={React.createElement(icon, {
|
||||||
|
className: "w-6 h-6 text-white",
|
||||||
|
})}
|
||||||
|
footer={
|
||||||
|
<Typography className="font-normal text-blue-gray-600">
|
||||||
|
<strong className={footer.color}>{footer.value}</strong>
|
||||||
|
{footer.label}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mb-6 grid grid-cols-1 gap-y-12 gap-x-6 md:grid-cols-2 xl:grid-cols-3">
|
||||||
|
{statisticsChartsData.map((props) => (
|
||||||
|
<StatisticsChart
|
||||||
|
key={props.title}
|
||||||
|
{...props}
|
||||||
|
footer={
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="flex items-center font-normal text-blue-gray-600"
|
||||||
|
>
|
||||||
|
<ClockIcon strokeWidth={2} className="h-4 w-4 text-blue-gray-400" />
|
||||||
|
{props.footer}
|
||||||
|
</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mb-4 grid grid-cols-1 gap-6 xl:grid-cols-3">
|
||||||
|
<Card className="overflow-hidden xl:col-span-2 border border-blue-gray-100 shadow-sm">
|
||||||
|
<CardHeader
|
||||||
|
floated={false}
|
||||||
|
shadow={false}
|
||||||
|
color="transparent"
|
||||||
|
className="m-0 flex items-center justify-between p-6"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Typography variant="h6" color="blue-gray" className="mb-1">
|
||||||
|
Projects
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="flex items-center gap-1 font-normal text-blue-gray-600"
|
||||||
|
>
|
||||||
|
<CheckCircleIcon strokeWidth={3} className="h-4 w-4 text-blue-gray-200" />
|
||||||
|
<strong>30 done</strong> this month
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<Menu placement="left-start">
|
||||||
|
<MenuHandler>
|
||||||
|
<IconButton size="sm" variant="text" color="blue-gray">
|
||||||
|
<EllipsisVerticalIcon
|
||||||
|
strokeWidth={3}
|
||||||
|
fill="currenColor"
|
||||||
|
className="h-6 w-6"
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</MenuHandler>
|
||||||
|
<MenuList>
|
||||||
|
<MenuItem>Action</MenuItem>
|
||||||
|
<MenuItem>Another Action</MenuItem>
|
||||||
|
<MenuItem>Something else here</MenuItem>
|
||||||
|
</MenuList>
|
||||||
|
</Menu>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
|
||||||
|
<table className="w-full min-w-[640px] table-auto">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{["companies", "members", "budget", "completion"].map(
|
||||||
|
(el) => (
|
||||||
|
<th
|
||||||
|
key={el}
|
||||||
|
className="border-b border-blue-gray-50 py-3 px-6 text-left"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="text-[11px] font-medium uppercase text-blue-gray-400"
|
||||||
|
>
|
||||||
|
{el}
|
||||||
|
</Typography>
|
||||||
|
</th>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{projectsTableData.map(
|
||||||
|
({ img, name, members, budget, completion }, key) => {
|
||||||
|
const className = `py-3 px-5 ${
|
||||||
|
key === projectsTableData.length - 1
|
||||||
|
? ""
|
||||||
|
: "border-b border-blue-gray-50"
|
||||||
|
}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={name}>
|
||||||
|
<td className={className}>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Avatar src={img} alt={name} size="sm" />
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="font-bold"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
{members.map(({ img, name }, key) => (
|
||||||
|
<Tooltip key={name} content={name}>
|
||||||
|
<Avatar
|
||||||
|
src={img}
|
||||||
|
alt={name}
|
||||||
|
size="xs"
|
||||||
|
variant="circular"
|
||||||
|
className={`cursor-pointer border-2 border-white ${
|
||||||
|
key === 0 ? "" : "-ml-2.5"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="text-xs font-medium text-blue-gray-600"
|
||||||
|
>
|
||||||
|
{budget}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<div className="w-10/12">
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mb-1 block text-xs font-medium text-blue-gray-600"
|
||||||
|
>
|
||||||
|
{completion}%
|
||||||
|
</Typography>
|
||||||
|
<Progress
|
||||||
|
value={completion}
|
||||||
|
variant="gradient"
|
||||||
|
color={completion === 100 ? "green" : "blue"}
|
||||||
|
className="h-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card className="border border-blue-gray-100 shadow-sm">
|
||||||
|
<CardHeader
|
||||||
|
floated={false}
|
||||||
|
shadow={false}
|
||||||
|
color="transparent"
|
||||||
|
className="m-0 p-6"
|
||||||
|
>
|
||||||
|
<Typography variant="h6" color="blue-gray" className="mb-2">
|
||||||
|
Orders Overview
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="flex items-center gap-1 font-normal text-blue-gray-600"
|
||||||
|
>
|
||||||
|
<ArrowUpIcon
|
||||||
|
strokeWidth={3}
|
||||||
|
className="h-3.5 w-3.5 text-green-500"
|
||||||
|
/>
|
||||||
|
<strong>24%</strong> this month
|
||||||
|
</Typography>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="pt-0">
|
||||||
|
{ordersOverviewData.map(
|
||||||
|
({ icon, color, title, description }, key) => (
|
||||||
|
<div key={title} className="flex items-start gap-4 py-3">
|
||||||
|
<div
|
||||||
|
className={`relative p-1 after:absolute after:-bottom-6 after:left-2/4 after:w-0.5 after:-translate-x-2/4 after:bg-blue-gray-50 after:content-[''] ${
|
||||||
|
key === ordersOverviewData.length - 1
|
||||||
|
? "after:h-0"
|
||||||
|
: "after:h-4/6"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{React.createElement(icon, {
|
||||||
|
className: `!w-5 !h-5 ${color}`,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="block font-medium"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
as="span"
|
||||||
|
variant="small"
|
||||||
|
className="text-xs font-medium text-blue-gray-500"
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home;
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
export * from "@/pages/dashboard/home";
|
||||||
|
export * from "@/pages/dashboard/profile";
|
||||||
|
export * from "@/pages/dashboard/tables";
|
||||||
|
export * from "@/pages/dashboard/notifications";
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Typography,
|
||||||
|
Alert,
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardBody,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import { InformationCircleIcon } from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
|
export function Notifications() {
|
||||||
|
const [showAlerts, setShowAlerts] = React.useState({
|
||||||
|
blue: true,
|
||||||
|
green: true,
|
||||||
|
orange: true,
|
||||||
|
red: true,
|
||||||
|
});
|
||||||
|
const [showAlertsWithIcon, setShowAlertsWithIcon] = React.useState({
|
||||||
|
blue: true,
|
||||||
|
green: true,
|
||||||
|
orange: true,
|
||||||
|
red: true,
|
||||||
|
});
|
||||||
|
const alerts = ["gray", "green", "orange", "red"];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto my-20 flex max-w-screen-lg flex-col gap-8">
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
color="transparent"
|
||||||
|
floated={false}
|
||||||
|
shadow={false}
|
||||||
|
className="m-0 p-4"
|
||||||
|
>
|
||||||
|
<Typography variant="h5" color="blue-gray">
|
||||||
|
Alerts
|
||||||
|
</Typography>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="flex flex-col gap-4 p-4">
|
||||||
|
{alerts.map((color) => (
|
||||||
|
<Alert
|
||||||
|
key={color}
|
||||||
|
open={showAlerts[color]}
|
||||||
|
color={color}
|
||||||
|
onClose={() => setShowAlerts((current) => ({ ...current, [color]: false }))}
|
||||||
|
>
|
||||||
|
A simple {color} alert with an <a href="#">example link</a>. Give
|
||||||
|
it a click if you like.
|
||||||
|
</Alert>
|
||||||
|
))}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader
|
||||||
|
color="transparent"
|
||||||
|
floated={false}
|
||||||
|
shadow={false}
|
||||||
|
className="m-0 p-4"
|
||||||
|
>
|
||||||
|
<Typography variant="h5" color="blue-gray">
|
||||||
|
Alerts with Icon
|
||||||
|
</Typography>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="flex flex-col gap-4 p-4">
|
||||||
|
{alerts.map((color) => (
|
||||||
|
<Alert
|
||||||
|
key={color}
|
||||||
|
open={showAlertsWithIcon[color]}
|
||||||
|
color={color}
|
||||||
|
icon={
|
||||||
|
<InformationCircleIcon strokeWidth={2} className="h-6 w-6" />
|
||||||
|
}
|
||||||
|
onClose={() => setShowAlertsWithIcon((current) => ({
|
||||||
|
...current,
|
||||||
|
[color]: false,
|
||||||
|
}))}
|
||||||
|
>
|
||||||
|
A simple {color} alert with an <a href="#">example link</a>. Give
|
||||||
|
it a click if you like.
|
||||||
|
</Alert>
|
||||||
|
))}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Notifications;
|
||||||
@@ -0,0 +1,221 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardBody,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
Avatar,
|
||||||
|
Typography,
|
||||||
|
Tabs,
|
||||||
|
TabsHeader,
|
||||||
|
Tab,
|
||||||
|
Switch,
|
||||||
|
Tooltip,
|
||||||
|
Button,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import {
|
||||||
|
HomeIcon,
|
||||||
|
ChatBubbleLeftEllipsisIcon,
|
||||||
|
Cog6ToothIcon,
|
||||||
|
PencilIcon,
|
||||||
|
} from "@heroicons/react/24/solid";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { ProfileInfoCard, MessageCard } from "@/widgets/cards";
|
||||||
|
import { platformSettingsData, conversationsData, projectsData } from "@/data";
|
||||||
|
|
||||||
|
export function Profile() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="relative mt-8 h-72 w-full overflow-hidden rounded-xl bg-[url('/img/background-image.png')] bg-cover bg-center">
|
||||||
|
<div className="absolute inset-0 h-full w-full bg-gray-900/75" />
|
||||||
|
</div>
|
||||||
|
<Card className="mx-3 -mt-16 mb-6 lg:mx-4 border border-blue-gray-100">
|
||||||
|
<CardBody className="p-4">
|
||||||
|
<div className="mb-10 flex items-center justify-between flex-wrap gap-6">
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<Avatar
|
||||||
|
src="/img/bruce-mars.jpeg"
|
||||||
|
alt="bruce-mars"
|
||||||
|
size="xl"
|
||||||
|
variant="rounded"
|
||||||
|
className="rounded-lg shadow-lg shadow-blue-gray-500/40"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<Typography variant="h5" color="blue-gray" className="mb-1">
|
||||||
|
Richard Davis
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="font-normal text-blue-gray-600"
|
||||||
|
>
|
||||||
|
CEO / Co-Founder
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-96">
|
||||||
|
<Tabs value="app">
|
||||||
|
<TabsHeader>
|
||||||
|
<Tab value="app">
|
||||||
|
<HomeIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
|
||||||
|
App
|
||||||
|
</Tab>
|
||||||
|
<Tab value="message">
|
||||||
|
<ChatBubbleLeftEllipsisIcon className="-mt-0.5 mr-2 inline-block h-5 w-5" />
|
||||||
|
Message
|
||||||
|
</Tab>
|
||||||
|
<Tab value="settings">
|
||||||
|
<Cog6ToothIcon className="-mt-1 mr-2 inline-block h-5 w-5" />
|
||||||
|
Settings
|
||||||
|
</Tab>
|
||||||
|
</TabsHeader>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="gird-cols-1 mb-12 grid gap-12 px-4 lg:grid-cols-2 xl:grid-cols-3">
|
||||||
|
<div>
|
||||||
|
<Typography variant="h6" color="blue-gray" className="mb-3">
|
||||||
|
Platform Settings
|
||||||
|
</Typography>
|
||||||
|
<div className="flex flex-col gap-12">
|
||||||
|
{platformSettingsData.map(({ title, options }) => (
|
||||||
|
<div key={title}>
|
||||||
|
<Typography className="mb-4 block text-xs font-semibold uppercase text-blue-gray-500">
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{options.map(({ checked, label }) => (
|
||||||
|
<Switch
|
||||||
|
key={label}
|
||||||
|
id={label}
|
||||||
|
label={label}
|
||||||
|
defaultChecked={checked}
|
||||||
|
labelProps={{
|
||||||
|
className: "text-sm font-normal text-blue-gray-500",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ProfileInfoCard
|
||||||
|
title="Profile Information"
|
||||||
|
description="Hi, I'm Alec Thompson, Decisions: If you can't decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality)."
|
||||||
|
details={{
|
||||||
|
"first name": "Alec M. Thompson",
|
||||||
|
mobile: "(44) 123 1234 123",
|
||||||
|
email: "alecthompson@mail.com",
|
||||||
|
location: "USA",
|
||||||
|
social: (
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<i className="fa-brands fa-facebook text-blue-700" />
|
||||||
|
<i className="fa-brands fa-twitter text-blue-400" />
|
||||||
|
<i className="fa-brands fa-instagram text-purple-500" />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
}}
|
||||||
|
action={
|
||||||
|
<Tooltip content="Edit Profile">
|
||||||
|
<PencilIcon className="h-4 w-4 cursor-pointer text-blue-gray-500" />
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<Typography variant="h6" color="blue-gray" className="mb-3">
|
||||||
|
Platform Settings
|
||||||
|
</Typography>
|
||||||
|
<ul className="flex flex-col gap-6">
|
||||||
|
{conversationsData.map((props) => (
|
||||||
|
<MessageCard
|
||||||
|
key={props.name}
|
||||||
|
{...props}
|
||||||
|
action={
|
||||||
|
<Button variant="text" size="sm">
|
||||||
|
reply
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-4 pb-4">
|
||||||
|
<Typography variant="h6" color="blue-gray" className="mb-2">
|
||||||
|
Projects
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="font-normal text-blue-gray-500"
|
||||||
|
>
|
||||||
|
Architects design houses
|
||||||
|
</Typography>
|
||||||
|
<div className="mt-6 grid grid-cols-1 gap-12 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
{projectsData.map(
|
||||||
|
({ img, title, description, tag, route, members }) => (
|
||||||
|
<Card key={title} color="transparent" shadow={false}>
|
||||||
|
<CardHeader
|
||||||
|
floated={false}
|
||||||
|
color="gray"
|
||||||
|
className="mx-0 mt-0 mb-4 h-64 xl:h-40"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={img}
|
||||||
|
alt={title}
|
||||||
|
className="h-full w-full object-cover"
|
||||||
|
/>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="py-0 px-1">
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="font-normal text-blue-gray-500"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="h5"
|
||||||
|
color="blue-gray"
|
||||||
|
className="mt-1 mb-2"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="font-normal text-blue-gray-500"
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</Typography>
|
||||||
|
</CardBody>
|
||||||
|
<CardFooter className="mt-6 flex items-center justify-between py-0 px-1">
|
||||||
|
<Link to={route}>
|
||||||
|
<Button variant="outlined" size="sm">
|
||||||
|
view project
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<div>
|
||||||
|
{members.map(({ img, name }, key) => (
|
||||||
|
<Tooltip key={name} content={name}>
|
||||||
|
<Avatar
|
||||||
|
src={img}
|
||||||
|
alt={name}
|
||||||
|
size="xs"
|
||||||
|
variant="circular"
|
||||||
|
className={`cursor-pointer border-2 border-white ${
|
||||||
|
key === 0 ? "" : "-ml-2.5"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Profile;
|
||||||
@@ -0,0 +1,221 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardBody,
|
||||||
|
Typography,
|
||||||
|
Avatar,
|
||||||
|
Chip,
|
||||||
|
Tooltip,
|
||||||
|
Progress,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { authorsTableData, projectsTableData } from "@/data";
|
||||||
|
|
||||||
|
export function Tables() {
|
||||||
|
return (
|
||||||
|
<div className="mt-12 mb-8 flex flex-col gap-12">
|
||||||
|
<Card>
|
||||||
|
<CardHeader variant="gradient" color="gray" className="mb-8 p-6">
|
||||||
|
<Typography variant="h6" color="white">
|
||||||
|
Authors Table
|
||||||
|
</Typography>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
|
||||||
|
<table className="w-full min-w-[640px] table-auto">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{["author", "function", "status", "employed", ""].map((el) => (
|
||||||
|
<th
|
||||||
|
key={el}
|
||||||
|
className="border-b border-blue-gray-50 py-3 px-5 text-left"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="text-[11px] font-bold uppercase text-blue-gray-400"
|
||||||
|
>
|
||||||
|
{el}
|
||||||
|
</Typography>
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{authorsTableData.map(
|
||||||
|
({ img, name, email, job, online, date }, key) => {
|
||||||
|
const className = `py-3 px-5 ${
|
||||||
|
key === authorsTableData.length - 1
|
||||||
|
? ""
|
||||||
|
: "border-b border-blue-gray-50"
|
||||||
|
}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={name}>
|
||||||
|
<td className={className}>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Avatar src={img} alt={name} size="sm" variant="rounded" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="font-semibold"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
<Typography className="text-xs font-normal text-blue-gray-500">
|
||||||
|
{email}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<Typography className="text-xs font-semibold text-blue-gray-600">
|
||||||
|
{job[0]}
|
||||||
|
</Typography>
|
||||||
|
<Typography className="text-xs font-normal text-blue-gray-500">
|
||||||
|
{job[1]}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<Chip
|
||||||
|
variant="gradient"
|
||||||
|
color={online ? "green" : "blue-gray"}
|
||||||
|
value={online ? "online" : "offline"}
|
||||||
|
className="py-0.5 px-2 text-[11px] font-medium w-fit"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<Typography className="text-xs font-semibold text-blue-gray-600">
|
||||||
|
{date}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<Typography
|
||||||
|
as="a"
|
||||||
|
href="#"
|
||||||
|
className="text-xs font-semibold text-blue-gray-600"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader variant="gradient" color="gray" className="mb-8 p-6">
|
||||||
|
<Typography variant="h6" color="white">
|
||||||
|
Projects Table
|
||||||
|
</Typography>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="overflow-x-scroll px-0 pt-0 pb-2">
|
||||||
|
<table className="w-full min-w-[640px] table-auto">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{["companies", "members", "budget", "completion", ""].map(
|
||||||
|
(el) => (
|
||||||
|
<th
|
||||||
|
key={el}
|
||||||
|
className="border-b border-blue-gray-50 py-3 px-5 text-left"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="text-[11px] font-bold uppercase text-blue-gray-400"
|
||||||
|
>
|
||||||
|
{el}
|
||||||
|
</Typography>
|
||||||
|
</th>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{projectsTableData.map(
|
||||||
|
({ img, name, members, budget, completion }, key) => {
|
||||||
|
const className = `py-3 px-5 ${
|
||||||
|
key === projectsTableData.length - 1
|
||||||
|
? ""
|
||||||
|
: "border-b border-blue-gray-50"
|
||||||
|
}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={name}>
|
||||||
|
<td className={className}>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Avatar src={img} alt={name} size="sm" />
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="font-bold"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
{members.map(({ img, name }, key) => (
|
||||||
|
<Tooltip key={name} content={name}>
|
||||||
|
<Avatar
|
||||||
|
src={img}
|
||||||
|
alt={name}
|
||||||
|
size="xs"
|
||||||
|
variant="circular"
|
||||||
|
className={`cursor-pointer border-2 border-white ${
|
||||||
|
key === 0 ? "" : "-ml-2.5"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="text-xs font-medium text-blue-gray-600"
|
||||||
|
>
|
||||||
|
{budget}
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<div className="w-10/12">
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mb-1 block text-xs font-medium text-blue-gray-600"
|
||||||
|
>
|
||||||
|
{completion}%
|
||||||
|
</Typography>
|
||||||
|
<Progress
|
||||||
|
value={completion}
|
||||||
|
variant="gradient"
|
||||||
|
color={completion === 100 ? "green" : "gray"}
|
||||||
|
className="h-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className={className}>
|
||||||
|
<Typography
|
||||||
|
as="a"
|
||||||
|
href="#"
|
||||||
|
className="text-xs font-semibold text-blue-gray-600"
|
||||||
|
>
|
||||||
|
<EllipsisVerticalIcon
|
||||||
|
strokeWidth={2}
|
||||||
|
className="h-5 w-5 text-inherit"
|
||||||
|
/>
|
||||||
|
</Typography>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Tables;
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import {
|
||||||
|
HomeIcon,
|
||||||
|
UserCircleIcon,
|
||||||
|
TableCellsIcon,
|
||||||
|
InformationCircleIcon,
|
||||||
|
ServerStackIcon,
|
||||||
|
RectangleStackIcon,
|
||||||
|
} from "@heroicons/react/24/solid";
|
||||||
|
import { Home, Profile, Tables, Notifications } from "@/pages/dashboard";
|
||||||
|
import { SignIn, SignUp } from "@/pages/auth";
|
||||||
|
|
||||||
|
const icon = {
|
||||||
|
className: "w-5 h-5 text-inherit",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const routes = [
|
||||||
|
{
|
||||||
|
layout: "dashboard",
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
icon: <HomeIcon {...icon} />,
|
||||||
|
name: "dashboard",
|
||||||
|
path: "/home",
|
||||||
|
element: <Home />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <UserCircleIcon {...icon} />,
|
||||||
|
name: "profile",
|
||||||
|
path: "/profile",
|
||||||
|
element: <Profile />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <TableCellsIcon {...icon} />,
|
||||||
|
name: "tables",
|
||||||
|
path: "/tables",
|
||||||
|
element: <Tables />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <InformationCircleIcon {...icon} />,
|
||||||
|
name: "notifications",
|
||||||
|
path: "/notifications",
|
||||||
|
element: <Notifications />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "auth pages",
|
||||||
|
layout: "auth",
|
||||||
|
pages: [
|
||||||
|
{
|
||||||
|
icon: <ServerStackIcon {...icon} />,
|
||||||
|
name: "sign in",
|
||||||
|
path: "/sign-in",
|
||||||
|
element: <SignIn />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <RectangleStackIcon {...icon} />,
|
||||||
|
name: "sign up",
|
||||||
|
path: "/sign-up",
|
||||||
|
element: <SignUp />,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default routes;
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
export * from "@/widgets/cards/statistics-card";
|
||||||
|
export * from "@/widgets/cards/profile-info-card";
|
||||||
|
export * from "@/widgets/cards/message-card";
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { Avatar, Typography } from "@material-tailwind/react";
|
||||||
|
|
||||||
|
export function MessageCard({ img, name, message, action }) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Avatar
|
||||||
|
src={img}
|
||||||
|
alt={name}
|
||||||
|
variant="rounded"
|
||||||
|
className="shadow-lg shadow-blue-gray-500/25"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="mb-1 font-semibold"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
<Typography className="text-xs font-normal text-blue-gray-400">
|
||||||
|
{message}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{action}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
MessageCard.defaultProps = {
|
||||||
|
action: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
MessageCard.propTypes = {
|
||||||
|
img: PropTypes.string.isRequired,
|
||||||
|
name: PropTypes.string.isRequired,
|
||||||
|
message: PropTypes.node.isRequired,
|
||||||
|
action: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
MessageCard.displayName = "/src/widgets/cards/message-card.jsx";
|
||||||
|
|
||||||
|
export default MessageCard;
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
import PropTypes from "prop-types";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardBody,
|
||||||
|
Typography,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
|
||||||
|
export function ProfileInfoCard({ title, description, details, action }) {
|
||||||
|
return (
|
||||||
|
<Card color="transparent" shadow={false}>
|
||||||
|
<CardHeader
|
||||||
|
color="transparent"
|
||||||
|
shadow={false}
|
||||||
|
floated={false}
|
||||||
|
className="mx-0 mt-0 mb-4 flex items-center justify-between gap-4"
|
||||||
|
>
|
||||||
|
<Typography variant="h6" color="blue-gray">
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
{action}
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="p-0">
|
||||||
|
{description && (
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="font-normal text-blue-gray-500"
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
{description && details ? (
|
||||||
|
<hr className="my-8 border-blue-gray-50" />
|
||||||
|
) : null}
|
||||||
|
{details && (
|
||||||
|
<ul className="flex flex-col gap-4 p-0">
|
||||||
|
{Object.keys(details).map((el, key) => (
|
||||||
|
<li key={key} className="flex items-center gap-4">
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="font-semibold capitalize"
|
||||||
|
>
|
||||||
|
{el}:
|
||||||
|
</Typography>
|
||||||
|
{typeof details[el] === "string" ? (
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="font-normal text-blue-gray-500"
|
||||||
|
>
|
||||||
|
{details[el]}
|
||||||
|
</Typography>
|
||||||
|
) : (
|
||||||
|
details[el]
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ProfileInfoCard.defaultProps = {
|
||||||
|
action: null,
|
||||||
|
description: null,
|
||||||
|
details: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
ProfileInfoCard.propTypes = {
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
description: PropTypes.node,
|
||||||
|
details: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
|
ProfileInfoCard.displayName = "/src/widgets/cards/profile-info-card.jsx";
|
||||||
|
|
||||||
|
export default ProfileInfoCard;
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardBody,
|
||||||
|
CardFooter,
|
||||||
|
Typography,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
|
export function StatisticsCard({ color, icon, title, value, footer }) {
|
||||||
|
return (
|
||||||
|
<Card className="border border-blue-gray-100 shadow-sm">
|
||||||
|
<CardHeader
|
||||||
|
variant="gradient"
|
||||||
|
color={color}
|
||||||
|
floated={false}
|
||||||
|
shadow={false}
|
||||||
|
className="absolute grid h-12 w-12 place-items-center"
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="p-4 text-right">
|
||||||
|
<Typography variant="small" className="font-normal text-blue-gray-600">
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="h4" color="blue-gray">
|
||||||
|
{value}
|
||||||
|
</Typography>
|
||||||
|
</CardBody>
|
||||||
|
{footer && (
|
||||||
|
<CardFooter className="border-t border-blue-gray-50 p-4">
|
||||||
|
{footer}
|
||||||
|
</CardFooter>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
StatisticsCard.defaultProps = {
|
||||||
|
color: "blue",
|
||||||
|
footer: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
StatisticsCard.propTypes = {
|
||||||
|
color: PropTypes.oneOf([
|
||||||
|
"white",
|
||||||
|
"blue-gray",
|
||||||
|
"gray",
|
||||||
|
"brown",
|
||||||
|
"deep-orange",
|
||||||
|
"orange",
|
||||||
|
"amber",
|
||||||
|
"yellow",
|
||||||
|
"lime",
|
||||||
|
"light-green",
|
||||||
|
"green",
|
||||||
|
"teal",
|
||||||
|
"cyan",
|
||||||
|
"light-blue",
|
||||||
|
"blue",
|
||||||
|
"indigo",
|
||||||
|
"deep-purple",
|
||||||
|
"purple",
|
||||||
|
"pink",
|
||||||
|
"red",
|
||||||
|
]),
|
||||||
|
icon: PropTypes.node.isRequired,
|
||||||
|
title: PropTypes.node.isRequired,
|
||||||
|
value: PropTypes.node.isRequired,
|
||||||
|
footer: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
StatisticsCard.displayName = "/src/widgets/cards/statistics-card.jsx";
|
||||||
|
|
||||||
|
export default StatisticsCard;
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export * from "@/widgets/charts/statistics-chart";
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardBody,
|
||||||
|
CardFooter,
|
||||||
|
Typography,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import Chart from "react-apexcharts";
|
||||||
|
|
||||||
|
export function StatisticsChart({ color, chart, title, description, footer }) {
|
||||||
|
return (
|
||||||
|
<Card className="border border-blue-gray-100 shadow-sm">
|
||||||
|
<CardHeader variant="gradient" color={color} floated={false} shadow={false}>
|
||||||
|
<Chart {...chart} />
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody className="px-6 pt-0">
|
||||||
|
<Typography variant="h6" color="blue-gray">
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="small" className="font-normal text-blue-gray-600">
|
||||||
|
{description}
|
||||||
|
</Typography>
|
||||||
|
</CardBody>
|
||||||
|
{footer && (
|
||||||
|
<CardFooter className="border-t border-blue-gray-50 px-6 py-5">
|
||||||
|
{footer}
|
||||||
|
</CardFooter>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
StatisticsChart.defaultProps = {
|
||||||
|
color: "blue",
|
||||||
|
footer: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
StatisticsChart.propTypes = {
|
||||||
|
color: PropTypes.oneOf([
|
||||||
|
"white",
|
||||||
|
"blue-gray",
|
||||||
|
"gray",
|
||||||
|
"brown",
|
||||||
|
"deep-orange",
|
||||||
|
"orange",
|
||||||
|
"amber",
|
||||||
|
"yellow",
|
||||||
|
"lime",
|
||||||
|
"light-green",
|
||||||
|
"green",
|
||||||
|
"teal",
|
||||||
|
"cyan",
|
||||||
|
"light-blue",
|
||||||
|
"blue",
|
||||||
|
"indigo",
|
||||||
|
"deep-purple",
|
||||||
|
"purple",
|
||||||
|
"pink",
|
||||||
|
"red",
|
||||||
|
]),
|
||||||
|
chart: PropTypes.object.isRequired,
|
||||||
|
title: PropTypes.node.isRequired,
|
||||||
|
description: PropTypes.node.isRequired,
|
||||||
|
footer: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
StatisticsChart.displayName = "/src/widgets/charts/statistics-chart.jsx";
|
||||||
|
|
||||||
|
export default StatisticsChart;
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
IconButton,
|
||||||
|
Switch,
|
||||||
|
Typography,
|
||||||
|
Chip,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import {
|
||||||
|
useMaterialTailwindController,
|
||||||
|
setOpenConfigurator,
|
||||||
|
setSidenavColor,
|
||||||
|
setSidenavType,
|
||||||
|
setFixedNavbar,
|
||||||
|
} from "@/context";
|
||||||
|
|
||||||
|
function formatNumber(number, decPlaces) {
|
||||||
|
decPlaces = Math.pow(10, decPlaces);
|
||||||
|
|
||||||
|
const abbrev = ["K", "M", "B", "T"];
|
||||||
|
|
||||||
|
for (let i = abbrev.length - 1; i >= 0; i--) {
|
||||||
|
var size = Math.pow(10, (i + 1) * 3);
|
||||||
|
|
||||||
|
if (size <= number) {
|
||||||
|
number = Math.round((number * decPlaces) / size) / decPlaces;
|
||||||
|
|
||||||
|
if (number == 1000 && i < abbrev.length - 1) {
|
||||||
|
number = 1;
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
|
||||||
|
number += abbrev[i];
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Configurator() {
|
||||||
|
const [controller, dispatch] = useMaterialTailwindController();
|
||||||
|
const { openConfigurator, sidenavColor, sidenavType, fixedNavbar } =
|
||||||
|
controller;
|
||||||
|
const [stars, setStars] = React.useState(0);
|
||||||
|
|
||||||
|
const sidenavColors = {
|
||||||
|
white: "from-gray-100 to-gray-100 border-gray-200",
|
||||||
|
dark: "from-black to-black border-gray-200",
|
||||||
|
green: "from-green-400 to-green-600",
|
||||||
|
orange: "from-orange-400 to-orange-600",
|
||||||
|
red: "from-red-400 to-red-600",
|
||||||
|
pink: "from-pink-400 to-pink-600",
|
||||||
|
};
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const stars = fetch(
|
||||||
|
"https://api.github.com/repos/creativetimofficial/material-tailwind-dashboard-react"
|
||||||
|
)
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => setStars(formatNumber(data.stargazers_count, 1)));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
className={`fixed top-0 right-0 z-50 h-screen w-96 bg-white px-2.5 shadow-lg transition-transform duration-300 ${
|
||||||
|
openConfigurator ? "translate-x-0" : "translate-x-96"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between px-6 pt-8 pb-6">
|
||||||
|
<div>
|
||||||
|
<Typography variant="h5" color="blue-gray">
|
||||||
|
Dashboard Configurator
|
||||||
|
</Typography>
|
||||||
|
<Typography className="font-normal text-blue-gray-600">
|
||||||
|
See our dashboard options.
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<IconButton
|
||||||
|
variant="text"
|
||||||
|
color="blue-gray"
|
||||||
|
onClick={() => setOpenConfigurator(dispatch, false)}
|
||||||
|
>
|
||||||
|
<XMarkIcon strokeWidth={2.5} className="h-5 w-5" />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
<div className="py-4 px-6">
|
||||||
|
<div className="mb-12">
|
||||||
|
<Typography variant="h6" color="blue-gray">
|
||||||
|
Sidenav Colors
|
||||||
|
</Typography>
|
||||||
|
<div className="mt-3 flex items-center gap-2">
|
||||||
|
{Object.keys(sidenavColors).map((color) => (
|
||||||
|
<span
|
||||||
|
key={color}
|
||||||
|
className={`h-6 w-6 cursor-pointer rounded-full border bg-gradient-to-br transition-transform hover:scale-105 ${
|
||||||
|
sidenavColors[color]
|
||||||
|
} ${
|
||||||
|
sidenavColor === color ? "border-black" : "border-transparent"
|
||||||
|
}`}
|
||||||
|
onClick={() => setSidenavColor(dispatch, color)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-12">
|
||||||
|
<Typography variant="h6" color="blue-gray">
|
||||||
|
Sidenav Types
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="small" color="gray">
|
||||||
|
Choose between 3 different sidenav types.
|
||||||
|
</Typography>
|
||||||
|
<div className="mt-3 flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
variant={sidenavType === "dark" ? "gradient" : "outlined"}
|
||||||
|
onClick={() => setSidenavType(dispatch, "dark")}
|
||||||
|
>
|
||||||
|
Dark
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={sidenavType === "transparent" ? "gradient" : "outlined"}
|
||||||
|
onClick={() => setSidenavType(dispatch, "transparent")}
|
||||||
|
>
|
||||||
|
Transparent
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={sidenavType === "white" ? "gradient" : "outlined"}
|
||||||
|
onClick={() => setSidenavType(dispatch, "white")}
|
||||||
|
>
|
||||||
|
White
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mb-12">
|
||||||
|
<hr />
|
||||||
|
<div className="flex items-center justify-between py-5">
|
||||||
|
<Typography variant="h6" color="blue-gray">
|
||||||
|
Navbar Fixed
|
||||||
|
</Typography>
|
||||||
|
<Switch
|
||||||
|
id="navbar-fixed"
|
||||||
|
value={fixedNavbar}
|
||||||
|
onChange={() => setFixedNavbar(dispatch, !fixedNavbar)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div className="my-8 flex flex-col gap-4">
|
||||||
|
<a
|
||||||
|
href="https://www.creative-tim.com/product/material-tailwind-dashboard-react?rel=mtdr"
|
||||||
|
target="_black"
|
||||||
|
>
|
||||||
|
<Button variant="gradient" fullWidth>
|
||||||
|
Free Download
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://www.material-tailwind.com/docs/react/installation?rel=mtdr"
|
||||||
|
target="_black"
|
||||||
|
>
|
||||||
|
<Button variant="outlined" color="blue-gray" fullWidth>
|
||||||
|
View Documentation
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://www.material-tailwind.com/blocks/react?rel=mtdr"
|
||||||
|
target="_black"
|
||||||
|
>
|
||||||
|
<Button variant="outlined" color="blue-gray" fullWidth>
|
||||||
|
Material Tailwind PRO
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
className="mx-auto flex items-center justify-center gap-2"
|
||||||
|
href="https://github.com/creativetimofficial/material-tailwind-dashboard-react"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<Chip
|
||||||
|
value={`${stars} - Stars`}
|
||||||
|
icon={
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
className="mt-px ml-1.5 h-4 w-4"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
className="bg-blue-gray-900 px-4"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<Typography variant="h6" color="blue-gray">
|
||||||
|
Thank you for sharing ❤️
|
||||||
|
</Typography>
|
||||||
|
<div className="mt-4 flex justify-center gap-2">
|
||||||
|
<Button
|
||||||
|
variant="gradient"
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<i className="fa-brands fa-twitter text-white" />
|
||||||
|
Tweet
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="gradient"
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<i className="fa-brands fa-facebook text-white" />
|
||||||
|
Share
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Configurator.displayName = "/src/widgets/layout/configurator.jsx";
|
||||||
|
|
||||||
|
export default Configurator;
|
||||||
@@ -0,0 +1,196 @@
|
|||||||
|
import { useLocation, Link } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Navbar,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
IconButton,
|
||||||
|
Breadcrumbs,
|
||||||
|
Input,
|
||||||
|
Menu,
|
||||||
|
MenuHandler,
|
||||||
|
MenuList,
|
||||||
|
MenuItem,
|
||||||
|
Avatar,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import {
|
||||||
|
UserCircleIcon,
|
||||||
|
Cog6ToothIcon,
|
||||||
|
BellIcon,
|
||||||
|
ClockIcon,
|
||||||
|
CreditCardIcon,
|
||||||
|
Bars3Icon,
|
||||||
|
} from "@heroicons/react/24/solid";
|
||||||
|
import {
|
||||||
|
useMaterialTailwindController,
|
||||||
|
setOpenConfigurator,
|
||||||
|
setOpenSidenav,
|
||||||
|
} from "@/context";
|
||||||
|
|
||||||
|
export function DashboardNavbar() {
|
||||||
|
const [controller, dispatch] = useMaterialTailwindController();
|
||||||
|
const { fixedNavbar, openSidenav } = controller;
|
||||||
|
const { pathname } = useLocation();
|
||||||
|
const [layout, page] = pathname.split("/").filter((el) => el !== "");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Navbar
|
||||||
|
color={fixedNavbar ? "white" : "transparent"}
|
||||||
|
className={`rounded-xl transition-all ${
|
||||||
|
fixedNavbar
|
||||||
|
? "sticky top-4 z-40 py-3 shadow-md shadow-blue-gray-500/5"
|
||||||
|
: "px-0 py-1"
|
||||||
|
}`}
|
||||||
|
fullWidth
|
||||||
|
blurred={fixedNavbar}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col-reverse justify-between gap-6 md:flex-row md:items-center">
|
||||||
|
<div className="capitalize">
|
||||||
|
<Breadcrumbs
|
||||||
|
className={`bg-transparent p-0 transition-all ${
|
||||||
|
fixedNavbar ? "mt-1" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Link to={`/${layout}`}>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="font-normal opacity-50 transition-all hover:text-blue-500 hover:opacity-100"
|
||||||
|
>
|
||||||
|
{layout}
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="font-normal"
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</Typography>
|
||||||
|
</Breadcrumbs>
|
||||||
|
<Typography variant="h6" color="blue-gray">
|
||||||
|
{page}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="mr-auto md:mr-4 md:w-56">
|
||||||
|
<Input label="Search" />
|
||||||
|
</div>
|
||||||
|
<IconButton
|
||||||
|
variant="text"
|
||||||
|
color="blue-gray"
|
||||||
|
className="grid xl:hidden"
|
||||||
|
onClick={() => setOpenSidenav(dispatch, !openSidenav)}
|
||||||
|
>
|
||||||
|
<Bars3Icon strokeWidth={3} className="h-6 w-6 text-blue-gray-500" />
|
||||||
|
</IconButton>
|
||||||
|
<Link to="/auth/sign-in">
|
||||||
|
<Button
|
||||||
|
variant="text"
|
||||||
|
color="blue-gray"
|
||||||
|
className="hidden items-center gap-1 px-4 xl:flex normal-case"
|
||||||
|
>
|
||||||
|
<UserCircleIcon className="h-5 w-5 text-blue-gray-500" />
|
||||||
|
Sign In
|
||||||
|
</Button>
|
||||||
|
<IconButton
|
||||||
|
variant="text"
|
||||||
|
color="blue-gray"
|
||||||
|
className="grid xl:hidden"
|
||||||
|
>
|
||||||
|
<UserCircleIcon className="h-5 w-5 text-blue-gray-500" />
|
||||||
|
</IconButton>
|
||||||
|
</Link>
|
||||||
|
<Menu>
|
||||||
|
<MenuHandler>
|
||||||
|
<IconButton variant="text" color="blue-gray">
|
||||||
|
<BellIcon className="h-5 w-5 text-blue-gray-500" />
|
||||||
|
</IconButton>
|
||||||
|
</MenuHandler>
|
||||||
|
<MenuList className="w-max border-0">
|
||||||
|
<MenuItem className="flex items-center gap-3">
|
||||||
|
<Avatar
|
||||||
|
src="https://demos.creative-tim.com/material-dashboard/assets/img/team-2.jpg"
|
||||||
|
alt="item-1"
|
||||||
|
size="sm"
|
||||||
|
variant="circular"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="mb-1 font-normal"
|
||||||
|
>
|
||||||
|
<strong>New message</strong> from Laur
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="flex items-center gap-1 text-xs font-normal opacity-60"
|
||||||
|
>
|
||||||
|
<ClockIcon className="h-3.5 w-3.5" /> 13 minutes ago
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem className="flex items-center gap-4">
|
||||||
|
<Avatar
|
||||||
|
src="https://demos.creative-tim.com/material-dashboard/assets/img/small-logos/logo-spotify.svg"
|
||||||
|
alt="item-1"
|
||||||
|
size="sm"
|
||||||
|
variant="circular"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="mb-1 font-normal"
|
||||||
|
>
|
||||||
|
<strong>New album</strong> by Travis Scott
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="flex items-center gap-1 text-xs font-normal opacity-60"
|
||||||
|
>
|
||||||
|
<ClockIcon className="h-3.5 w-3.5" /> 1 day ago
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem className="flex items-center gap-4">
|
||||||
|
<div className="grid h-9 w-9 place-items-center rounded-full bg-gradient-to-tr from-blue-gray-800 to-blue-gray-900">
|
||||||
|
<CreditCardIcon className="h-4 w-4 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="mb-1 font-normal"
|
||||||
|
>
|
||||||
|
Payment successfully completed
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="flex items-center gap-1 text-xs font-normal opacity-60"
|
||||||
|
>
|
||||||
|
<ClockIcon className="h-3.5 w-3.5" /> 2 days ago
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</MenuItem>
|
||||||
|
</MenuList>
|
||||||
|
</Menu>
|
||||||
|
<IconButton
|
||||||
|
variant="text"
|
||||||
|
color="blue-gray"
|
||||||
|
onClick={() => setOpenConfigurator(dispatch, true)}
|
||||||
|
>
|
||||||
|
<Cog6ToothIcon className="h-5 w-5 text-blue-gray-500" />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Navbar>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
DashboardNavbar.displayName = "/src/widgets/layout/dashboard-navbar.jsx";
|
||||||
|
|
||||||
|
export default DashboardNavbar;
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { Typography } from "@material-tailwind/react";
|
||||||
|
import { HeartIcon } from "@heroicons/react/24/solid";
|
||||||
|
|
||||||
|
export function Footer({ brandName, brandLink, routes }) {
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="py-2">
|
||||||
|
<div className="flex w-full flex-wrap items-center justify-center gap-6 px-2 md:justify-between">
|
||||||
|
<Typography variant="small" className="font-normal text-inherit">
|
||||||
|
© {year}, made with{" "}
|
||||||
|
<HeartIcon className="-mt-0.5 inline-block h-3.5 w-3.5 text-red-600" /> by{" "}
|
||||||
|
<a
|
||||||
|
href={brandLink}
|
||||||
|
target="_blank"
|
||||||
|
className="transition-colors hover:text-blue-500 font-bold"
|
||||||
|
>
|
||||||
|
{brandName}
|
||||||
|
</a>{" "}
|
||||||
|
for a better web.
|
||||||
|
</Typography>
|
||||||
|
<ul className="flex items-center gap-4">
|
||||||
|
{routes.map(({ name, path }) => (
|
||||||
|
<li key={name}>
|
||||||
|
<Typography
|
||||||
|
as="a"
|
||||||
|
href={path}
|
||||||
|
target="_blank"
|
||||||
|
variant="small"
|
||||||
|
className="py-0.5 px-1 font-normal text-inherit transition-colors hover:text-blue-500"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Footer.defaultProps = {
|
||||||
|
brandName: "Creative Tim",
|
||||||
|
brandLink: "https://www.creative-tim.com",
|
||||||
|
routes: [
|
||||||
|
{ name: "Creative Tim", path: "https://www.creative-tim.com" },
|
||||||
|
{ name: "About Us", path: "https://www.creative-tim.com/presentation" },
|
||||||
|
{ name: "Blog", path: "https://www.creative-tim.com/blog" },
|
||||||
|
{ name: "License", path: "https://www.creative-tim.com/license" },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
Footer.propTypes = {
|
||||||
|
brandName: PropTypes.string,
|
||||||
|
brandLink: PropTypes.string,
|
||||||
|
routes: PropTypes.arrayOf(PropTypes.object),
|
||||||
|
};
|
||||||
|
|
||||||
|
Footer.displayName = "/src/widgets/layout/footer.jsx";
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export * from "@/widgets/layout/sidenav";
|
||||||
|
export * from "@/widgets/layout/dashboard-navbar";
|
||||||
|
export * from "@/widgets/layout/configurator";
|
||||||
|
export * from "@/widgets/layout/footer";
|
||||||
|
export * from "@/widgets/layout/navbar";
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
import React from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
Navbar as MTNavbar,
|
||||||
|
Collapse,
|
||||||
|
Typography,
|
||||||
|
Button,
|
||||||
|
IconButton,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
|
export function Navbar({ brandName, routes, action }) {
|
||||||
|
const [openNav, setOpenNav] = React.useState(false);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
window.addEventListener(
|
||||||
|
"resize",
|
||||||
|
() => window.innerWidth >= 960 && setOpenNav(false)
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const navList = (
|
||||||
|
<ul className="mb-4 mt-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
|
||||||
|
{routes.map(({ name, path, icon }) => (
|
||||||
|
<Typography
|
||||||
|
key={name}
|
||||||
|
as="li"
|
||||||
|
variant="small"
|
||||||
|
color="blue-gray"
|
||||||
|
className="capitalize"
|
||||||
|
>
|
||||||
|
<Link to={path} className="flex items-center gap-1 p-1 font-normal">
|
||||||
|
{icon &&
|
||||||
|
React.createElement(icon, {
|
||||||
|
className: "w-[18px] h-[18px] opacity-50 mr-1",
|
||||||
|
})}
|
||||||
|
{name}
|
||||||
|
</Link>
|
||||||
|
</Typography>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MTNavbar className="p-3">
|
||||||
|
<div className="container mx-auto flex items-center justify-between text-blue-gray-900">
|
||||||
|
<Link to="/">
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mr-4 ml-2 cursor-pointer py-1.5 font-bold"
|
||||||
|
>
|
||||||
|
{brandName}
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
<div className="hidden lg:block">{navList}</div>
|
||||||
|
{React.cloneElement(action, {
|
||||||
|
className: "hidden lg:inline-block",
|
||||||
|
})}
|
||||||
|
<IconButton
|
||||||
|
variant="text"
|
||||||
|
size="sm"
|
||||||
|
className="ml-auto text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
|
||||||
|
onClick={() => setOpenNav(!openNav)}
|
||||||
|
>
|
||||||
|
{openNav ? (
|
||||||
|
<XMarkIcon strokeWidth={2} className="h-6 w-6" />
|
||||||
|
) : (
|
||||||
|
<Bars3Icon strokeWidth={2} className="h-6 w-6" />
|
||||||
|
)}
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
<Collapse open={openNav}>
|
||||||
|
<div className="container mx-auto">
|
||||||
|
{navList}
|
||||||
|
{React.cloneElement(action, {
|
||||||
|
className: "w-full block lg:hidden",
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</Collapse>
|
||||||
|
</MTNavbar>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Navbar.defaultProps = {
|
||||||
|
brandName: "Material Tailwind React",
|
||||||
|
action: (
|
||||||
|
<a
|
||||||
|
href="https://www.creative-tim.com/product/material-tailwind-dashboard-react"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<Button variant="gradient" size="sm" fullWidth>
|
||||||
|
free download
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
Navbar.propTypes = {
|
||||||
|
brandName: PropTypes.string,
|
||||||
|
routes: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
action: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
Navbar.displayName = "/src/widgets/layout/navbar.jsx";
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { Link, NavLink } from "react-router-dom";
|
||||||
|
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
Button,
|
||||||
|
IconButton,
|
||||||
|
Typography,
|
||||||
|
} from "@material-tailwind/react";
|
||||||
|
import { useMaterialTailwindController, setOpenSidenav } from "@/context";
|
||||||
|
|
||||||
|
export function Sidenav({ brandImg, brandName, routes }) {
|
||||||
|
const [controller, dispatch] = useMaterialTailwindController();
|
||||||
|
const { sidenavColor, sidenavType, openSidenav } = controller;
|
||||||
|
const sidenavTypes = {
|
||||||
|
dark: "bg-gradient-to-br from-gray-800 to-gray-900",
|
||||||
|
white: "bg-white shadow-sm",
|
||||||
|
transparent: "bg-transparent",
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
className={`${sidenavTypes[sidenavType]} ${
|
||||||
|
openSidenav ? "translate-x-0" : "-translate-x-80"
|
||||||
|
} fixed inset-0 z-50 my-4 ml-4 h-[calc(100vh-32px)] w-72 rounded-xl transition-transform duration-300 xl:translate-x-0 border border-blue-gray-100`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`relative`}
|
||||||
|
>
|
||||||
|
<Link to="/" className="py-6 px-8 text-center">
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
color={sidenavType === "dark" ? "white" : "blue-gray"}
|
||||||
|
>
|
||||||
|
{brandName}
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
<IconButton
|
||||||
|
variant="text"
|
||||||
|
color="white"
|
||||||
|
size="sm"
|
||||||
|
ripple={false}
|
||||||
|
className="absolute right-0 top-0 grid rounded-br-none rounded-tl-none xl:hidden"
|
||||||
|
onClick={() => setOpenSidenav(dispatch, false)}
|
||||||
|
>
|
||||||
|
<XMarkIcon strokeWidth={2.5} className="h-5 w-5 text-white" />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
<div className="m-4">
|
||||||
|
{routes.map(({ layout, title, pages }, key) => (
|
||||||
|
<ul key={key} className="mb-4 flex flex-col gap-1">
|
||||||
|
{title && (
|
||||||
|
<li className="mx-3.5 mt-4 mb-2">
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
color={sidenavType === "dark" ? "white" : "blue-gray"}
|
||||||
|
className="font-black uppercase opacity-75"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Typography>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{pages.map(({ icon, name, path }) => (
|
||||||
|
<li key={name}>
|
||||||
|
<NavLink to={`/${layout}${path}`}>
|
||||||
|
{({ isActive }) => (
|
||||||
|
<Button
|
||||||
|
variant={isActive ? "gradient" : "text"}
|
||||||
|
color={
|
||||||
|
isActive
|
||||||
|
? sidenavColor
|
||||||
|
: sidenavType === "dark"
|
||||||
|
? "white"
|
||||||
|
: "blue-gray"
|
||||||
|
}
|
||||||
|
className="flex items-center gap-4 px-4 capitalize"
|
||||||
|
fullWidth
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
<Typography
|
||||||
|
color="inherit"
|
||||||
|
className="font-medium capitalize"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</Typography>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Sidenav.defaultProps = {
|
||||||
|
brandImg: "/img/logo-ct.png",
|
||||||
|
brandName: "Material Tailwind React",
|
||||||
|
};
|
||||||
|
|
||||||
|
Sidenav.propTypes = {
|
||||||
|
brandImg: PropTypes.string,
|
||||||
|
brandName: PropTypes.string,
|
||||||
|
routes: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
Sidenav.displayName = "/src/widgets/layout/sidnave.jsx";
|
||||||
|
|
||||||
|
export default Sidenav;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
const withMT = require("@material-tailwind/react/utils/withMT");
|
||||||
|
|
||||||
|
module.exports = withMT({
|
||||||
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
});
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user