├── .gitignore ├── build ├── asset-manifest.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt └── static │ ├── css │ ├── main.83d76d49.chunk.css │ └── main.83d76d49.chunk.css.map │ ├── js │ ├── 2.ae97cbf9.chunk.js │ ├── 2.ae97cbf9.chunk.js.LICENSE.txt │ ├── 2.ae97cbf9.chunk.js.map │ ├── main.3cdefe5e.chunk.js │ ├── main.3cdefe5e.chunk.js.map │ ├── runtime-main.302cd309.js │ └── runtime-main.302cd309.js.map │ └── media │ ├── avatarImage.d37df039.jpeg │ └── profile.2344c52c.jpeg ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── assets │ ├── avatarImage.jpeg │ └── profile.jpeg ├── components │ ├── Analytics.jsx │ ├── Dashboard.jsx │ ├── Earnings.jsx │ ├── FAQ.jsx │ ├── Navbar.jsx │ ├── Profile.jsx │ ├── ReusableStyles.jsx │ ├── Sidebar.jsx │ └── Transfers.jsx ├── index.css └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ -------------------------------------------------------------------------------- /build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "./static/css/main.83d76d49.chunk.css", 4 | "main.js": "./static/js/main.3cdefe5e.chunk.js", 5 | "main.js.map": "./static/js/main.3cdefe5e.chunk.js.map", 6 | "runtime-main.js": "./static/js/runtime-main.302cd309.js", 7 | "runtime-main.js.map": "./static/js/runtime-main.302cd309.js.map", 8 | "static/js/2.ae97cbf9.chunk.js": "./static/js/2.ae97cbf9.chunk.js", 9 | "static/js/2.ae97cbf9.chunk.js.map": "./static/js/2.ae97cbf9.chunk.js.map", 10 | "index.html": "./index.html", 11 | "static/css/main.83d76d49.chunk.css.map": "./static/css/main.83d76d49.chunk.css.map", 12 | "static/js/2.ae97cbf9.chunk.js.LICENSE.txt": "./static/js/2.ae97cbf9.chunk.js.LICENSE.txt", 13 | "static/media/avatarImage.d37df039.jpeg": "./static/media/avatarImage.d37df039.jpeg", 14 | "static/media/profile.2344c52c.jpeg": "./static/media/profile.2344c52c.jpeg" 15 | }, 16 | "entrypoints": [ 17 | "static/js/runtime-main.302cd309.js", 18 | "static/js/2.ae97cbf9.chunk.js", 19 | "static/css/main.83d76d49.chunk.css", 20 | "static/js/main.3cdefe5e.chunk.js" 21 | ] 22 | } -------------------------------------------------------------------------------- /build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-taxi-dashboard-with-animations/365e7d8ee97a007504ed052a03a0ac7c2df1f005/build/favicon.ico -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | React App

