├── README.md ├── .gitignore ├── public ├── robots.txt ├── manifest.json ├── donation.svg └── index.html ├── .eslintrc.js ├── src ├── Components │ ├── Title │ │ └── index.jsx │ ├── Container │ │ └── index.jsx │ ├── Header │ │ └── index.jsx │ └── Account │ │ └── index.jsx ├── index.js ├── App.js ├── info.js └── assets │ ├── images │ ├── ojo.svg │ ├── themeOff.svg │ ├── otros.svg │ ├── privado.svg │ ├── logo.svg │ ├── utilidades.svg │ ├── transporte.svg │ ├── salud.svg │ ├── themeOn.svg │ ├── alimentacion.svg │ └── dinero.svg │ └── estilos.css └── package.json /README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserOptions: { 3 | parser: '@babel/eslint-parser', 4 | requireConfigFile: false, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /src/Components/Title/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Title = ({ children }) => { 4 | return

{children}

; 5 | }; 6 | export default Title; 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | import "./assets/estilos.css"; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById("root") 9 | ); 10 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Container from "./Components/Container"; 4 | import Header from "./Components/Header"; 5 | 6 | function App() { 7 | return ( 8 | <> 9 |

10 | 11 | 12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /src/Components/Container/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Title from "../Title"; 4 | import Account from "../Account"; 5 | 6 | const Container = () => { 7 | return ( 8 |

9 | Smart Bank 10 |

11 | 12 |

13 |

14 | ); 15 | }; 16 | 17 | export default Container; 18 | -------------------------------------------------------------------------------- /src/Components/Header/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "../../assets/images/logo.svg"; 3 | 4 | const Header = () => { 5 | return ( 6 |

7 |

8 |

9 | 10 | Ayuda 11 | 12 | 13 | Salir 14 | 15 |

16 |

17 | ); 18 | }; 19 | 20 | export default Header; 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "donation.svg", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "donation.svg", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "donation.svg", 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 | -------------------------------------------------------------------------------- /src/info.js: -------------------------------------------------------------------------------- 1 | export const lista = { 2 | cargos: [ 3 | { 4 | id: "123131321", 5 | type: "Restaurante", 6 | value: "$450.00", 7 | date: "11 JUN", 8 | from: "Pizza Hut", 9 | }, 10 | { 11 | id: "4564654", 12 | type: "Utilidades", 13 | value: "$340.00", 14 | date: "9 JUN", 15 | from: "Cuenta de luz", 16 | }, 17 | { 18 | id: "65445", 19 | type: "Salud", 20 | value: "$150.00", 21 | date: "8 JUN", 22 | from: "Farmacias A.", 23 | }, 24 | { 25 | id: "656565", 26 | type: "Transporte", 27 | value: "$55.00", 28 | date: "8 JUN", 29 | from: "Uber", 30 | }, 31 | { 32 | id: "926544", 33 | type: "Otros", 34 | value: "$1,500.00", 35 | date: "5 JUN", 36 | from: "Amazon", 37 | }, 38 | ], 39 | }; 40 | -------------------------------------------------------------------------------- /src/Components/Account/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import privado from "../../assets/images/privado.svg"; 4 | import ojo from "../../assets/images/ojo.svg"; 5 | import dinero from "../../assets/images/dinero.svg"; 6 | 7 | const Account = () => { 8 | const [toggleState, untoggle] = useState(true); 9 | 10 | const toggleHandler = () => { 11 | untoggle((toggleState) => !toggleState); 12 | }; 13 | 14 | return ( 15 |

16 |

Cuenta

17 |

18 | Saldo disponible 19 | 20 | Icono de saldo

21 | 22 | {toggleState ? ( 23 |

24 | $ 8,621.50 25 |

26 | ) : null} 27 |

28 | 29 | 37 |

38 | ); 39 | }; 40 | 41 | export default Account; 42 | -------------------------------------------------------------------------------- /src/assets/images/ojo.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-final", 3 | "author": "HarlandLohora", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^14.0.0", 9 | "@testing-library/user-event": "^14.4.3", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-scripts": "^5.0.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | }, 35 | "devDependencies": { 36 | "@babel/core": "^7.22.0", 37 | "@babel/plugin-proposal-private-property-in-object": "^7.21.0", 38 | "@babel/preset-env": "^7.22.0", 39 | "@babel/preset-react": "^7.22.0", 40 | "babel-loader": "^9.1.2" 41 | }, 42 | "babel": { 43 | "presets": ["@babel/preset-env", "@babel/preset-react"], 44 | "plugins": ["@babel/plugin-proposal-private-property-in-object"] 45 | } 46 | 47 | } 48 | -------------------------------------------------------------------------------- /src/assets/images/themeOff.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/donation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/images/otros.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 52 | -------------------------------------------------------------------------------- /src/assets/images/privado.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Smart Bank 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/assets/estilos.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | font-family: "Montserrat", sans-serif; 6 | margin: 0; 7 | padding: 0; 8 | text-decoration: none; 9 | color: grey; 10 | } 11 | 12 | .btn-primario { 13 | text-align: center; 14 | border-radius: 3px; 15 | padding: 5px 20px; 16 | margin: 0 10px; 17 | font-weight: 600; 18 | border: 2px solid white; 19 | color: white; 20 | background: transparent; 21 | } 22 | 23 | .btn-secundario { 24 | text-align: center; 25 | border-radius: 3px; 26 | padding: 5px 20px; 27 | margin: 0 10px; 28 | font-weight: 600; 29 | border: 2px solid white; 30 | background: white; 31 | color: #41d3be; 32 | } 33 | 34 | .title { 35 | color: grey; 36 | padding: 25px 0; 37 | } 38 | 39 | .header { 40 | background-color: #41d3be; 41 | display: flex; 42 | justify-content: space-between; 43 | padding: 0 15vw; 44 | height: 10vh; 45 | align-items: center; 46 | } 47 | 48 | .container { 49 | background-color: #f1f1f1; 50 | min-height: 90vh; 51 | padding: 0px 15vw; 52 | } 53 | 54 | .content { 55 | display: flex; 56 | flex-direction: row; 57 | justify-content: space-between; 58 | } 59 | 60 | .imagen-logo { 61 | height: 50px; 62 | width: 50px; 63 | } 64 | 65 | .imagen-icono { 66 | height: 25px; 67 | width: 25px; 68 | } 69 | 70 | .btn { 71 | margin: 15px auto 0px auto; 72 | display: block; 73 | border-radius: 20px; 74 | background-color: #41d3be; 75 | border: none; 76 | color: white; 77 | font-weight: 600; 78 | font-size: 14px; 79 | padding: 8px 20px; 80 | cursor: pointer; 81 | } 82 | 83 | .box { 84 | display: flex; 85 | flex-direction: column; 86 | justify-content: space-between; 87 | background-color: white; 88 | border-radius: 5px; 89 | box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.04); 90 | padding: 20px; 91 | width: 48%; 92 | } 93 | 94 | .saldo { 95 | font-weight: 700; 96 | font-size: 32px; 97 | } 98 | 99 | .detalle { 100 | color: #41d3be; 101 | font-size: 24px; 102 | } 103 | 104 | @media (max-width: 800px) { 105 | .box { 106 | width: 95%; 107 | margin: 5px; 108 | } 109 | 110 | .content { 111 | flex-direction: column; 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /src/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/images/utilidades.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/images/transporte.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/salud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/themeOn.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/alimentacion.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/dinero.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | --------------------------------------------------------------------------------