-------------------------------------------------------------------------------- /build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-taxi-dashboard-with-animations/365e7d8ee97a007504ed052a03a0ac7c2df1f005/build/logo192.png -------------------------------------------------------------------------------- /build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-taxi-dashboard-with-animations/365e7d8ee97a007504ed052a03a0ac7c2df1f005/build/logo512.png -------------------------------------------------------------------------------- /build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /build/static/css/main.83d76d49.chunk.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Permanent+Marker&display=swap);*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Montserrat",sans-serif;background-color:#000}::-webkit-scrollbar{background-color:#000;width:.4vw}::-webkit-scrollbar-thumb{background:#ffc107}.show{opacity:1!important;visibility:visible!important;right:0!important} 2 | /*# sourceMappingURL=main.83d76d49.chunk.css.map */ -------------------------------------------------------------------------------- /build/static/css/main.83d76d49.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["main.83d76d49.chunk.css","webpack://src/index.css"],"names":[],"mappings":"AAAA,0HAA0H,CCE1H,EACE,QAAS,CACT,SAAU,CACV,qBACF,CAEA,KACE,mCAAqC,CACrC,qBACF,CAEA,oBACE,qBAAuB,CACvB,UACF,CAEA,0BACE,kBACF,CAEA,MACE,mBAAqB,CACrB,4BAA8B,CAC9B,iBACF","file":"main.83d76d49.chunk.css","sourcesContent":["@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Permanent+Marker&display=swap);\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Montserrat\", sans-serif;\n background-color: black;\n}\n\n::-webkit-scrollbar {\n background-color: black;\n width: 0.4vw;\n}\n\n::-webkit-scrollbar-thumb {\n background: #ffc107;\n}\n\n.show {\n opacity: 1 !important;\n visibility: visible !important;\n right: 0 !important;\n}\n\n","@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Permanent+Marker&display=swap\");\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Montserrat\", sans-serif;\n background-color: black;\n}\n\n::-webkit-scrollbar {\n background-color: black;\n width: 0.4vw;\n}\n\n::-webkit-scrollbar-thumb {\n background: #ffc107;\n}\n\n.show {\n opacity: 1 !important;\n visibility: visible !important;\n right: 0 !important;\n}\n"]} -------------------------------------------------------------------------------- /build/static/js/2.ae97cbf9.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /*! 8 | Copyright (c) 2018 Jed Watson. 9 | Licensed under the MIT License (MIT), see 10 | http://jedwatson.github.io/classnames 11 | */ 12 | 13 | /*! @license Rematrix v0.3.0 14 | 15 | Copyright 2018 Julian Lloyd. 16 | 17 | Permission is hereby granted, free of charge, to any person obtaining a copy 18 | of this software and associated documentation files (the "Software"), to deal 19 | in the Software without restriction, including without limitation the rights 20 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 21 | copies of the Software, and to permit persons to whom the Software is 22 | furnished to do so, subject to the following conditions: 23 | 24 | The above copyright notice and this permission notice shall be included in 25 | all copies or substantial portions of the Software. 26 | 27 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 33 | THE SOFTWARE. 34 | */ 35 | 36 | /*! @license Tealight v0.3.6 37 | 38 | Copyright 2018 Fisssion LLC. 39 | 40 | Permission is hereby granted, free of charge, to any person obtaining a copy 41 | of this software and associated documentation files (the "Software"), to deal 42 | in the Software without restriction, including without limitation the rights 43 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 44 | copies of the Software, and to permit persons to whom the Software is 45 | furnished to do so, subject to the following conditions: 46 | 47 | The above copyright notice and this permission notice shall be included in all 48 | copies or substantial portions of the Software. 49 | 50 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 51 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 52 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 53 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 54 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 55 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 56 | SOFTWARE. 57 | 58 | */ 59 | 60 | /*! @license is-dom-node v1.0.4 61 | 62 | Copyright 2018 Fisssion LLC. 63 | 64 | Permission is hereby granted, free of charge, to any person obtaining a copy 65 | of this software and associated documentation files (the "Software"), to deal 66 | in the Software without restriction, including without limitation the rights 67 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 68 | copies of the Software, and to permit persons to whom the Software is 69 | furnished to do so, subject to the following conditions: 70 | 71 | The above copyright notice and this permission notice shall be included in all 72 | copies or substantial portions of the Software. 73 | 74 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 75 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 76 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 77 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 78 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 79 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 80 | SOFTWARE. 81 | 82 | */ 83 | 84 | /*! @license is-dom-node-list v1.2.1 85 | 86 | Copyright 2018 Fisssion LLC. 87 | 88 | Permission is hereby granted, free of charge, to any person obtaining a copy 89 | of this software and associated documentation files (the "Software"), to deal 90 | in the Software without restriction, including without limitation the rights 91 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 92 | copies of the Software, and to permit persons to whom the Software is 93 | furnished to do so, subject to the following conditions: 94 | 95 | The above copyright notice and this permission notice shall be included in all 96 | copies or substantial portions of the Software. 97 | 98 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 99 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 100 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 101 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 102 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 103 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 104 | SOFTWARE. 105 | 106 | */ 107 | 108 | /*! @license miniraf v1.0.0 109 | 110 | Copyright 2018 Fisssion LLC. 111 | 112 | Permission is hereby granted, free of charge, to any person obtaining a copy 113 | of this software and associated documentation files (the "Software"), to deal 114 | in the Software without restriction, including without limitation the rights 115 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 116 | copies of the Software, and to permit persons to whom the Software is 117 | furnished to do so, subject to the following conditions: 118 | 119 | The above copyright notice and this permission notice shall be included in all 120 | copies or substantial portions of the Software. 121 | 122 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 123 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 124 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 125 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 126 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 127 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 128 | SOFTWARE. 129 | 130 | */ 131 | 132 | /*! Conditions:: INITIAL */ 133 | 134 | /*! Production:: css_value : ANGLE */ 135 | 136 | /*! Production:: css_value : CHS */ 137 | 138 | /*! Production:: css_value : EMS */ 139 | 140 | /*! Production:: css_value : EXS */ 141 | 142 | /*! Production:: css_value : FREQ */ 143 | 144 | /*! Production:: css_value : LENGTH */ 145 | 146 | /*! Production:: css_value : PERCENTAGE */ 147 | 148 | /*! Production:: css_value : REMS */ 149 | 150 | /*! Production:: css_value : RES */ 151 | 152 | /*! Production:: css_value : SUB css_value */ 153 | 154 | /*! Production:: css_value : TIME */ 155 | 156 | /*! Production:: css_value : VHS */ 157 | 158 | /*! Production:: css_value : VMAXS */ 159 | 160 | /*! Production:: css_value : VMINS */ 161 | 162 | /*! Production:: css_value : VWS */ 163 | 164 | /*! Production:: css_variable : CSS_VAR LPAREN CSS_CPROP COMMA math_expression RPAREN */ 165 | 166 | /*! Production:: css_variable : CSS_VAR LPAREN CSS_CPROP RPAREN */ 167 | 168 | /*! Production:: expression : math_expression EOF */ 169 | 170 | /*! Production:: math_expression : LPAREN math_expression RPAREN */ 171 | 172 | /*! Production:: math_expression : NESTED_CALC LPAREN math_expression RPAREN */ 173 | 174 | /*! Production:: math_expression : SUB PREFIX SUB NESTED_CALC LPAREN math_expression RPAREN */ 175 | 176 | /*! Production:: math_expression : css_value */ 177 | 178 | /*! Production:: math_expression : css_variable */ 179 | 180 | /*! Production:: math_expression : math_expression ADD math_expression */ 181 | 182 | /*! Production:: math_expression : math_expression DIV math_expression */ 183 | 184 | /*! Production:: math_expression : math_expression MUL math_expression */ 185 | 186 | /*! Production:: math_expression : math_expression SUB math_expression */ 187 | 188 | /*! Production:: math_expression : value */ 189 | 190 | /*! Production:: value : NUMBER */ 191 | 192 | /*! Production:: value : SUB NUMBER */ 193 | 194 | /*! Rule:: $ */ 195 | 196 | /*! Rule:: (--[0-9a-z-A-Z-]*) */ 197 | 198 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)% */ 199 | 200 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)Hz\b */ 201 | 202 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)\b */ 203 | 204 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)ch\b */ 205 | 206 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)cm\b */ 207 | 208 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)deg\b */ 209 | 210 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)dpcm\b */ 211 | 212 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)dpi\b */ 213 | 214 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)dppx\b */ 215 | 216 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)em\b */ 217 | 218 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)ex\b */ 219 | 220 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)grad\b */ 221 | 222 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)in\b */ 223 | 224 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)kHz\b */ 225 | 226 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)mm\b */ 227 | 228 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)ms\b */ 229 | 230 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)pc\b */ 231 | 232 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)pt\b */ 233 | 234 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)px\b */ 235 | 236 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)rad\b */ 237 | 238 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)rem\b */ 239 | 240 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)s\b */ 241 | 242 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)turn\b */ 243 | 244 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)vh\b */ 245 | 246 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)vmax\b */ 247 | 248 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)vmin\b */ 249 | 250 | /*! Rule:: ([0-9]+(\.[0-9]*)?|\.[0-9]+)vw\b */ 251 | 252 | /*! Rule:: ([a-z]+) */ 253 | 254 | /*! Rule:: (calc) */ 255 | 256 | /*! Rule:: (var) */ 257 | 258 | /*! Rule:: , */ 259 | 260 | /*! Rule:: - */ 261 | 262 | /*! Rule:: $ */ 263 | 264 | /*! Rule:: $ */ 265 | 266 | /*! Rule:: \* */ 267 | 268 | /*! Rule:: \+ */ 269 | 270 | /*! Rule:: \/ */ 271 | 272 | /*! decimal.js-light v2.5.1 https://github.com/MikeMcl/decimal.js-light/LICENCE */ 273 | 274 | /** @license React v0.20.2 275 | * scheduler.production.min.js 276 | * 277 | * Copyright (c) Facebook, Inc. and its affiliates. 278 | * 279 | * This source code is licensed under the MIT license found in the 280 | * LICENSE file in the root directory of this source tree. 281 | */ 282 | 283 | /** @license React v16.13.1 284 | * react-is.production.min.js 285 | * 286 | * Copyright (c) Facebook, Inc. and its affiliates. 287 | * 288 | * This source code is licensed under the MIT license found in the 289 | * LICENSE file in the root directory of this source tree. 290 | */ 291 | 292 | /** @license React v17.0.2 293 | * react-dom.production.min.js 294 | * 295 | * Copyright (c) Facebook, Inc. and its affiliates. 296 | * 297 | * This source code is licensed under the MIT license found in the 298 | * LICENSE file in the root directory of this source tree. 299 | */ 300 | 301 | /** @license React v17.0.2 302 | * react-jsx-runtime.production.min.js 303 | * 304 | * Copyright (c) Facebook, Inc. and its affiliates. 305 | * 306 | * This source code is licensed under the MIT license found in the 307 | * LICENSE file in the root directory of this source tree. 308 | */ 309 | 310 | /** @license React v17.0.2 311 | * react.production.min.js 312 | * 313 | * Copyright (c) Facebook, Inc. and its affiliates. 314 | * 315 | * This source code is licensed under the MIT license found in the 316 | * LICENSE file in the root directory of this source tree. 317 | */ 318 | -------------------------------------------------------------------------------- /build/static/js/main.3cdefe5e.chunk.js: -------------------------------------------------------------------------------- 1 | (this["webpackJsonptaxi-dashboard"]=this["webpackJsonptaxi-dashboard"]||[]).push([[0],{185:function(n,e,t){},324:function(n,e,t){"use strict";t.r(e);var a,i,c=t(1),r=t.n(c),s=t(62),l=t.n(s),o=(t(185),t(19)),d=t(20),j=t(64),m=t(65),h=t(84),b=t(85),x=Object(d.a)(a||(a=Object(o.a)(["\n padding: 1rem 2rem 3rem 2rem;\n border-radius: 1rem;\n background-color: #212121;\n color: white;\n"]))),f=t(2);function p(){return Object(f.jsxs)(g,{children:[Object(f.jsxs)("div",{className:"analytic ",children:[Object(f.jsxs)("div",{className:"content",children:[Object(f.jsx)("h5",{children:"Spent this month"}),Object(f.jsx)("h2",{children:"$682.5"})]}),Object(f.jsx)("div",{className:"logo",children:Object(f.jsx)(j.a,{})})]}),Object(f.jsxs)("div",{className:"analytic",children:[Object(f.jsx)("div",{className:"logo",children:Object(f.jsx)(m.b,{})}),Object(f.jsxs)("div",{className:"content",children:[Object(f.jsx)("h5",{children:"Earnings"}),Object(f.jsx)("h2",{children:"$350.40"})]})]}),Object(f.jsxs)("div",{className:"analytic",children:[Object(f.jsx)("div",{className:"logo",children:Object(f.jsx)(h.a,{})}),Object(f.jsxs)("div",{className:"content",children:[Object(f.jsx)("h5",{children:"New clients"}),Object(f.jsx)("h2",{children:"321"})]})]}),Object(f.jsxs)("div",{className:"analytic ",children:[Object(f.jsxs)("div",{className:"content",children:[Object(f.jsx)("h5",{children:"Activity"}),Object(f.jsx)("h2",{children:"$540.50"})]}),Object(f.jsx)("div",{className:"logo",children:Object(f.jsx)(b.a,{})})]})]})}var O,g=d.b.section(i||(i=Object(o.a)(["\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n .analytic {\n ",";\n padding: 1rem;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n gap: 1rem;\n transition: 0.5s ease-in-out;\n &:hover {\n background-color: #ffc107;\n color: black;\n svg {\n color: white;\n }\n }\n .logo {\n background-color: black;\n border-radius: 3rem;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1.5rem;\n svg {\n font-size: 1.5rem;\n }\n }\n }\n\n @media screen and (min-width: 280px) and (max-width: 720px) {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n .analytic {\n &:nth-of-type(3),\n &:nth-of-type(4) {\n flex-direction: row-reverse;\n }\n }\n }\n"])),x),u=t(326),v=t(331),y=t(75),k=t(176),w=[{data:4500},{data:5e3},{data:4700},{data:4400},{data:4800},{data:5300},{data:5800},{data:6e3},{data:6300},{data:6580},{data:6780},{data:6680},{data:6500},{data:6300},{data:5900},{data:5700},{data:5500},{data:5300},{data:5100},{data:5090},{data:5300},{data:5800},{data:6e3},{data:6300},{data:6780},{data:6500},{data:6300},{data:6500},{data:6700},{data:7e3},{data:7300},{data:7500},{data:7700},{data:8090},{data:8190},{data:7990},{data:7700},{data:7500},{data:7300},{data:7e3},{data:6700},{data:6500},{data:6300},{data:6500},{data:6780},{data:6300},{data:6e3},{data:5800},{data:5490},{data:6e3},{data:8e3}];function N(){return Object(f.jsxs)(C,{children:[Object(f.jsx)("div",{className:"top",children:Object(f.jsxs)("div",{className:"info",children:[Object(f.jsx)("h5",{children:"This month earnings"}),Object(f.jsx)("h1",{children:"$682.5"}),Object(f.jsx)("div",{className:"growth",children:Object(f.jsx)("span",{children:"+2.45%"})})]})}),Object(f.jsx)("div",{className:"chart",children:Object(f.jsx)(u.a,{width:"100%",height:"100%",children:Object(f.jsxs)(v.a,{width:500,height:400,data:w,margin:{top:0,left:0,right:0,bottom:0},children:[Object(f.jsx)(y.a,{cursor:!1}),Object(f.jsx)(k.a,{animationBegin:800,animationDuration:2e3,type:"monotone",dataKey:"data",stroke:"#ffc107",fill:"#8068233e",strokeWidth:4})]})})})]})}var _,C=d.b.section(O||(O=Object(o.a)(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: 20rem;\n ","\n padding: 2rem 0 0 0;\n .top {\n .info {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.2rem;\n h1 {\n font-size: 2rem;\n }\n .growth {\n background-color: #d7e41e1d;\n padding: 0.5rem;\n border-radius: 1rem;\n transition: 0.3s ease-in-out;\n &:hover {\n background-color: #ffc107;\n span {\n color: black;\n }\n }\n span {\n color: #ffc107;\n }\n }\n }\n }\n .chart {\n height: 70%;\n .recharts-default-tooltip {\n background-color: black !important;\n border-color: black !important;\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n }\n"])),x),S=t(89),M=t(173),z=t(71);function P(){var n=[{icon:Object(f.jsx)(M.a,{}),text:"How to manage time and get good marks for trips"},{icon:Object(f.jsx)(z.b,{}),text:"How to regulate transactions over time"},{icon:Object(f.jsx)(S.b,{}),text:"Withdrawing money through an ATM"}];return Object(f.jsxs)(D,{children:[Object(f.jsx)("div",{className:"title",children:Object(f.jsx)("h2",{children:"Information for drivers"})}),Object(f.jsx)("div",{className:"faqs",children:n.map((function(n){return Object(f.jsxs)("div",{className:"faq",children:[Object(f.jsxs)("div",{className:"info",children:[n.icon,Object(f.jsx)("h4",{children:n.text})]}),Object(f.jsx)(S.a,{})]})}))})]})}var A,D=d.b.section(_||(_=Object(o.a)(["\n ",';\n .title {\n h2 {\n color: #ffc107;\n font-family: "Permanent Marker", cursive;\n letter-spacing: 0.3rem;\n }\n }\n .faqs {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-top: 1rem;\n .faq {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n .info {\n display: flex;\n gap: 1rem;\n align-items: center;\n }\n svg {\n font-size: 1.4rem;\n }\n &:nth-of-type(2) {\n border-top: 0.01rem solid #6c6e6e;\n border-bottom: 0.01rem solid #6c6e6e;\n padding: 0.8rem 0;\n }\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n svg {\n font-size: 2rem !important;\n }\n }\n'])),x);function T(){return Object(f.jsxs)(q,{children:[Object(f.jsxs)("div",{className:"title",children:[Object(f.jsx)("h4",{children:"Hi Kishan,"}),Object(f.jsxs)("h1",{children:["Welcome to ",Object(f.jsx)("span",{children:"MY TAXI DASHBOARD"})]})]}),Object(f.jsxs)("div",{className:"search",children:[Object(f.jsx)(h.b,{}),Object(f.jsx)("input",{type:"text",placeholder:"Search"})]})]})}var $,q=d.b.nav(A||(A=Object(o.a)(['\n display: flex;\n justify-content: space-between;\n color: white;\n .title {\n h1 {\n span {\n margin-left: 0.5rem;\n color: #ffc107;\n font-family: "Permanent Marker", cursive;\n letter-spacing: 0.2rem;\n }\n }\n }\n .search {\n background-color: #212121;\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem 8rem 1rem 1rem;\n border-radius: 1rem;\n svg {\n color: #ffc107;\n }\n input {\n background-color: transparent;\n border: none;\n color: #ffc107;\n font-family: "Permanent Marker", cursive;\n letter-spacing: 0.3rem;\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: #ffc107;\n font-family: "Permanent Marker", cursive;\n }\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n flex-direction: column;\n .title {\n h1 {\n span {\n display: block;\n\n margin: 1rem 0;\n /* letter-spacing: 0; */\n }\n }\n }\n }\n']))),E=t.p+"static/media/profile.2344c52c.jpeg",F=t(90);function H(){return Object(f.jsxs)(L,{children:[Object(f.jsx)("div",{className:"image",children:Object(f.jsx)("img",{src:E,alt:""})}),Object(f.jsxs)("div",{className:"title",children:[Object(f.jsx)("h2",{children:"Kishan Sheth"}),Object(f.jsxs)("h5",{children:[Object(f.jsx)(F.b,{})," New York, USA"]})]}),Object(f.jsxs)("div",{className:"info",children:[Object(f.jsxs)("div",{className:"container",children:[Object(f.jsx)("h5",{children:"Days at work"}),Object(f.jsx)("h3",{children:"28"})]}),Object(f.jsxs)("div",{className:"container",children:[Object(f.jsx)("h5",{children:"Rides"}),Object(f.jsx)("h3",{children:"427"})]}),Object(f.jsxs)("div",{className:"container",children:[Object(f.jsx)("h5",{children:"Hours"}),Object(f.jsx)("h3",{children:"76"})]})]})]})}var I,L=d.b.section($||($=Object(o.a)(["\n ",';\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n .image {\n max-height: 10rem;\n overflow: hidden;\n border-radius: 20rem;\n img {\n height: 10rem;\n width: 10rem;\n object-fit: cover;\n border-radius: 20rem;\n transition: 0.5s ease-in-out;\n }\n &:hover {\n img {\n transform: scale(1.1);\n }\n }\n }\n .title {\n text-align: center;\n h2,\n h5 {\n color: #ffc107;\n font-family: "Permanent Marker", cursive;\n letter-spacing: 0.3rem;\n }\n h5 {\n letter-spacing: 0.2rem;\n }\n }\n .info {\n display: flex;\n gap: 1rem;\n .container {\n text-align: center;\n }\n }\n'])),x),Y=t.p+"static/media/avatarImage.d37df039.jpeg";function K(){var n=[{image:Y,name:"From Kishan Sheth",time:"Today, 16:36",amount:"+$50"},{image:Y,name:"To Lauras Santos",time:"Today, 08:49",amount:"-$25"},{image:Y,name:"From Jadon S.",time:"Yesterday, 14:36",amount:"+$150"}];return Object(f.jsxs)(B,{children:[Object(f.jsx)("div",{className:"title",children:Object(f.jsx)("h2",{children:"Your Transfers"})}),Object(f.jsx)("div",{className:"transactions",children:n.map((function(n){return Object(f.jsxs)("div",{className:"transaction",children:[Object(f.jsxs)("div",{className:"transaction__title",children:[Object(f.jsx)("div",{className:"transaction__title__image",children:Object(f.jsx)("img",{src:n.image,alt:""})}),Object(f.jsxs)("div",{className:"transaction__title__details",children:[Object(f.jsx)("h3",{children:n.name}),Object(f.jsx)("h5",{children:n.time})]})]}),Object(f.jsx)("div",{className:"transaction__amount",children:Object(f.jsx)("span",{children:n.amount})})]})}))}),Object(f.jsxs)("a",{className:"view",href:"#",children:["View all ",Object(f.jsx)(F.a,{})]})]})}var R,B=d.b.section(I||(I=Object(o.a)(["\n ",';\n display: flex;\n flex-direction: column;\n gap: 1rem;\n .title {\n h2 {\n color: #ffc107;\n font-family: "Permanent Marker", cursive;\n letter-spacing: 0.3rem;\n }\n }\n .transactions {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-top: 1rem;\n .transaction {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n &__title {\n display: flex;\n gap: 1rem;\n &__image {\n img {\n height: 2.5rem;\n border-radius: 3rem;\n }\n }\n &__details {\n }\n }\n &__amount {\n background-color: #d7e41e1d;\n padding: 0.2rem 0.5rem;\n width: 4rem;\n border-radius: 1rem;\n text-align: center;\n transition: 0.3s ease-in-out;\n &:hover {\n background-color: #ffc107;\n span {\n color: black;\n }\n }\n span {\n color: #ffc107;\n }\n }\n }\n }\n .view {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n text-decoration: none;\n color: #ffc107;\n font-weight: bold;\n margin-top: 1rem;\n gap: 0.5rem;\n svg {\n transition: 0.3s ease-in-out;\n font-size: 1.4rem;\n }\n &:hover {\n svg {\n transform: translateX(0.5rem);\n }\n }\n }\n @media screen and (min-width: 280px) and (max-width: 375px) {\n .transactions {\n .transaction {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n }\n }\n'])),x),J=t(92);function W(){return Object(c.useEffect)((function(){Object(J.a)({origin:"bottom",distance:"80px",duration:2e3,reset:!1}).reveal("\n nav,\n .row__one,\n .row__two\n ",{opacity:0,interval:100})}),[]),Object(f.jsxs)(U,{children:[Object(f.jsx)(T,{}),Object(f.jsxs)("div",{className:"grid",children:[Object(f.jsxs)("div",{className:"row__one",children:[Object(f.jsx)(p,{}),Object(f.jsx)(P,{})]}),Object(f.jsxs)("div",{className:"row__two",children:[Object(f.jsx)(N,{}),Object(f.jsx)(K,{}),Object(f.jsx)(H,{})]})]})]})}var X,Q,U=d.b.section(R||(R=Object(o.a)(["\n margin-left: 18vw;\n padding: 2rem;\n height: 100%;\n .grid {\n display: flex;\n flex-direction: column;\n height: 100%;\n gap: 1rem;\n margin-top: 2rem;\n .row__one {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n height: 50%;\n gap: 1rem;\n }\n .row__two {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n height: 50%;\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n margin-left: 0;\n .grid {\n .row__one,\n .row__two {\n grid-template-columns: 1fr;\n }\n }\n }\n"]))),V=t(21),G=t(119),Z=t(94),nn=t(72),en=t(174);function tn(){var n=Object(c.useState)(1),e=Object(V.a)(n,2),t=e[0],a=e[1],i=Object(c.useState)(!1),r=Object(V.a)(i,2),s=r[0],l=r[1];return document.querySelector("html").addEventListener("click",(function(){return l(!1)})),Object(c.useEffect)((function(){Object(J.a)({origin:"left",distance:"80px",duration:1e3,reset:!1}).reveal("\n .brand,\n .links>ul>li:nth-of-type(1),\n .links>ul>li:nth-of-type(2),\n .links>ul>li:nth-of-type(3),\n .links>ul>li:nth-of-type(4),\n .links>ul>li:nth-of-type(5),\n .links>ul>li:nth-of-type(6),\n .logout\n ",{opacity:0,interval:300})}),[]),Object(f.jsxs)(f.Fragment,{children:[Object(f.jsxs)(cn,{children:[Object(f.jsxs)("div",{className:"top",children:[Object(f.jsxs)("div",{className:"brand",children:[Object(f.jsx)(Z.b,{}),Object(f.jsx)("span",{children:"MY TAXI"})]}),Object(f.jsx)("div",{className:"toggle",children:s?Object(f.jsx)(en.a,{onClick:function(){return l(!1)}}):Object(f.jsx)(nn.a,{onClick:function(n){n.stopPropagation(),l(!0)}})}),Object(f.jsx)("div",{className:"links",children:Object(f.jsxs)("ul",{children:[Object(f.jsx)("li",{className:1===t?"active":"none",onClick:function(){return a(1)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(z.a,{}),Object(f.jsx)("span",{children:" Dashboard"})]})}),Object(f.jsx)("li",{className:2===t?"active":"none",onClick:function(){return a(2)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(G.a,{}),Object(f.jsx)("span",{children:" Riders"})]})}),Object(f.jsx)("li",{className:3===t?"active":"none",onClick:function(){return a(3)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(Z.a,{}),Object(f.jsx)("span",{children:" Payment Details"})]})}),Object(f.jsx)("li",{className:4===t?"active":"none",onClick:function(){return a(4)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(nn.b,{}),Object(f.jsx)("span",{children:" Learning Center"})]})}),Object(f.jsx)("li",{className:5===t?"active":"none",onClick:function(){return a(5)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(j.b,{}),Object(f.jsx)("span",{children:" FAQs"})]})}),Object(f.jsx)("li",{className:6===t?"active":"none",onClick:function(){return a(6)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(m.a,{}),Object(f.jsx)("span",{children:" Settings"})]})})]})})]}),Object(f.jsx)("div",{className:"logout",children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(b.b,{}),Object(f.jsx)("span",{className:"logout",children:"Logout"})]})})]}),Object(f.jsx)(rn,{state:s,className:s?"show":"",children:Object(f.jsx)("div",{className:"responsive__links",children:Object(f.jsxs)("ul",{children:[Object(f.jsx)("li",{className:1===t?"active":"none",onClick:function(){return a(1)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(z.a,{}),Object(f.jsx)("span",{children:" Dashboard"})]})}),Object(f.jsx)("li",{className:2===t?"active":"none",onClick:function(){return a(2)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(G.a,{}),Object(f.jsx)("span",{children:" Riders"})]})}),Object(f.jsx)("li",{className:3===t?"active":"none",onClick:function(){return a(3)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(Z.a,{}),Object(f.jsx)("span",{children:" Payment Details"})]})}),Object(f.jsx)("li",{className:4===t?"active":"none",onClick:function(){return a(4)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(nn.b,{}),Object(f.jsx)("span",{children:" Learning Center"})]})}),Object(f.jsx)("li",{className:5===t?"active":"none",onClick:function(){return a(5)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(j.b,{}),Object(f.jsx)("span",{children:" FAQs"})]})}),Object(f.jsx)("li",{className:6===t?"active":"none",onClick:function(){return a(6)},children:Object(f.jsxs)("a",{href:"#",children:[Object(f.jsx)(m.a,{}),Object(f.jsx)("span",{children:" Settings"})]})})]})})})]})}var an,cn=d.b.section(X||(X=Object(o.a)(['\n position: fixed;\n left: 0;\n background-color: #212121;\n height: 100vh;\n width: 18vw;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 2rem 0;\n gap: 2rem;\n .top {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n width: 100%;\n\n .toggle {\n display: none;\n }\n .brand {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n svg {\n color: #ffc107;\n font-size: 2rem;\n }\n span {\n font-size: 2rem;\n color: #ffc107;\n font-family: "Permanent Marker", cursive;\n }\n }\n .links {\n display: flex;\n justify-content: center;\n ul {\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n li {\n padding: 0.6rem 1rem;\n border-radius: 0.6rem;\n &:hover {\n background-color: #ffc107;\n a {\n color: black;\n }\n }\n a {\n text-decoration: none;\n display: flex;\n gap: 1rem;\n color: white;\n }\n }\n .active {\n background-color: #ffc107;\n a {\n color: black;\n }\n }\n }\n }\n }\n\n .logout {\n padding: 0.3rem 1rem;\n border-radius: 0.6rem;\n &:hover {\n background-color: #da0037;\n }\n a {\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n color: white;\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n position: initial;\n width: 100%;\n height: max-content;\n padding: 1rem;\n .top {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 0 1rem;\n .toggle {\n display: block;\n color: white;\n z-index: 99;\n svg {\n font-size: 1.4rem;\n }\n }\n .brand {\n gap: 1rem;\n justify-content: flex-start;\n }\n }\n .top > .links,\n .logout {\n display: none;\n }\n }\n']))),rn=d.b.div(Q||(Q=Object(o.a)(["\n position: fixed;\n right: -10vw;\n top: 0;\n z-index: 10;\n background-color: black;\n height: 100vh;\n width: ",";\n transition: 0.4s ease-in-out;\n display: flex;\n opacity: 0;\n visibility: hidden;\n padding: 1rem;\n .responsive__links {\n ul {\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-top: 3rem;\n li {\n padding: 0.6rem 1rem;\n border-radius: 0.6rem;\n &:hover {\n background-color: #ffc107;\n a {\n color: black;\n }\n }\n a {\n text-decoration: none;\n display: flex;\n gap: 1rem;\n color: white;\n }\n }\n .active {\n background-color: #ffc107;\n a {\n color: black;\n }\n }\n }\n }\n"])),(function(n){return n.state?"60%":"0%"}));function sn(){return Object(f.jsxs)(ln,{children:[Object(f.jsx)(tn,{}),Object(f.jsx)(W,{})]})}var ln=d.b.div(an||(an=Object(o.a)(["\n position: relative;\n"])));l.a.render(Object(f.jsx)(r.a.StrictMode,{children:Object(f.jsx)(sn,{})}),document.getElementById("root"))}},[[324,1,2]]]); 2 | //# sourceMappingURL=main.3cdefe5e.chunk.js.map -------------------------------------------------------------------------------- /build/static/js/main.3cdefe5e.chunk.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["components/ReusableStyles.jsx","components/Analytics.jsx","components/Earnings.jsx","components/FAQ.jsx","components/Navbar.jsx","assets/profile.jpeg","components/Profile.jsx","assets/avatarImage.jpeg","components/Transfers.jsx","components/Dashboard.jsx","components/Sidebar.jsx","App.js","index.js"],"names":["cardStyles","css","Analytics","Section","className","styled","section","data","Earnings","ResponsiveContainer","width","height","AreaChart","margin","top","left","right","bottom","Tooltip","cursor","Area","animationBegin","animationDuration","type","dataKey","stroke","fill","strokeWidth","FAQ","faqs","icon","text","map","faq","Navbar","Nav","placeholder","nav","Profile","src","image","alt","Transfers","transactions","avatarImage","name","time","amount","transaction","href","Dashboard","useEffect","scrollreveal","origin","distance","duration","reset","reveal","opacity","interval","Sidebar","useState","currentLink","setCurrentLink","navbarState","setNavbarState","document","querySelector","addEventListener","onClick","e","stopPropagation","ResponsiveNav","state","div","App","Div","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.3cdefe5e.chunk.js","sourcesContent":["import { css } from \"styled-components\";\n\nexport const cardStyles = css`\n padding: 1rem 2rem 3rem 2rem;\n border-radius: 1rem;\n background-color: #212121;\n color: white;\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { BsFillCalendar2WeekFill } from \"react-icons/bs\";\nimport { IoStatsChart } from \"react-icons/io5\";\nimport { BiGroup } from \"react-icons/bi\";\nimport { FiActivity } from \"react-icons/fi\";\nimport { cardStyles } from \"./ReusableStyles\";\nexport default function Analytics() {\n return (\n

Spent this month

$682.5

\n \n

Earnings

$350.40

\n \n

New clients

321

Activity

$540.50

\n \n

\n );\n}\nconst Section = styled.section`\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n .analytic {\n ${cardStyles};\n padding: 1rem;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n gap: 1rem;\n transition: 0.5s ease-in-out;\n &:hover {\n background-color: #ffc107;\n color: black;\n svg {\n color: white;\n }\n }\n .logo {\n background-color: black;\n border-radius: 3rem;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 1.5rem;\n svg {\n font-size: 1.5rem;\n }\n }\n }\n\n @media screen and (min-width: 280px) and (max-width: 720px) {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n .analytic {\n &:nth-of-type(3),\n &:nth-of-type(4) {\n flex-direction: row-reverse;\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { AreaChart, Area, Tooltip, ResponsiveContainer } from \"recharts\";\nimport { cardStyles } from \"./ReusableStyles\";\nconst data = [\n { data: 4500 },\n {\n data: 5000,\n },\n {\n data: 4700,\n },\n {\n data: 4400,\n },\n {\n data: 4800,\n },\n {\n data: 5300,\n },\n {\n data: 5800,\n },\n {\n data: 6000,\n },\n {\n data: 6300,\n },\n {\n data: 6580,\n },\n {\n data: 6780,\n },\n {\n data: 6680,\n },\n {\n data: 6500,\n },\n {\n data: 6300,\n },\n {\n data: 5900,\n },\n {\n data: 5700,\n },\n {\n data: 5500,\n },\n {\n data: 5300,\n },\n {\n data: 5100,\n },\n {\n data: 5090,\n },\n {\n data: 5300,\n },\n {\n data: 5800,\n },\n {\n data: 6000,\n },\n {\n data: 6300,\n },\n {\n data: 6780,\n },\n {\n data: 6500,\n },\n {\n data: 6300,\n },\n {\n data: 6500,\n },\n {\n data: 6700,\n },\n {\n data: 7000,\n },\n {\n data: 7300,\n },\n {\n data: 7500,\n },\n {\n data: 7700,\n },\n {\n data: 8090,\n },\n {\n data: 8190,\n },\n {\n data: 7990,\n },\n\n {\n data: 7700,\n },\n {\n data: 7500,\n },\n {\n data: 7300,\n },\n {\n data: 7000,\n },\n {\n data: 6700,\n },\n {\n data: 6500,\n },\n {\n data: 6300,\n },\n {\n data: 6500,\n },\n {\n data: 6780,\n },\n {\n data: 6300,\n },\n {\n data: 6000,\n },\n {\n data: 5800,\n },\n\n {\n data: 5490,\n },\n {\n data: 6000,\n },\n {\n data: 8000,\n },\n];\nexport default function Earnings() {\n return (\n

This month earnings

$682.5

\n +2.45%\n

\n \n \n \n \n \n \n

\n );\n}\nconst Section = styled.section`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n min-height: 20rem;\n ${cardStyles}\n padding: 2rem 0 0 0;\n .top {\n .info {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.2rem;\n h1 {\n font-size: 2rem;\n }\n .growth {\n background-color: #d7e41e1d;\n padding: 0.5rem;\n border-radius: 1rem;\n transition: 0.3s ease-in-out;\n &:hover {\n background-color: #ffc107;\n span {\n color: black;\n }\n }\n span {\n color: #ffc107;\n }\n }\n }\n }\n .chart {\n height: 70%;\n .recharts-default-tooltip {\n background-color: black !important;\n border-color: black !important;\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IoIosArrowForward } from \"react-icons/io\";\nimport { AiFillCalendar } from \"react-icons/ai\";\nimport { MdTimelapse } from \"react-icons/md\";\nimport { IoMdCash } from \"react-icons/io\";\nimport { cardStyles } from \"./ReusableStyles\";\nexport default function FAQ() {\n const faqs = [\n {\n icon: ,\n text: \"How to manage time and get good marks for trips\",\n },\n {\n icon: ,\n text: \"How to regulate transactions over time\",\n },\n {\n icon: ,\n text: \"Withdrawing money through an ATM\",\n },\n ];\n return (\n

Information for drivers

\n {faqs.map((faq) => {\n return (\n

\n {faq.icon}\n

{faq.text}

\n \n

\n );\n })}\n

\n );\n}\nconst Section = styled.section`\n ${cardStyles};\n .title {\n h2 {\n color: #ffc107;\n font-family: \"Permanent Marker\", cursive;\n letter-spacing: 0.3rem;\n }\n }\n .faqs {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-top: 1rem;\n .faq {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n .info {\n display: flex;\n gap: 1rem;\n align-items: center;\n }\n svg {\n font-size: 1.4rem;\n }\n &:nth-of-type(2) {\n border-top: 0.01rem solid #6c6e6e;\n border-bottom: 0.01rem solid #6c6e6e;\n padding: 0.8rem 0;\n }\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n svg {\n font-size: 2rem !important;\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { BiSearch } from \"react-icons/bi\";\nexport default function Navbar() {\n return (\n \n );\n}\nconst Nav = styled.nav`\n display: flex;\n justify-content: space-between;\n color: white;\n .title {\n h1 {\n span {\n margin-left: 0.5rem;\n color: #ffc107;\n font-family: \"Permanent Marker\", cursive;\n letter-spacing: 0.2rem;\n }\n }\n }\n .search {\n background-color: #212121;\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem 8rem 1rem 1rem;\n border-radius: 1rem;\n svg {\n color: #ffc107;\n }\n input {\n background-color: transparent;\n border: none;\n color: #ffc107;\n font-family: \"Permanent Marker\", cursive;\n letter-spacing: 0.3rem;\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: #ffc107;\n font-family: \"Permanent Marker\", cursive;\n }\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n flex-direction: column;\n .title {\n h1 {\n span {\n display: block;\n\n margin: 1rem 0;\n /* letter-spacing: 0; */\n }\n }\n }\n }\n`;\n","export default __webpack_public_path__ + \"static/media/profile.2344c52c.jpeg\";","import React from \"react\";\nimport styled from \"styled-components\";\nimport image from \"../assets/profile.jpeg\";\nimport { HiOutlineLocationMarker } from \"react-icons/hi\";\nimport { cardStyles } from \"./ReusableStyles\";\nexport default function Profile() {\n return (\n

\n $\"\"$ \n

Kishan Sheth

\n New York, USA\n

Days at work

28

Rides

427

Hours

76

\n );\n}\nconst Section = styled.section`\n ${cardStyles};\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n .image {\n max-height: 10rem;\n overflow: hidden;\n border-radius: 20rem;\n img {\n height: 10rem;\n width: 10rem;\n object-fit: cover;\n border-radius: 20rem;\n transition: 0.5s ease-in-out;\n }\n &:hover {\n img {\n transform: scale(1.1);\n }\n }\n }\n .title {\n text-align: center;\n h2,\n h5 {\n color: #ffc107;\n font-family: \"Permanent Marker\", cursive;\n letter-spacing: 0.3rem;\n }\n h5 {\n letter-spacing: 0.2rem;\n }\n }\n .info {\n display: flex;\n gap: 1rem;\n .container {\n text-align: center;\n }\n }\n`;\n","export default __webpack_public_path__ + \"static/media/avatarImage.d37df039.jpeg\";","import React from \"react\";\nimport styled from \"styled-components\";\nimport { HiArrowNarrowRight } from \"react-icons/hi\";\nimport avatarImage from \"../assets/avatarImage.jpeg\";\nimport { cardStyles } from \"./ReusableStyles\";\n\nexport default function Transfers() {\n const transactions = [\n {\n image: avatarImage,\n name: \"From Kishan Sheth\",\n time: \"Today, 16:36\",\n amount: \"+$50\",\n },\n {\n image: avatarImage,\n name: \"To Lauras Santos\",\n time: \"Today, 08:49\",\n amount: \"-$25\",\n },\n {\n image: avatarImage,\n name: \"From Jadon S.\",\n time: \"Yesterday, 14:36\",\n amount: \"+$150\",\n },\n ];\n return (\n

Your Transfers

\n {transactions.map((transaction) => {\n return (\n

\n $\"\"$ \n

{transaction.name}

{transaction.time}

\n {transaction.amount}\n

\n );\n })}\n

\n \n View all \n \n

\n );\n}\n\nconst Section = styled.section`\n ${cardStyles};\n display: flex;\n flex-direction: column;\n gap: 1rem;\n .title {\n h2 {\n color: #ffc107;\n font-family: \"Permanent Marker\", cursive;\n letter-spacing: 0.3rem;\n }\n }\n .transactions {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-top: 1rem;\n .transaction {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n &__title {\n display: flex;\n gap: 1rem;\n &__image {\n img {\n height: 2.5rem;\n border-radius: 3rem;\n }\n }\n &__details {\n }\n }\n &__amount {\n background-color: #d7e41e1d;\n padding: 0.2rem 0.5rem;\n width: 4rem;\n border-radius: 1rem;\n text-align: center;\n transition: 0.3s ease-in-out;\n &:hover {\n background-color: #ffc107;\n span {\n color: black;\n }\n }\n span {\n color: #ffc107;\n }\n }\n }\n }\n .view {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n text-decoration: none;\n color: #ffc107;\n font-weight: bold;\n margin-top: 1rem;\n gap: 0.5rem;\n svg {\n transition: 0.3s ease-in-out;\n font-size: 1.4rem;\n }\n &:hover {\n svg {\n transform: translateX(0.5rem);\n }\n }\n }\n @media screen and (min-width: 280px) and (max-width: 375px) {\n .transactions {\n .transaction {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n }\n }\n`;\n","import React, { useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport Analytics from \"./Analytics\";\nimport Earnings from \"./Earnings\";\nimport FAQ from \"./FAQ\";\nimport Navbar from \"./Navbar\";\nimport Profile from \"./Profile\";\nimport Transfers from \"./Transfers\";\nimport scrollreveal from \"scrollreveal\";\nexport default function Dashboard() {\n useEffect(() => {\n const sr = scrollreveal({\n origin: \"bottom\",\n distance: \"80px\",\n duration: 2000,\n reset: false,\n });\n sr.reveal(\n `\n nav,\n .row__one,\n .row__two\n `,\n {\n opacity: 0,\n interval: 100,\n }\n );\n }, []);\n return (\n

\n \n

\n \n \n

\n \n \n \n

\n );\n}\n\nconst Section = styled.section`\n margin-left: 18vw;\n padding: 2rem;\n height: 100%;\n .grid {\n display: flex;\n flex-direction: column;\n height: 100%;\n gap: 1rem;\n margin-top: 2rem;\n .row__one {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n height: 50%;\n gap: 1rem;\n }\n .row__two {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n height: 50%;\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n margin-left: 0;\n .grid {\n .row__one,\n .row__two {\n grid-template-columns: 1fr;\n }\n }\n }\n`;\n","import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { MdSpaceDashboard } from \"react-icons/md\";\nimport { RiDashboard2Fill } from \"react-icons/ri\";\nimport { FaAddressCard, FaTaxi } from \"react-icons/fa\";\nimport { GiTwirlCenter } from \"react-icons/gi\";\nimport { BsFillChatTextFill } from \"react-icons/bs\";\nimport { IoSettings } from \"react-icons/io5\";\nimport { FiLogOut } from \"react-icons/fi\";\nimport { GiHamburgerMenu } from \"react-icons/gi\";\nimport { VscChromeClose } from \"react-icons/vsc\";\nimport scrollreveal from \"scrollreveal\";\nexport default function Sidebar() {\n const [currentLink, setCurrentLink] = useState(1);\n const [navbarState, setNavbarState] = useState(false);\n const html = document.querySelector(\"html\");\n html.addEventListener(\"click\", () => setNavbarState(false));\n\n useEffect(() => {\n const sr = scrollreveal({\n origin: \"left\",\n distance: \"80px\",\n duration: 1000,\n reset: false,\n });\n\n sr.reveal(\n `\n .brand,\n .links>ul>li:nth-of-type(1),\n .links>ul>li:nth-of-type(2),\n .links>ul>li:nth-of-type(3),\n .links>ul>li:nth-of-type(4),\n .links>ul>li:nth-of-type(5),\n .links>ul>li:nth-of-type(6),\n .logout\n `,\n {\n opacity: 0,\n interval: 300,\n }\n );\n }, []);\n\n return (\n <>\n

\n \n MY TAXI\n

\n {navbarState ? (\n setNavbarState(false)} />\n ) : (\n {\n e.stopPropagation();\n setNavbarState(true);\n }}\n />\n )}\n

setCurrentLink(1)}\n >\n \n \n Dashboard\n \n \n setCurrentLink(2)}\n >\n \n \n Riders\n \n \n setCurrentLink(3)}\n >\n \n \n Payment Details\n \n \n setCurrentLink(4)}\n >\n \n \n Learning Center\n \n \n setCurrentLink(5)}\n >\n \n \n FAQs\n \n \n setCurrentLink(6)}\n >\n \n \n Settings\n \n \n

\n \n \n Logout\n \n

\n \n

\n \n \n );\n}\nconst Section = styled.section`\n position: fixed;\n left: 0;\n background-color: #212121;\n height: 100vh;\n width: 18vw;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 2rem 0;\n gap: 2rem;\n .top {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n width: 100%;\n\n .toggle {\n display: none;\n }\n .brand {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 2rem;\n svg {\n color: #ffc107;\n font-size: 2rem;\n }\n span {\n font-size: 2rem;\n color: #ffc107;\n font-family: \"Permanent Marker\", cursive;\n }\n }\n .links {\n display: flex;\n justify-content: center;\n ul {\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n li {\n padding: 0.6rem 1rem;\n border-radius: 0.6rem;\n &:hover {\n background-color: #ffc107;\n a {\n color: black;\n }\n }\n a {\n text-decoration: none;\n display: flex;\n gap: 1rem;\n color: white;\n }\n }\n .active {\n background-color: #ffc107;\n a {\n color: black;\n }\n }\n }\n }\n }\n\n .logout {\n padding: 0.3rem 1rem;\n border-radius: 0.6rem;\n &:hover {\n background-color: #da0037;\n }\n a {\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n color: white;\n }\n }\n @media screen and (min-width: 280px) and (max-width: 1080px) {\n position: initial;\n width: 100%;\n height: max-content;\n padding: 1rem;\n .top {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 0 1rem;\n .toggle {\n display: block;\n color: white;\n z-index: 99;\n svg {\n font-size: 1.4rem;\n }\n }\n .brand {\n gap: 1rem;\n justify-content: flex-start;\n }\n }\n .top > .links,\n .logout {\n display: none;\n }\n }\n`;\n\nconst ResponsiveNav = styled.div`\n position: fixed;\n right: -10vw;\n top: 0;\n z-index: 10;\n background-color: black;\n height: 100vh;\n width: ${({ state }) => (state ? \"60%\" : \"0%\")};\n transition: 0.4s ease-in-out;\n display: flex;\n opacity: 0;\n visibility: hidden;\n padding: 1rem;\n .responsive__links {\n ul {\n list-style-type: none;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin-top: 3rem;\n li {\n padding: 0.6rem 1rem;\n border-radius: 0.6rem;\n &:hover {\n background-color: #ffc107;\n a {\n color: black;\n }\n }\n a {\n text-decoration: none;\n display: flex;\n gap: 1rem;\n color: white;\n }\n }\n .active {\n background-color: #ffc107;\n a {\n color: black;\n }\n }\n }\n }\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Dashboard from \"./components/Dashboard\";\nimport Sidebar from \"./components/Sidebar\";\nexport default function App() {\n return (\n

\n \n \n

\n );\n}\n\nconst Div = styled.div`\n position: relative;\n`;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\n\nReactDOM.render(\n \n \n ,\n document.getElementById(\"root\")\n);\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /build/static/js/runtime-main.302cd309.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(r){for(var n,a,i=r[0],l=r[1],f=r[2],c=0,s=[];c0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-taxi-dashboard-with-animations/365e7d8ee97a007504ed052a03a0ac7c2df1f005/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-taxi-dashboard-with-animations/365e7d8ee97a007504ed052a03a0ac7c2df1f005/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-taxi-dashboard-with-animations/365e7d8ee97a007504ed052a03a0ac7c2df1f005/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import Dashboard from "./components/Dashboard"; 4 | import Sidebar from "./components/Sidebar"; 5 | export default function App() { 6 | return ( 7 |

8 | 9 | 10 |

11 | ); 12 | } 13 | 14 | const Div = styled.div` 15 | position: relative; 16 | `; 17 | -------------------------------------------------------------------------------- /src/assets/avatarImage.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-taxi-dashboard-with-animations/365e7d8ee97a007504ed052a03a0ac7c2df1f005/src/assets/avatarImage.jpeg -------------------------------------------------------------------------------- /src/assets/profile.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/react-taxi-dashboard-with-animations/365e7d8ee97a007504ed052a03a0ac7c2df1f005/src/assets/profile.jpeg -------------------------------------------------------------------------------- /src/components/Analytics.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { BsFillCalendar2WeekFill } from "react-icons/bs"; 4 | import { IoStatsChart } from "react-icons/io5"; 5 | import { BiGroup } from "react-icons/bi"; 6 | import { FiActivity } from "react-icons/fi"; 7 | import { cardStyles } from "./ReusableStyles"; 8 | export default function Analytics() { 9 | return ( 10 |

11 |

12 |

13 |

Spent this month

14 |

$682.5

15 |

16 |

17 | 18 |

19 |

20 |

21 |

22 | 23 |

24 |

25 |

Earnings

26 |

$350.40

27 |

28 |

29 |

30 |

31 | 32 |

33 |

34 |

New clients

35 |

321

36 |

37 |

38 |

39 |

40 |

Activity

41 |

$540.50

42 |

43 |

44 | 45 |

46 |

47 |

48 | ); 49 | } 50 | const Section = styled.section` 51 | display: grid; 52 | grid-template-columns: repeat(2, 1fr); 53 | gap: 1rem; 54 | .analytic { 55 | ${cardStyles}; 56 | padding: 1rem; 57 | display: flex; 58 | justify-content: space-evenly; 59 | align-items: center; 60 | gap: 1rem; 61 | transition: 0.5s ease-in-out; 62 | &:hover { 63 | background-color: #ffc107; 64 | color: black; 65 | svg { 66 | color: white; 67 | } 68 | } 69 | .logo { 70 | background-color: black; 71 | border-radius: 3rem; 72 | display: flex; 73 | justify-content: center; 74 | align-items: center; 75 | padding: 1.5rem; 76 | svg { 77 | font-size: 1.5rem; 78 | } 79 | } 80 | } 81 | 82 | @media screen and (min-width: 280px) and (max-width: 720px) { 83 | grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 84 | .analytic { 85 | &:nth-of-type(3), 86 | &:nth-of-type(4) { 87 | flex-direction: row-reverse; 88 | } 89 | } 90 | } 91 | `; 92 | -------------------------------------------------------------------------------- /src/components/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import styled from "styled-components"; 3 | import Analytics from "./Analytics"; 4 | import Earnings from "./Earnings"; 5 | import FAQ from "./FAQ"; 6 | import Navbar from "./Navbar"; 7 | import Profile from "./Profile"; 8 | import Transfers from "./Transfers"; 9 | import scrollreveal from "scrollreveal"; 10 | export default function Dashboard() { 11 | useEffect(() => { 12 | const sr = scrollreveal({ 13 | origin: "bottom", 14 | distance: "80px", 15 | duration: 2000, 16 | reset: false, 17 | }); 18 | sr.reveal( 19 | ` 20 | nav, 21 | .row__one, 22 | .row__two 23 | `, 24 | { 25 | opacity: 0, 26 | interval: 100, 27 | } 28 | ); 29 | }, []); 30 | return ( 31 |

32 | 33 |

34 |

35 | 36 | 37 |

38 |

39 | 40 | 41 | 42 |

43 |

44 |

45 | ); 46 | } 47 | 48 | const Section = styled.section` 49 | margin-left: 18vw; 50 | padding: 2rem; 51 | height: 100%; 52 | .grid { 53 | display: flex; 54 | flex-direction: column; 55 | height: 100%; 56 | gap: 1rem; 57 | margin-top: 2rem; 58 | .row__one { 59 | display: grid; 60 | grid-template-columns: repeat(2, 1fr); 61 | height: 50%; 62 | gap: 1rem; 63 | } 64 | .row__two { 65 | display: grid; 66 | grid-template-columns: repeat(3, 1fr); 67 | gap: 1rem; 68 | height: 50%; 69 | } 70 | } 71 | @media screen and (min-width: 280px) and (max-width: 1080px) { 72 | margin-left: 0; 73 | .grid { 74 | .row__one, 75 | .row__two { 76 | grid-template-columns: 1fr; 77 | } 78 | } 79 | } 80 | `; 81 | -------------------------------------------------------------------------------- /src/components/Earnings.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { AreaChart, Area, Tooltip, ResponsiveContainer } from "recharts"; 4 | import { cardStyles } from "./ReusableStyles"; 5 | const data = [ 6 | { data: 4500 }, 7 | { 8 | data: 5000, 9 | }, 10 | { 11 | data: 4700, 12 | }, 13 | { 14 | data: 4400, 15 | }, 16 | { 17 | data: 4800, 18 | }, 19 | { 20 | data: 5300, 21 | }, 22 | { 23 | data: 5800, 24 | }, 25 | { 26 | data: 6000, 27 | }, 28 | { 29 | data: 6300, 30 | }, 31 | { 32 | data: 6580, 33 | }, 34 | { 35 | data: 6780, 36 | }, 37 | { 38 | data: 6680, 39 | }, 40 | { 41 | data: 6500, 42 | }, 43 | { 44 | data: 6300, 45 | }, 46 | { 47 | data: 5900, 48 | }, 49 | { 50 | data: 5700, 51 | }, 52 | { 53 | data: 5500, 54 | }, 55 | { 56 | data: 5300, 57 | }, 58 | { 59 | data: 5100, 60 | }, 61 | { 62 | data: 5090, 63 | }, 64 | { 65 | data: 5300, 66 | }, 67 | { 68 | data: 5800, 69 | }, 70 | { 71 | data: 6000, 72 | }, 73 | { 74 | data: 6300, 75 | }, 76 | { 77 | data: 6780, 78 | }, 79 | { 80 | data: 6500, 81 | }, 82 | { 83 | data: 6300, 84 | }, 85 | { 86 | data: 6500, 87 | }, 88 | { 89 | data: 6700, 90 | }, 91 | { 92 | data: 7000, 93 | }, 94 | { 95 | data: 7300, 96 | }, 97 | { 98 | data: 7500, 99 | }, 100 | { 101 | data: 7700, 102 | }, 103 | { 104 | data: 8090, 105 | }, 106 | { 107 | data: 8190, 108 | }, 109 | { 110 | data: 7990, 111 | }, 112 | 113 | { 114 | data: 7700, 115 | }, 116 | { 117 | data: 7500, 118 | }, 119 | { 120 | data: 7300, 121 | }, 122 | { 123 | data: 7000, 124 | }, 125 | { 126 | data: 6700, 127 | }, 128 | { 129 | data: 6500, 130 | }, 131 | { 132 | data: 6300, 133 | }, 134 | { 135 | data: 6500, 136 | }, 137 | { 138 | data: 6780, 139 | }, 140 | { 141 | data: 6300, 142 | }, 143 | { 144 | data: 6000, 145 | }, 146 | { 147 | data: 5800, 148 | }, 149 | 150 | { 151 | data: 5490, 152 | }, 153 | { 154 | data: 6000, 155 | }, 156 | { 157 | data: 8000, 158 | }, 159 | ]; 160 | export default function Earnings() { 161 | return ( 162 |

163 |

164 |

165 |

This month earnings

166 |

$682.5

167 |

168 | +2.45% 169 |

170 |

171 |

172 |

173 | 174 | 180 | 181 | 190 | 191 | 192 |

193 |

194 | ); 195 | } 196 | const Section = styled.section` 197 | display: flex; 198 | flex-direction: column; 199 | justify-content: space-between; 200 | min-height: 20rem; 201 | ${cardStyles} 202 | padding: 2rem 0 0 0; 203 | .top { 204 | .info { 205 | display: flex; 206 | flex-direction: column; 207 | align-items: center; 208 | gap: 0.2rem; 209 | h1 { 210 | font-size: 2rem; 211 | } 212 | .growth { 213 | background-color: #d7e41e1d; 214 | padding: 0.5rem; 215 | border-radius: 1rem; 216 | transition: 0.3s ease-in-out; 217 | &:hover { 218 | background-color: #ffc107; 219 | span { 220 | color: black; 221 | } 222 | } 223 | span { 224 | color: #ffc107; 225 | } 226 | } 227 | } 228 | } 229 | .chart { 230 | height: 70%; 231 | .recharts-default-tooltip { 232 | background-color: black !important; 233 | border-color: black !important; 234 | } 235 | } 236 | @media screen and (min-width: 280px) and (max-width: 1080px) { 237 | } 238 | `; 239 | -------------------------------------------------------------------------------- /src/components/FAQ.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { IoIosArrowForward } from "react-icons/io"; 4 | import { AiFillCalendar } from "react-icons/ai"; 5 | import { MdTimelapse } from "react-icons/md"; 6 | import { IoMdCash } from "react-icons/io"; 7 | import { cardStyles } from "./ReusableStyles"; 8 | export default function FAQ() { 9 | const faqs = [ 10 | { 11 | icon: , 12 | text: "How to manage time and get good marks for trips", 13 | }, 14 | { 15 | icon: , 16 | text: "How to regulate transactions over time", 17 | }, 18 | { 19 | icon: , 20 | text: "Withdrawing money through an ATM", 21 | }, 22 | ]; 23 | return ( 24 |

25 |

26 |

Information for drivers

27 |

28 |

29 | {faqs.map((faq) => { 30 | return ( 31 |

32 |

33 | {faq.icon} 34 |

{faq.text}

35 |

36 | 37 |

38 | ); 39 | })} 40 |

41 |

42 | ); 43 | } 44 | const Section = styled.section` 45 | ${cardStyles}; 46 | .title { 47 | h2 { 48 | color: #ffc107; 49 | font-family: "Permanent Marker", cursive; 50 | letter-spacing: 0.3rem; 51 | } 52 | } 53 | .faqs { 54 | display: flex; 55 | flex-direction: column; 56 | gap: 1rem; 57 | margin-top: 1rem; 58 | .faq { 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | cursor: pointer; 63 | .info { 64 | display: flex; 65 | gap: 1rem; 66 | align-items: center; 67 | } 68 | svg { 69 | font-size: 1.4rem; 70 | } 71 | &:nth-of-type(2) { 72 | border-top: 0.01rem solid #6c6e6e; 73 | border-bottom: 0.01rem solid #6c6e6e; 74 | padding: 0.8rem 0; 75 | } 76 | } 77 | } 78 | @media screen and (min-width: 280px) and (max-width: 1080px) { 79 | svg { 80 | font-size: 2rem !important; 81 | } 82 | } 83 | `; 84 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { BiSearch } from "react-icons/bi"; 4 | export default function Navbar() { 5 | return ( 6 | 18 | ); 19 | } 20 | const Nav = styled.nav` 21 | display: flex; 22 | justify-content: space-between; 23 | color: white; 24 | .title { 25 | h1 { 26 | span { 27 | margin-left: 0.5rem; 28 | color: #ffc107; 29 | font-family: "Permanent Marker", cursive; 30 | letter-spacing: 0.2rem; 31 | } 32 | } 33 | } 34 | .search { 35 | background-color: #212121; 36 | display: flex; 37 | align-items: center; 38 | gap: 1rem; 39 | padding: 1rem 8rem 1rem 1rem; 40 | border-radius: 1rem; 41 | svg { 42 | color: #ffc107; 43 | } 44 | input { 45 | background-color: transparent; 46 | border: none; 47 | color: #ffc107; 48 | font-family: "Permanent Marker", cursive; 49 | letter-spacing: 0.3rem; 50 | &:focus { 51 | outline: none; 52 | } 53 | &::placeholder { 54 | color: #ffc107; 55 | font-family: "Permanent Marker", cursive; 56 | } 57 | } 58 | } 59 | @media screen and (min-width: 280px) and (max-width: 1080px) { 60 | flex-direction: column; 61 | .title { 62 | h1 { 63 | span { 64 | display: block; 65 | 66 | margin: 1rem 0; 67 | /* letter-spacing: 0; */ 68 | } 69 | } 70 | } 71 | } 72 | `; 73 | -------------------------------------------------------------------------------- /src/components/Profile.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import image from "../assets/profile.jpeg"; 4 | import { HiOutlineLocationMarker } from "react-icons/hi"; 5 | import { cardStyles } from "./ReusableStyles"; 6 | export default function Profile() { 7 | return ( 8 |

9 |

10 |

11 |

12 |

13 |

Kishan Sheth

14 |

15 | New York, USA 16 |

17 |

18 |

19 |

20 |

Days at work

21 |

28

22 |

23 |

24 |

Rides

25 |

427

26 |

27 |

28 |

Hours

29 |

76

30 |

31 |

32 |

33 | ); 34 | } 35 | const Section = styled.section` 36 | ${cardStyles}; 37 | display: flex; 38 | flex-direction: column; 39 | align-items: center; 40 | gap: 1rem; 41 | .image { 42 | max-height: 10rem; 43 | overflow: hidden; 44 | border-radius: 20rem; 45 | img { 46 | height: 10rem; 47 | width: 10rem; 48 | object-fit: cover; 49 | border-radius: 20rem; 50 | transition: 0.5s ease-in-out; 51 | } 52 | &:hover { 53 | img { 54 | transform: scale(1.1); 55 | } 56 | } 57 | } 58 | .title { 59 | text-align: center; 60 | h2, 61 | h5 { 62 | color: #ffc107; 63 | font-family: "Permanent Marker", cursive; 64 | letter-spacing: 0.3rem; 65 | } 66 | h5 { 67 | letter-spacing: 0.2rem; 68 | } 69 | } 70 | .info { 71 | display: flex; 72 | gap: 1rem; 73 | .container { 74 | text-align: center; 75 | } 76 | } 77 | `; 78 | -------------------------------------------------------------------------------- /src/components/ReusableStyles.jsx: -------------------------------------------------------------------------------- 1 | import { css } from "styled-components"; 2 | 3 | export const cardStyles = css` 4 | padding: 1rem 2rem 3rem 2rem; 5 | border-radius: 1rem; 6 | background-color: #212121; 7 | color: white; 8 | `; 9 | -------------------------------------------------------------------------------- /src/components/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import styled from "styled-components"; 3 | import { MdSpaceDashboard } from "react-icons/md"; 4 | import { RiDashboard2Fill } from "react-icons/ri"; 5 | import { FaAddressCard, FaTaxi } from "react-icons/fa"; 6 | import { GiTwirlCenter } from "react-icons/gi"; 7 | import { BsFillChatTextFill } from "react-icons/bs"; 8 | import { IoSettings } from "react-icons/io5"; 9 | import { FiLogOut } from "react-icons/fi"; 10 | import { GiHamburgerMenu } from "react-icons/gi"; 11 | import { VscChromeClose } from "react-icons/vsc"; 12 | import scrollreveal from "scrollreveal"; 13 | export default function Sidebar() { 14 | const [currentLink, setCurrentLink] = useState(1); 15 | const [navbarState, setNavbarState] = useState(false); 16 | const html = document.querySelector("html"); 17 | html.addEventListener("click", () => setNavbarState(false)); 18 | 19 | useEffect(() => { 20 | const sr = scrollreveal({ 21 | origin: "left", 22 | distance: "80px", 23 | duration: 1000, 24 | reset: false, 25 | }); 26 | 27 | sr.reveal( 28 | ` 29 | .brand, 30 | .links>ul>li:nth-of-type(1), 31 | .links>ul>li:nth-of-type(2), 32 | .links>ul>li:nth-of-type(3), 33 | .links>ul>li:nth-of-type(4), 34 | .links>ul>li:nth-of-type(5), 35 | .links>ul>li:nth-of-type(6), 36 | .logout 37 | `, 38 | { 39 | opacity: 0, 40 | interval: 300, 41 | } 42 | ); 43 | }, []); 44 | 45 | return ( 46 | <> 47 |

48 |

49 |

50 | 51 | MY TAXI 52 |

53 |

54 | {navbarState ? ( 55 | setNavbarState(false)} /> 56 | ) : ( 57 | { 59 | e.stopPropagation(); 60 | setNavbarState(true); 61 | }} 62 | /> 63 | )} 64 |

65 |

66 |

setCurrentLink(1)} 70 | > 71 | 72 | 73 | Dashboard 74 | 75 |
setCurrentLink(2)} 79 | > 80 | 81 | 82 | Riders 83 | 84 |
setCurrentLink(3)} 88 | > 89 | 90 | 91 | Payment Details 92 | 93 |
setCurrentLink(4)} 97 | > 98 | 99 | 100 | Learning Center 101 | 102 |
setCurrentLink(5)} 106 | > 107 | 108 | 109 | FAQs 110 | 111 |
setCurrentLink(6)} 115 | > 116 | 117 | 118 | Settings 119 | 120 |

122 |

123 |

124 |

125 | 126 | 127 | Logout 128 | 129 |

130 |

131 | 132 |

133 |

setCurrentLink(1)} 137 | > 138 | 139 | 140 | Dashboard 141 | 142 |
setCurrentLink(2)} 146 | > 147 | 148 | 149 | Riders 150 | 151 |
setCurrentLink(3)} 155 | > 156 | 157 | 158 | Payment Details 159 | 160 |
setCurrentLink(4)} 164 | > 165 | 166 | 167 | Learning Center 168 | 169 |
setCurrentLink(5)} 173 | > 174 | 175 | 176 | FAQs 177 | 178 |
setCurrentLink(6)} 182 | > 183 | 184 | 185 | Settings 186 | 187 |

189 |

190 | 191 | 192 | ); 193 | } 194 | const Section = styled.section` 195 | position: fixed; 196 | left: 0; 197 | background-color: #212121; 198 | height: 100vh; 199 | width: 18vw; 200 | display: flex; 201 | flex-direction: column; 202 | align-items: center; 203 | justify-content: space-between; 204 | padding: 2rem 0; 205 | gap: 2rem; 206 | .top { 207 | display: flex; 208 | flex-direction: column; 209 | gap: 2rem; 210 | width: 100%; 211 | 212 | .toggle { 213 | display: none; 214 | } 215 | .brand { 216 | width: 100%; 217 | display: flex; 218 | justify-content: center; 219 | align-items: center; 220 | gap: 2rem; 221 | svg { 222 | color: #ffc107; 223 | font-size: 2rem; 224 | } 225 | span { 226 | font-size: 2rem; 227 | color: #ffc107; 228 | font-family: "Permanent Marker", cursive; 229 | } 230 | } 231 | .links { 232 | display: flex; 233 | justify-content: center; 234 | ul { 235 | list-style-type: none; 236 | display: flex; 237 | flex-direction: column; 238 | gap: 1rem; 239 | li { 240 | padding: 0.6rem 1rem; 241 | border-radius: 0.6rem; 242 | &:hover { 243 | background-color: #ffc107; 244 | a { 245 | color: black; 246 | } 247 | } 248 | a { 249 | text-decoration: none; 250 | display: flex; 251 | gap: 1rem; 252 | color: white; 253 | } 254 | } 255 | .active { 256 | background-color: #ffc107; 257 | a { 258 | color: black; 259 | } 260 | } 261 | } 262 | } 263 | } 264 | 265 | .logout { 266 | padding: 0.3rem 1rem; 267 | border-radius: 0.6rem; 268 | &:hover { 269 | background-color: #da0037; 270 | } 271 | a { 272 | text-decoration: none; 273 | display: flex; 274 | align-items: center; 275 | justify-content: flex-start; 276 | color: white; 277 | } 278 | } 279 | @media screen and (min-width: 280px) and (max-width: 1080px) { 280 | position: initial; 281 | width: 100%; 282 | height: max-content; 283 | padding: 1rem; 284 | .top { 285 | flex-direction: row; 286 | align-items: center; 287 | justify-content: space-between; 288 | padding: 0 1rem; 289 | .toggle { 290 | display: block; 291 | color: white; 292 | z-index: 99; 293 | svg { 294 | font-size: 1.4rem; 295 | } 296 | } 297 | .brand { 298 | gap: 1rem; 299 | justify-content: flex-start; 300 | } 301 | } 302 | .top > .links, 303 | .logout { 304 | display: none; 305 | } 306 | } 307 | `; 308 | 309 | const ResponsiveNav = styled.div` 310 | position: fixed; 311 | right: -10vw; 312 | top: 0; 313 | z-index: 10; 314 | background-color: black; 315 | height: 100vh; 316 | width: ${({ state }) => (state ? "60%" : "0%")}; 317 | transition: 0.4s ease-in-out; 318 | display: flex; 319 | opacity: 0; 320 | visibility: hidden; 321 | padding: 1rem; 322 | .responsive__links { 323 | ul { 324 | list-style-type: none; 325 | display: flex; 326 | flex-direction: column; 327 | gap: 1rem; 328 | margin-top: 3rem; 329 | li { 330 | padding: 0.6rem 1rem; 331 | border-radius: 0.6rem; 332 | &:hover { 333 | background-color: #ffc107; 334 | a { 335 | color: black; 336 | } 337 | } 338 | a { 339 | text-decoration: none; 340 | display: flex; 341 | gap: 1rem; 342 | color: white; 343 | } 344 | } 345 | .active { 346 | background-color: #ffc107; 347 | a { 348 | color: black; 349 | } 350 | } 351 | } 352 | } 353 | `; 354 | -------------------------------------------------------------------------------- /src/components/Transfers.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { HiArrowNarrowRight } from "react-icons/hi"; 4 | import avatarImage from "../assets/avatarImage.jpeg"; 5 | import { cardStyles } from "./ReusableStyles"; 6 | 7 | export default function Transfers() { 8 | const transactions = [ 9 | { 10 | image: avatarImage, 11 | name: "From Kishan Sheth", 12 | time: "Today, 16:36", 13 | amount: "+$50", 14 | }, 15 | { 16 | image: avatarImage, 17 | name: "To Lauras Santos", 18 | time: "Today, 08:49", 19 | amount: "-$25", 20 | }, 21 | { 22 | image: avatarImage, 23 | name: "From Jadon S.", 24 | time: "Yesterday, 14:36", 25 | amount: "+$150", 26 | }, 27 | ]; 28 | return ( 29 |

30 |

31 |

Your Transfers

32 |

33 |

34 | {transactions.map((transaction) => { 35 | return ( 36 |

37 |

38 |

39 |

40 |

41 |

42 |

{transaction.name}

43 |

{transaction.time}

44 |

45 |

46 |

47 | {transaction.amount} 48 |

49 |

50 | ); 51 | })} 52 |

53 | 54 | View all 55 | 56 |

57 | ); 58 | } 59 | 60 | const Section = styled.section` 61 | ${cardStyles}; 62 | display: flex; 63 | flex-direction: column; 64 | gap: 1rem; 65 | .title { 66 | h2 { 67 | color: #ffc107; 68 | font-family: "Permanent Marker", cursive; 69 | letter-spacing: 0.3rem; 70 | } 71 | } 72 | .transactions { 73 | display: flex; 74 | flex-direction: column; 75 | gap: 1rem; 76 | margin-top: 1rem; 77 | .transaction { 78 | display: flex; 79 | justify-content: space-between; 80 | align-items: flex-start; 81 | &__title { 82 | display: flex; 83 | gap: 1rem; 84 | &__image { 85 | img { 86 | height: 2.5rem; 87 | border-radius: 3rem; 88 | } 89 | } 90 | &__details { 91 | } 92 | } 93 | &__amount { 94 | background-color: #d7e41e1d; 95 | padding: 0.2rem 0.5rem; 96 | width: 4rem; 97 | border-radius: 1rem; 98 | text-align: center; 99 | transition: 0.3s ease-in-out; 100 | &:hover { 101 | background-color: #ffc107; 102 | span { 103 | color: black; 104 | } 105 | } 106 | span { 107 | color: #ffc107; 108 | } 109 | } 110 | } 111 | } 112 | .view { 113 | width: 100%; 114 | display: flex; 115 | justify-content: flex-end; 116 | align-items: center; 117 | text-decoration: none; 118 | color: #ffc107; 119 | font-weight: bold; 120 | margin-top: 1rem; 121 | gap: 0.5rem; 122 | svg { 123 | transition: 0.3s ease-in-out; 124 | font-size: 1.4rem; 125 | } 126 | &:hover { 127 | svg { 128 | transform: translateX(0.5rem); 129 | } 130 | } 131 | } 132 | @media screen and (min-width: 280px) and (max-width: 375px) { 133 | .transactions { 134 | .transaction { 135 | flex-direction: column; 136 | align-items: center; 137 | gap: 1rem; 138 | } 139 | } 140 | } 141 | `; 142 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Permanent+Marker&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Montserrat", sans-serif; 11 | background-color: black; 12 | } 13 | 14 | ::-webkit-scrollbar { 15 | background-color: black; 16 | width: 0.4vw; 17 | } 18 | 19 | ::-webkit-scrollbar-thumb { 20 | background: #ffc107; 21 | } 22 | 23 | .show { 24 | opacity: 1 !important; 25 | visibility: visible !important; 26 | right: 0 !important; 27 | } 28 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | --------------------------------------------------------------------------------