├── .vscode
    └── settings.json
├── src
    ├── react-app-env.d.ts
    ├── services
    │   └── api.ts
    ├── App.tsx
    ├── index.tsx
    ├── setupTests.ts
    ├── routes.tsx
    ├── App.css
    ├── components
    │   └── Dropzone
    │   │   ├── styles.css
    │   │   └── index.tsx
    ├── pages
    │   ├── Home
    │   │   ├── index.tsx
    │   │   └── styles.css
    │   └── CreateLocation
    │   │   ├── styles.css
    │   │   └── index.tsx
    └── assets
    │   └── logo.svg
├── .gitignore
├── tsconfig.json
├── public
    └── index.html
├── package.json
└── README.md


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "git.ignoreLimitWarning": true
3 | }


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/services/api.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | const api = axios.create({
4 |     baseURL: 'http://localhost:3333'
5 | });
6 | 
7 | export default api;


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './App.css';
 3 | 
 4 | import Routes from './routes';
 5 | 
 6 | function App() {
 7 |   return (
 8 |     <>
 9 |       <Routes />
10 |     </>
11 |   );
12 | }
13 | 
14 | export default App;
15 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | );
11 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/routes.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Route, BrowserRouter } from 'react-router-dom';
 3 | 
 4 | import Home from './pages/Home';
 5 | import CreateLocation from './pages/CreateLocation';
 6 | 
 7 | const Routes = () => {
 8 |     return (
 9 |         <BrowserRouter>
10 |             <Route component={Home} path="/" exact />
11 |             <Route component={CreateLocation} path="/create-location" />
12 |         </BrowserRouter>
13 |     );
14 | }
15 | 
16 | export default Routes;


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --primary-color: #79ab7f;
 3 |   --title-color: #79ab7f;
 4 |   --text-color: #034AAD;
 5 | }
 6 | 
 7 | * {
 8 |   margin: 0;
 9 |   padding: 0;
10 |   box-sizing: border-box;
11 | }
12 | 
13 | body {
14 |   background: #fff5e7;
15 |   -webkit-font-smoothing: antialiased;
16 |   color: var(--text-color);
17 | }
18 | 
19 | body, input, button {
20 |   font-family: Roboto, Arial, Helvetica, sans-serif;
21 | }
22 | 
23 | h1, h2, h3, h4, h5, h6 {
24 |   color: var(--title-color);
25 |   font-family: Ubuntu;
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/Dropzone/styles.css:
--------------------------------------------------------------------------------
 1 | .dropzone {
 2 |   height: 300px;
 3 |   background: #e1faec;
 4 |   border-radius: 10px;
 5 | 
 6 |   display: flex;
 7 |   justify-content: center;
 8 |   align-items: center;
 9 |   margin-top: 48px;
10 |   outline: 0;
11 | }
12 | 
13 | .dropzone img {
14 |   width: 100%;
15 |   height: 100%;
16 |   object-fit: cover;
17 | }
18 | 
19 | .dropzone p {
20 |   width: calc(100% - 60px);
21 |   height: calc(100% - 60px);
22 |   border-radius: 10px;
23 |   border: 1px dashed #79ab7f;
24 | 
25 |   display: flex;
26 |   flex-direction: column;
27 |   justify-content: center;
28 |   align-items: center;
29 |   color: #333;
30 | }
31 | 
32 | .dropzone p svg {
33 |   color: #79ab7f;
34 |   width: 24px;
35 |   height: 24px;
36 |   margin-bottom: 8px;
37 | }
38 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <link rel="preconnect" href="https://fonts.gstatic.com">
 7 |     <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
 8 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
 9 |    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
10 |    crossorigin=""/>
11 |     <title>Coleta Seletiva</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/pages/Home/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { FiLogIn } from 'react-icons/fi';
 3 | import { Link } from 'react-router-dom';
 4 | 
 5 | import './styles.css';
 6 | import logo from '../../assets/logo.svg';
 7 | 
 8 | const Home: React.FC = () => {
 9 |     return (
10 |         <div id="page-home">
11 |             <div className="content">
12 |                 <header>
13 |                     <img src={logo} alt="Reciclagem"/>
14 |                 </header>
15 | 
16 |                 <main>
17 |                     <h1>Coleta Seletiva e reciclagem em geral.</h1>
18 |                     <p>Reciclagem de materiais diversos, tais como, papel, plástico, metal, pilhas e baterias, etc.</p>
19 | 
20 |                     <Link to="/create-location">
21 |                         <span>
22 |                         <FiLogIn />
23 |                         </span>
24 |                         <strong>Cadastrar novo local de coleta</strong>
25 |                     </Link>
26 |                 </main>
27 |             </div>
28 |         </div>
29 |     );
30 | }
31 | 
32 | export default Home;


--------------------------------------------------------------------------------
/src/components/Dropzone/index.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useCallback, useState} from 'react';
 2 | import { FiUpload } from 'react-icons/fi';
 3 | import {useDropzone} from 'react-dropzone';
 4 | import './styles.css';
 5 | 
 6 | interface Props {
 7 |     onFileUploaded: (file: File) => void;
 8 | }
 9 | 
10 | const Dropzone: React.FC<Props> = ({ onFileUploaded }) => {
11 |   const [selectedFileUrl, setSelectedFileUrl] = useState('');
12 | 
13 |   const onDrop = useCallback(acceptedFiles => {
14 |     const file = acceptedFiles[0];
15 |       
16 |     const fileUrl = URL.createObjectURL(file);
17 | 
18 |     setSelectedFileUrl(fileUrl);
19 | 
20 |     onFileUploaded(file);
21 |   }, [onFileUploaded]);
22 | 
23 |   const {getRootProps, getInputProps} = useDropzone({
24 |     onDrop,
25 |     accept: 'image/*'
26 |   })
27 | 
28 |   return (
29 |     <div className="dropzone" {...getRootProps()} onChange={() => {}}>
30 |       <input {...getInputProps()} accept="image/*" />
31 |       { selectedFileUrl
32 |         ? <img src={selectedFileUrl} alt="Imagem do Estabelecimento" />
33 |         : (
34 |           <p>
35 |             <FiUpload />
36 |             Imagem do Estabelecimento
37 |           </p>
38 |         )
39 |       }
40 |     </div>
41 |   )
42 | }
43 | 
44 | export default Dropzone;
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mini-curso-reactjs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.4",
 7 |     "@testing-library/react": "^11.1.0",
 8 |     "@testing-library/user-event": "^12.1.10",
 9 |     "@types/jest": "^26.0.15",
10 |     "@types/node": "^12.0.0",
11 |     "@types/react-dom": "^16.9.8",
12 |     "axios": "^0.21.0",
13 |     "leaflet": "^1.7.1",
14 |     "react": "^17.0.1",
15 |     "react-dom": "^17.0.1",
16 |     "react-dropzone": "^11.0.1",
17 |     "react-icons": "^3.11.0",
18 |     "react-leaflet": "^2.8.0",
19 |     "react-router-dom": "^5.2.0",
20 |     "react-scripts": "4.0.0",
21 |     "typescript": "^4.0.3",
22 |     "web-vitals": "^0.2.4"
23 |   },
24 |   "scripts": {
25 |     "start": "react-scripts start",
26 |     "build": "react-scripts build",
27 |     "test": "react-scripts test",
28 |     "eject": "react-scripts eject"
29 |   },
30 |   "eslintConfig": {
31 |     "extends": [
32 |       "react-app",
33 |       "react-app/jest"
34 |     ]
35 |   },
36 |   "browserslist": {
37 |     "production": [
38 |       ">0.2%",
39 |       "not dead",
40 |       "not op_mini all"
41 |     ],
42 |     "development": [
43 |       "last 1 chrome version",
44 |       "last 1 firefox version",
45 |       "last 1 safari version"
46 |     ]
47 |   },
48 |   "devDependencies": {
49 |     "@types/react": "^16.9.56",
50 |     "@types/react-leaflet": "^2.5.2",
51 |     "@types/react-router-dom": "^5.1.6"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/pages/Home/styles.css:
--------------------------------------------------------------------------------
  1 | #page-home {
  2 |     height: 100vh;
  3 |   
  4 |     background: url('../../assets/background.svg') no-repeat;
  5 |   }
  6 |   
  7 |   #page-home .content {
  8 |     width: 100%;
  9 |     height: 100%;
 10 |     max-width: 1100px;
 11 |     margin: 0 auto;
 12 |     padding: 0 30px;
 13 |   
 14 |     display: flex;
 15 |     flex-direction: column;
 16 |     align-items: flex-start;
 17 |   }
 18 |   
 19 |   #page-home .content header {
 20 |     margin: 48px 0 0;
 21 |   }
 22 |   
 23 |   #page-home .content main {
 24 |     flex: 1;
 25 |     max-width: 660px;
 26 |   
 27 |     display: flex;
 28 |     flex-direction: column;
 29 |     justify-content: center;
 30 |   }
 31 |   
 32 |   #page-home .content main h1 {
 33 |     font-size: 64px;
 34 |     color: #333;
 35 |   }
 36 |   
 37 |   #page-home .content main p {
 38 |     font-size: 24px;
 39 |     margin-top: 24px;
 40 |     line-height: 38px;
 41 |   }
 42 |   
 43 |   #page-home .content main a {
 44 |     width: 100%;
 45 |     max-width: 360px;
 46 |     height: 72px;
 47 |     background: #79ab7f;
 48 |     border-radius: 8px;
 49 |     text-decoration: none;
 50 |   
 51 |     display: flex;
 52 |     align-items: center;
 53 |     overflow: hidden;
 54 |   
 55 |     margin-top: 40px;
 56 |   }
 57 |   
 58 |   #page-home .content main a span {
 59 |     display: block;
 60 |     background: rgba(0, 0, 0, 0.08);
 61 |     width: 72px;
 62 |     height: 72px;
 63 |   
 64 |     display: flex;
 65 |     align-items: center;
 66 |     justify-content: center;
 67 |     transition: background-color 0.2s;
 68 |   }
 69 |   
 70 |   #page-home .content main a span svg {
 71 |     color: #FFF;
 72 |     width: 20px;
 73 |     height: 20px;
 74 |   }
 75 |   
 76 |   #page-home .content main a strong {
 77 |     flex: 1;
 78 |     text-align: center;
 79 |     color: #FFF;
 80 |   }
 81 |   
 82 |   #page-home .content main a:hover {
 83 |     background: #79ab7f;
 84 |   }
 85 |   
 86 |   @media(max-width: 900px) {
 87 |     #page-home .content {
 88 |       align-items: center;
 89 |       text-align: center;
 90 |     }
 91 |   
 92 |     #page-home .content header {
 93 |       margin: 48px auto 0;
 94 |     }
 95 |   
 96 |     #page-home .content main {
 97 |       align-items: center;
 98 |     }
 99 |   
100 |     #page-home .content main h1 {
101 |       font-size: 42px;
102 |     }
103 |   
104 |     #page-home .content main p {
105 |       font-size: 24px;
106 |     }
107 |   }
108 |   


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://aluiziodeveloper.com.br/">
 3 |     <img alt="Aluizio Developer" src="https://aluiziodeveloper.com.br/assets/img/icon.png" width="200" />
 4 |   </a>
 5 | </p>
 6 | <h2 align="center">
 7 | Informação sobre tecnologia, dicas, tutoriais, mini-cursos e muito mais.
 8 | </h2>
 9 | 
10 | ## Mini Curso Gratuito - Criação de SPA com ReactJS e Typescript
11 | 
12 | Seja bem-vindo a este mini curso onde iremos conhecer o ReactJS e entender o processo de criação de SPA's - Single Page Application.
13 | 
14 | Mini curso disponível no YouTube. Segue abaixo o link da playlist.
15 | 
16 | [Playlist no YouTube deste Mini Curso de ReactJS e Typescript](https://www.youtube.com/watch?v=KhuHgLdwIsg&list=PLE0DHiXlN_qpm0nMlvcVxG_O580IXmeRU)
17 | 
18 | ## Objetivo
19 | 
20 | O objetivo do mini curso é dar o ponta pé inicial nos conceitos e recursos do ReactJS, focado no aprendizado daqueles que ainda não conhecem essa biblioteca ou framework, iniciantes em desenvolvimento de aplicações web com foco no front-end.
21 | 
22 | A idéia é implementar uma aplicação front-end com ReactJS e Typescript para consumir a API que foi desenvolvida durante o mini curso gratuito de API Node.js com Typescript, também disponível no meu canal do Youtube.
23 | 
24 | Mesmo que o seu foco seja somente front-end, recomendo que acompanhe também o mini curso de back-end, pois vários conceitos que estão naquele curso não serão repetidos aqui, como por exemplo, Node.js e NPM, API Restful, Requisições HTTP, Typescript, além de outros.
25 | 
26 | Playlist Mini Curso API Restful com Node.js e Typescript: https://www.youtube.com/watch?v=M-pNDHC25Vg&list=PLE0DHiXlN_qp251xWxdb_stPj98y1auhc
27 | 
28 | Repositório no Github da API: https://github.com/aluiziodeveloper/mini-curso-gratuito-node-typescript
29 | 
30 | ## Rodando a aplicação no seu PC
31 | 
32 | Faça um clone deste repositório e instale no seu ambiente de desenvolvimento usando o seguinte comando no seu terminal (escolha um diretório apropriado):
33 | 
34 | ```
35 | git clone https://github.com/aluiziodeveloper/mini-curso-reactjs.git
36 | ```
37 | 
38 | Após clonar o conteúdo do repositório, acesse o diretório criado e efetue a instalação das dependências:
39 | 
40 | ```
41 | cd mini-curso-reactjs
42 | 
43 | npm install
44 | ```
45 | 
46 | Após essa instalação execute a aplicação com o comando `npm start`. Acesse a url `http://localhost:3000` no browser.
47 | 
48 | ## Redes Sociais
49 | 
50 | [Site Aluizio Developer](https://aluiziodeveloper.com.br)
51 | 
52 | [YouTube](https://www.youtube.com/jorgealuizio)
53 | 
54 | [Servidor no Discord](https://discord.gg/3J87BMz5fD)
55 | 
56 | [LinkedIn](https://www.linkedin.com/in/jorgealuizio/)
57 | 


--------------------------------------------------------------------------------
/src/pages/CreateLocation/styles.css:
--------------------------------------------------------------------------------
  1 | #page-create-location {
  2 |   width: 100%;
  3 |   max-width: 1100px;
  4 | 
  5 |   margin: 0 auto;
  6 | }
  7 | 
  8 | #page-create-location header {
  9 |   margin-top: 48px;
 10 | 
 11 |   display: flex;
 12 |   justify-content: space-between;
 13 |   align-items: center;
 14 | }
 15 | 
 16 | #page-create-location header a {
 17 |   color: var(--title-color);
 18 |   font-weight: bold;
 19 |   text-decoration: none;
 20 | 
 21 |   display: flex;
 22 |   align-items: center;
 23 | }
 24 | 
 25 | #page-create-location header a svg {
 26 |   margin-right: 16px;
 27 |   color: var(--primary-color);
 28 | }
 29 | 
 30 | #page-create-location form {
 31 |   margin: 80px auto;
 32 |   padding: 64px;
 33 |   max-width: 730px;
 34 |   background: #FFF;
 35 |   border-radius: 8px;
 36 | 
 37 |   display: flex;
 38 |   flex-direction: column;
 39 | }
 40 | 
 41 | #page-create-location form h1 {
 42 |   font-size: 36px;
 43 | }
 44 | 
 45 | #page-create-location form fieldset {
 46 |   margin-top: 64px;
 47 |   min-inline-size: auto;
 48 |   border: 0;
 49 | }
 50 | 
 51 | #page-create-location form legend {
 52 |   width: 100%;
 53 |   display: flex;
 54 |   justify-content: space-between;
 55 |   align-items: center;
 56 |   margin-bottom: 40px;
 57 | }
 58 | 
 59 | #page-create-location form legend h2 {
 60 |   font-size: 24px;
 61 | }
 62 | 
 63 | #page-create-location form legend span {
 64 |   font-size: 14px;
 65 |   font-weight: normal;
 66 |   color: #034AAD;
 67 | }
 68 | 
 69 | #page-create-location form .field-group {
 70 |   flex: 1;
 71 |   display: flex;
 72 | }
 73 | 
 74 | #page-create-location form .field {
 75 |   flex: 1;
 76 | 
 77 |   display: flex;
 78 |   flex-direction: column;
 79 |   margin-bottom: 24px;
 80 | }
 81 | 
 82 | #page-create-location form .field input[type=text],
 83 | #page-create-location form .field input[type=email],
 84 | #page-create-location form .field input[type=number] {
 85 |   flex: 1;
 86 |   background: #fff5e7;
 87 |   border-radius: 8px;
 88 |   border: 0;
 89 |   padding: 16px 24px;
 90 |   font-size: 16px;
 91 |   color: #333;
 92 | }
 93 | 
 94 | #page-create-location form .field select {
 95 |   -webkit-appearance: none;
 96 |   -moz-appearance: none;
 97 |   appearance: none;
 98 |   flex: 1;
 99 |   background: #fff5e7;
100 |   border-radius: 8px;
101 |   border: 0;
102 |   padding: 16px 24px;
103 |   font-size: 16px;
104 |   color: #333;
105 | }
106 | 
107 | #page-create-location form .field input::placeholder {
108 |   color: #A0A0B2;
109 | }
110 | 
111 | #page-create-location form .field label {
112 |   font-size: 14px;
113 |   margin-bottom: 8px;
114 | }
115 | 
116 | #page-create-location form .field :disabled {
117 |   cursor: not-allowed;
118 | }
119 | 
120 | #page-create-location form .field-group .field + .field {
121 |   margin-left: 24px;
122 | }
123 | 
124 | #page-create-location form .field-group input + input {
125 |   margin-left: 24px;
126 | }
127 | 
128 | #page-create-location form .field-check {
129 |   flex-direction: row;
130 |   align-items: center;
131 | }
132 | 
133 | #page-create-location form .field-check input[type=checkbox] {
134 |   background: #fff5e7;
135 | }
136 | 
137 | #page-create-location form .field-check label {
138 |   margin: 0 0 0 8px;
139 | }
140 | 
141 | #page-create-location form .leaflet-container {
142 |   width: 100%;
143 |   height: 350px;
144 |   border-radius: 8px;
145 |   margin-bottom: 24px;
146 | }
147 | 
148 | #page-create-location form button {
149 |   width: 260px;
150 |   height: 56px;
151 |   background: var(--primary-color);
152 |   border-radius: 8px;
153 |   color: #FFF;
154 |   font-weight: bold;
155 |   font-size: 16px;
156 |   border: 0;
157 |   align-self: flex-end;
158 |   margin-top: 40px;
159 |   transition: background-color 0.2s;
160 |   cursor: locationer;
161 | }
162 | 
163 | #page-create-location form button:hover {
164 |   background: #79ab7f;
165 | }
166 | 
167 | .items-grid {
168 |   display: grid;
169 |   grid-template-columns: repeat(3, 1fr);
170 |   gap: 16px;
171 |   list-style: none;
172 | }
173 | 
174 | .items-grid li {
175 |   background: #fff5e7;
176 |   border: 2px solid #fff5e7;
177 |   height: 180px;
178 |   border-radius: 8px;
179 |   padding: 32px 24px 16px;
180 | 
181 |   display: flex;
182 |   flex-direction: column;
183 |   justify-content: space-between;
184 |   align-items: center;
185 | 
186 |   text-align: center;
187 | 
188 |   cursor: locationer;
189 | }
190 | 
191 | .items-grid li span {
192 |   flex: 1;
193 |   margin-top: 12px;
194 | 
195 |   display: flex;
196 |   align-items: center;
197 |   color: var(--title-color)
198 | }
199 | 
200 | .items-grid li.selected {
201 |   background: #F6DF8C;
202 |   border: 2px solid #79ab7f;
203 | }
204 | 


--------------------------------------------------------------------------------
/src/pages/CreateLocation/index.tsx:
--------------------------------------------------------------------------------
  1 | import React, { ChangeEvent, FormEvent, useCallback, useEffect, useState } from 'react';
  2 | import { Link, useHistory } from 'react-router-dom';
  3 | import {FiArrowLeft} from 'react-icons/fi';
  4 | import { Map, TileLayer, Marker} from 'react-leaflet';
  5 | import { LeafletMouseEvent } from 'leaflet';
  6 | import api from '../../services/api';
  7 | import Dropzone from '../../components/Dropzone';
  8 | import logo from '../../assets/logo.svg';
  9 | import './styles.css';
 10 | 
 11 | interface Item {
 12 |     id: number;
 13 |     title: string;
 14 |     image_url: string;
 15 | }
 16 | 
 17 | const CreateLocation: React.FC = () => {
 18 |     const [items, setItems] = useState<Item[]>([]);
 19 | 
 20 |     const [selectedMapPosition, setSelectedMapPosition] = useState<[number, number]>([0, 0]);
 21 | 
 22 |     const [formData, setFormData] = useState({
 23 |         name: '',
 24 |         email: '',
 25 |         whatsapp: '',
 26 |         city: '',
 27 |         uf: '',
 28 |     });
 29 | 
 30 |     const [selectedItems, setSelectedItems] = useState<number[]>([]);
 31 | 
 32 |     const [selectedFile, setSelectedFile] = useState<File>();
 33 | 
 34 |     const history = useHistory();
 35 | 
 36 |     useEffect(() => {
 37 |         api.get('items').then(response => {
 38 |             setItems(response.data);
 39 |         });
 40 |     }, []);
 41 | 
 42 |     const handleMapClick = useCallback((event: LeafletMouseEvent): void => {
 43 |         //console.log(event);
 44 |         setSelectedMapPosition([
 45 |             event.latlng.lat,
 46 |             event.latlng.lng,
 47 |         ]);
 48 |     }, []);
 49 | 
 50 |     const handleInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
 51 |         //console.log(event.target.name, event.target.value);
 52 |         const { name, value } = event.target;
 53 |         setFormData({...formData, [name]: value });
 54 |     }, [formData]);
 55 | 
 56 |     const handleSelectItem = useCallback((id: number) => {
 57 |         //setSelectedItems([...selectedItems, id]);
 58 |         const alreadySelected = selectedItems.findIndex(item => item === id);
 59 | 
 60 |         if (alreadySelected >= 0) {
 61 |             const filteredItems = selectedItems.filter(item => item !== id);
 62 |             setSelectedItems(filteredItems);
 63 |         } else {
 64 |             setSelectedItems([...selectedItems, id]);
 65 |         }
 66 |     }, [selectedItems]);
 67 | 
 68 |     const handleSubmit = useCallback(async (event: FormEvent) => {
 69 |         event.preventDefault();
 70 | 
 71 |         const {city, email, name, uf, whatsapp} = formData;
 72 |         const [latitude, longitude] = selectedMapPosition;
 73 |         const items = selectedItems;
 74 | 
 75 |         const data = new FormData();
 76 | 
 77 |         data.append('name', name);
 78 |         data.append('email', email);
 79 |         data.append('whatsapp', whatsapp);
 80 |         data.append('uf', uf);
 81 |         data.append('city', city);
 82 |         data.append('latitude', String(latitude));
 83 |         data.append('longitude', String(longitude));
 84 |         data.append('items', items.join(','));
 85 |         if (selectedFile) {
 86 |             data.append('image', selectedFile);
 87 |         }
 88 | 
 89 |         await api.post('locations', data);
 90 | 
 91 |         alert('Estabelecimento cadastrado com sucesso!');
 92 | 
 93 |         history.push('/');
 94 |     }, [formData, selectedItems, selectedMapPosition, history, selectedFile]);
 95 | 
 96 |     return (
 97 |         <div id="page-create-location">
 98 |             <div className="content">
 99 |                 <header>
100 |                     <img src={logo} alt="Coleta Seletiva"/>
101 |                     <Link to="/">
102 |                         <FiArrowLeft />
103 |                         Voltar para home
104 |                     </Link>
105 |                 </header>
106 | 
107 |                 <form onSubmit={handleSubmit}>
108 |                     <h1>Cadastro do <br /> local de coleta</h1>
109 | 
110 |                     <fieldset>
111 |                         <legend>
112 |                             <h2>Dados</h2>
113 |                         </legend>
114 | 
115 |                         <Dropzone onFileUploaded={setSelectedFile} />
116 | 
117 |                         <div className="field">
118 |                             <label htmlFor="name">Nome da entidade</label>
119 |                             <input 
120 |                                 type="text"
121 |                                 name="name"
122 |                                 id="name"
123 |                                 onChange={handleInputChange}
124 |                             />
125 |                         </div>
126 |                         <div className="field-group">
127 |                             <div className="field">
128 |                                 <label htmlFor="email">E-mail</label>
129 |                                 <input 
130 |                                     type="email"
131 |                                     name="email"
132 |                                     id="email"
133 |                                     onChange={handleInputChange}
134 |                                 />
135 |                             </div>
136 |                             <div className="field">
137 |                                 <label htmlFor="whatsapp">Whatsapp</label>
138 |                                 <input 
139 |                                     type="text"
140 |                                     name="whatsapp"
141 |                                     id="whatsapp"
142 |                                     onChange={handleInputChange}
143 |                                 />
144 |                             </div>
145 |                         </div>
146 |                     </fieldset>
147 | 
148 |                     <fieldset>
149 |                         <legend>
150 |                         <h2>Endereço</h2>
151 |                             <span>Marque o endereço no mapa</span>
152 |                         </legend>
153 |                         <Map center={[-23.0003709, -43.365895]} zoom={14} onClick={handleMapClick}>
154 |                             <TileLayer
155 |                                 attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
156 |                                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
157 |                             />
158 |                             <Marker position={selectedMapPosition} />
159 |                         </Map>
160 |                         <div className="field-group">
161 |                             <div className="field">
162 |                                 <label htmlFor="city">Cidade</label>
163 |                                 <input 
164 |                                     type="text"
165 |                                     name="city"
166 |                                     id="city"
167 |                                     onChange={handleInputChange}
168 |                                 />
169 |                             </div>
170 |                             <div className="field">
171 |                                 <label htmlFor="uf">Estado</label>
172 |                                 <input 
173 |                                     type="text"
174 |                                     name="uf"
175 |                                     id="uf"
176 |                                     onChange={handleInputChange}
177 |                                 />
178 |                             </div>
179 |                         </div>
180 |                     </fieldset>
181 | 
182 |                     <fieldset>
183 |                         <legend>
184 |                             <h2>Ítens coletados</h2>
185 |                             <span>Você pode marcar um ou mais ítens</span>
186 |                         </legend>
187 |                         <ul className="items-grid">
188 |                             {items.map(item => (
189 |                                 <li
190 |                                     key={item.id}
191 |                                     onClick={() => handleSelectItem(item.id)}
192 |                                     className={selectedItems.includes(item.id) ? 'selected' : ''}
193 |                                 >
194 |                                     <img src={item.image_url} alt={item.title} />
195 |                                 </li>
196 |                             ))}
197 |                         </ul>
198 |                     </fieldset>
199 | 
200 |                     <button type="submit">
201 |                         Cadastrar local de coleta
202 |                     </button>
203 |                 </form>
204 |             </div>
205 |         </div>
206 |     );
207 | }
208 | 
209 | export default CreateLocation;


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="224.87999pt" height="89.999999pt" viewBox="0 0 224.87999 89.999999" version="1.2">
 3 | <defs>
 4 | <g>
 5 | <symbol overflow="visible" id="glyph0-0">
 6 | <path style="stroke:none;" d=""/>
 7 | </symbol>
 8 | <symbol overflow="visible" id="glyph0-1">
 9 | <path style="stroke:none;" d="M 13.203125 -14.640625 C 13.203125 -15.234375 12.992188 -15.53125 12.578125 -15.53125 C 12.421875 -15.53125 12.234375 -15.488281 12.015625 -15.40625 C 11.804688 -15.332031 11.601562 -15.265625 11.40625 -15.203125 C 10.6875 -14.804688 10.125 -14.378906 9.71875 -13.921875 C 9.3125 -13.460938 8.898438 -12.945312 8.484375 -12.375 C 8.078125 -11.8125 7.726562 -11.207031 7.4375 -10.5625 C 7.144531 -9.914062 6.921875 -9.304688 6.765625 -8.734375 C 6.191406 -6.640625 6.40625 -5.226562 7.40625 -4.5 C 7.820312 -4.207031 8.257812 -4.066406 8.71875 -4.078125 C 9.175781 -4.085938 9.546875 -4.175781 9.828125 -4.34375 C 10.117188 -4.519531 10.398438 -4.6875 10.671875 -4.84375 C 10.953125 -5.007812 11.269531 -5.125 11.625 -5.1875 C 11.988281 -5.257812 12.441406 -5.210938 12.984375 -5.046875 C 13.523438 -4.878906 13.8125 -4.65625 13.84375 -4.375 C 13.882812 -4.101562 13.882812 -3.820312 13.84375 -3.53125 C 13.8125 -3.238281 13.804688 -2.972656 13.828125 -2.734375 C 13.859375 -2.492188 14.070312 -2.347656 14.46875 -2.296875 C 14.84375 -1.828125 14.609375 -1.257812 13.765625 -0.59375 C 13.546875 -0.414062 13.335938 -0.25 13.140625 -0.09375 C 11.453125 0.988281 9.660156 1.585938 7.765625 1.703125 C 6.566406 1.785156 5.289062 1.570312 3.9375 1.0625 C 1.914062 0.289062 0.78125 -1.425781 0.53125 -4.09375 C 0.195312 -6.5625 0.507812 -9.117188 1.46875 -11.765625 C 2.269531 -13.992188 3.484375 -16.0625 5.109375 -17.96875 C 6.585938 -19.707031 8.039062 -20.84375 9.46875 -21.375 C 11.175781 -22.257812 13.019531 -22.601562 15 -22.40625 C 17.09375 -22.132812 18.460938 -21.242188 19.109375 -19.734375 C 19.753906 -18.222656 19.648438 -16.410156 18.796875 -14.296875 C 18.492188 -13.546875 17.929688 -12.957031 17.109375 -12.53125 C 16.410156 -12.132812 15.644531 -11.9375 14.8125 -11.9375 C 13.988281 -11.9375 13.457031 -12.195312 13.21875 -12.71875 C 12.988281 -13.238281 12.984375 -13.878906 13.203125 -14.640625 Z M 13.203125 -14.640625 "/>
10 | </symbol>
11 | <symbol overflow="visible" id="glyph0-2">
12 | <path style="stroke:none;" d="M 5.96875 -19.46875 C 7.207031 -20.875 8.582031 -21.753906 10.09375 -22.109375 C 11.125 -22.367188 12.101562 -22.332031 13.03125 -22 C 13.75 -22.757812 14.6875 -23.03125 15.84375 -22.8125 C 16.90625 -22.625 17.8125 -22.03125 18.5625 -21.03125 C 18.59375 -20.882812 18.671875 -20.675781 18.796875 -20.40625 C 18.929688 -20.132812 19.054688 -19.832031 19.171875 -19.5 C 20.035156 -17.5 20.101562 -14.867188 19.375 -11.609375 C 18.476562 -7.578125 16.878906 -4.160156 14.578125 -1.359375 C 13.878906 -0.492188 13.085938 0.222656 12.203125 0.796875 C 10.796875 1.867188 9.109375 2.347656 7.140625 2.234375 C 5.929688 2.171875 4.914062 1.867188 4.09375 1.328125 C 0.8125 -0.304688 -0.257812 -3.695312 0.875 -8.84375 C 1.820312 -13.082031 3.519531 -16.625 5.96875 -19.46875 Z M 6.328125 -3.859375 L 6.296875 -3.671875 L 6.359375 -3.359375 C 6.472656 -2.742188 6.664062 -2.273438 6.9375 -1.953125 C 7.21875 -1.628906 7.441406 -1.429688 7.609375 -1.359375 C 7.804688 -1.515625 8.003906 -1.660156 8.203125 -1.796875 C 8.398438 -1.929688 8.578125 -2.097656 8.734375 -2.296875 C 10.066406 -3.941406 11.101562 -6.097656 11.84375 -8.765625 C 12.59375 -11.429688 12.867188 -13.898438 12.671875 -16.171875 C 11.910156 -15.191406 11.109375 -14.0625 10.265625 -12.78125 C 9.421875 -11.507812 8.753906 -10.425781 8.265625 -9.53125 C 7.148438 -7.425781 6.503906 -5.535156 6.328125 -3.859375 Z M 6.328125 -3.859375 "/>
13 | </symbol>
14 | <symbol overflow="visible" id="glyph0-3">
15 | <path style="stroke:none;" d="M 10.203125 1.40625 C 9.796875 1.53125 9.40625 1.597656 9.03125 1.609375 C 8.65625 1.617188 8.273438 1.628906 7.890625 1.640625 C 7.515625 1.660156 6.992188 1.671875 6.328125 1.671875 C 5.660156 1.671875 4.660156 1.65625 3.328125 1.625 C 3.015625 1.632812 2.695312 1.640625 2.375 1.640625 C 2.0625 1.640625 1.769531 1.582031 1.5 1.46875 C 0.894531 1.21875 0.484375 0.628906 0.265625 -0.296875 C 0.171875 -0.722656 0.0625 -1.023438 -0.0625 -1.203125 C -0.195312 -1.378906 -0.300781 -1.546875 -0.375 -1.703125 C -0.570312 -2.015625 -0.554688 -2.535156 -0.328125 -3.265625 C -0.109375 -3.992188 0.175781 -4.890625 0.53125 -5.953125 C 0.882812 -7.023438 1.285156 -8.15625 1.734375 -9.34375 C 2.796875 -12.1875 3.75 -14.441406 4.59375 -16.109375 C 4.925781 -16.859375 5.210938 -17.503906 5.453125 -18.046875 C 5.703125 -18.597656 5.921875 -19.070312 6.109375 -19.46875 C 6.304688 -19.875 6.40625 -20.085938 6.40625 -20.109375 C 6.601562 -20.859375 7.359375 -21.488281 8.671875 -22 C 9.953125 -22.53125 11.109375 -22.664062 12.140625 -22.40625 C 13.296875 -22.113281 13.804688 -21.347656 13.671875 -20.109375 C 13.398438 -18.898438 12.992188 -17.6875 12.453125 -16.46875 C 11.910156 -15.25 11.296875 -13.972656 10.609375 -12.640625 C 9.929688 -11.304688 9.1875 -9.894531 8.375 -8.40625 C 7.570312 -6.914062 6.78125 -5.300781 6 -3.5625 C 5.976562 -3.476562 6.019531 -3.410156 6.125 -3.359375 C 6.375 -3.367188 6.726562 -3.441406 7.1875 -3.578125 C 7.644531 -3.722656 8.125 -3.847656 8.625 -3.953125 C 9.125 -4.054688 9.617188 -4.109375 10.109375 -4.109375 C 10.609375 -4.109375 11.023438 -3.984375 11.359375 -3.734375 C 11.335938 -3.378906 11.421875 -3.097656 11.609375 -2.890625 C 11.804688 -2.691406 12.003906 -2.492188 12.203125 -2.296875 C 12.691406 -1.785156 12.734375 -1.109375 12.328125 -0.265625 C 11.929688 0.554688 11.222656 1.113281 10.203125 1.40625 Z M 10.203125 1.40625 "/>
16 | </symbol>
17 | <symbol overflow="visible" id="glyph0-4">
18 | <path style="stroke:none;" d="M 6.640625 -3.703125 C 7.773438 -3.585938 8.625 -3.53125 9.1875 -3.53125 C 9.75 -3.53125 10.597656 -3.609375 11.734375 -3.765625 C 12.085938 -3.648438 12.289062 -3.503906 12.34375 -3.328125 C 12.40625 -3.148438 12.425781 -2.96875 12.40625 -2.78125 C 12.382812 -2.59375 12.394531 -2.410156 12.4375 -2.234375 C 12.476562 -2.054688 12.664062 -1.910156 13 -1.796875 C 13.175781 -1.734375 13.226562 -1.5625 13.15625 -1.28125 C 13.09375 -1 12.929688 -0.691406 12.671875 -0.359375 C 12.023438 0.484375 11.257812 1.070312 10.375 1.40625 C 8.96875 1.757812 7.863281 1.96875 7.0625 2.03125 C 5.726562 2.125 4.273438 2.070312 2.703125 1.875 C 0.984375 1.5625 0.148438 0.847656 0.203125 -0.265625 C 0.203125 -4.378906 1.101562 -8.515625 2.90625 -12.671875 C 3.5 -14.023438 4.164062 -15.445312 4.90625 -16.9375 C 5.0625 -17.25 5.15625 -17.597656 5.1875 -17.984375 C 5.21875 -18.378906 5.242188 -18.765625 5.265625 -19.140625 C 5.285156 -19.515625 5.34375 -19.847656 5.4375 -20.140625 C 5.539062 -20.429688 5.75 -20.640625 6.0625 -20.765625 C 10.132812 -22.390625 13.359375 -23.015625 15.734375 -22.640625 C 16.554688 -22.617188 17.097656 -22.335938 17.359375 -21.796875 C 17.628906 -21.265625 17.660156 -20.664062 17.453125 -20 C 17.242188 -19.332031 16.835938 -18.703125 16.234375 -18.109375 C 15.640625 -17.523438 14.894531 -17.164062 14 -17.03125 C 12.84375 -16.695312 12.132812 -16.46875 11.875 -16.34375 C 11.382812 -16.113281 11.035156 -15.800781 10.828125 -15.40625 C 10.546875 -14.976562 10.285156 -14.566406 10.046875 -14.171875 C 9.816406 -13.773438 9.65625 -13.351562 9.5625 -12.90625 L 9.4375 -12.265625 C 9.8125 -12.085938 10.265625 -12.03125 10.796875 -12.09375 C 11.335938 -12.164062 11.835938 -12.234375 12.296875 -12.296875 C 12.765625 -12.367188 13.140625 -12.375 13.421875 -12.3125 C 13.703125 -12.257812 13.757812 -11.972656 13.59375 -11.453125 C 13.425781 -10.929688 13.125 -10.347656 12.6875 -9.703125 C 12.25 -9.054688 11.628906 -8.585938 10.828125 -8.296875 C 10.316406 -8.191406 9.96875 -8.113281 9.78125 -8.0625 C 9.59375 -8.019531 9.445312 -7.988281 9.34375 -7.96875 C 9.207031 -7.945312 8.816406 -7.914062 8.171875 -7.875 C 7.253906 -6.3125 6.695312 -5.097656 6.5 -4.234375 C 6.414062 -3.878906 6.460938 -3.703125 6.640625 -3.703125 Z M 6.640625 -3.703125 "/>
19 | </symbol>
20 | <symbol overflow="visible" id="glyph0-5">
21 | <path style="stroke:none;" d="M 10.25 -7.53125 C 9.707031 -6 9.160156 -4.523438 8.609375 -3.109375 C 8.066406 -1.703125 7.613281 -0.632812 7.25 0.09375 C 6.882812 0.832031 6.5625 1.335938 6.28125 1.609375 C 6.007812 1.890625 5.734375 2.078125 5.453125 2.171875 C 5.171875 2.273438 4.882812 2.316406 4.59375 2.296875 C 4.3125 2.273438 4.023438 2.253906 3.734375 2.234375 C 2.085938 1.984375 1.578125 0.796875 2.203125 -1.328125 C 2.617188 -3.015625 2.953125 -4.390625 3.203125 -5.453125 C 3.460938 -6.523438 3.675781 -7.40625 3.84375 -8.09375 C 4.007812 -8.789062 4.148438 -9.367188 4.265625 -9.828125 C 4.378906 -10.296875 4.503906 -10.753906 4.640625 -11.203125 C 4.785156 -11.648438 4.957031 -12.15625 5.15625 -12.71875 C 5.363281 -13.289062 5.632812 -14.050781 5.96875 -15 C 5.226562 -14.894531 4.5625 -14.972656 3.96875 -15.234375 C 3.101562 -15.609375 2.75 -16.410156 2.90625 -17.640625 C 2.988281 -18.210938 3.296875 -18.742188 3.828125 -19.234375 C 4.097656 -19.484375 4.421875 -19.757812 4.796875 -20.0625 C 5.554688 -20.664062 7.070312 -21.3125 9.34375 -22 C 11.695312 -22.695312 13.71875 -23.03125 15.40625 -23 C 15.851562 -23.070312 16.316406 -23.015625 16.796875 -22.828125 C 17.285156 -22.640625 17.675781 -22.390625 17.96875 -22.078125 C 18.257812 -21.765625 18.410156 -21.421875 18.421875 -21.046875 C 18.429688 -20.679688 18.191406 -20.351562 17.703125 -20.0625 C 17.460938 -19.894531 17.296875 -19.628906 17.203125 -19.265625 C 17.109375 -18.910156 17 -18.53125 16.875 -18.125 C 16.757812 -17.726562 16.585938 -17.363281 16.359375 -17.03125 C 16.140625 -16.695312 15.785156 -16.5 15.296875 -16.4375 C 15.035156 -16.300781 14.675781 -16.203125 14.21875 -16.140625 C 13.757812 -16.085938 13.453125 -16.046875 13.296875 -16.015625 C 13.148438 -15.984375 13.070312 -15.925781 13.0625 -15.84375 C 12.707031 -14.8125 12.285156 -13.550781 11.796875 -12.0625 C 11.304688 -10.582031 10.789062 -9.070312 10.25 -7.53125 Z M 6.265625 -15.328125 C 6.222656 -15.328125 6.203125 -15.320312 6.203125 -15.3125 C 6.203125 -15.300781 6.222656 -15.296875 6.265625 -15.296875 Z M 6.265625 -15.328125 "/>
22 | </symbol>
23 | <symbol overflow="visible" id="glyph0-6">
24 | <path style="stroke:none;" d="M 16.265625 -19.9375 C 16.929688 -19.582031 17.351562 -19.0625 17.53125 -18.375 C 17.132812 -16.175781 16.78125 -13.992188 16.46875 -11.828125 C 16.15625 -9.671875 15.847656 -7.859375 15.546875 -6.390625 C 15.253906 -4.929688 15.054688 -3.835938 14.953125 -3.109375 C 14.847656 -2.390625 14.722656 -1.664062 14.578125 -0.9375 L 14.40625 -0.328125 C 14.363281 -0.109375 14.320312 0.09375 14.28125 0.28125 C 14.25 0.46875 14.210938 0.664062 14.171875 0.875 C 13.617188 1.507812 12.875 1.828125 11.9375 1.828125 C 10.9375 1.828125 10.144531 1.570312 9.5625 1.0625 C 9.207031 0.78125 9.144531 0.203125 9.375 -0.671875 C 9.476562 -1.023438 9.539062 -1.476562 9.5625 -2.03125 C 9.59375 -2.59375 9.628906 -3.0625 9.671875 -3.4375 L 9.671875 -3.5 C 9.085938 -3.28125 8.554688 -3 8.078125 -2.65625 C 7.609375 -2.3125 7.316406 -2.09375 7.203125 -2 C 7.085938 -1.914062 6.929688 -1.847656 6.734375 -1.796875 C 6.535156 -1.753906 6.359375 -1.722656 6.203125 -1.703125 C 5.828125 -1.679688 5.570312 -1.625 5.4375 -1.53125 C 4.300781 0.507812 3.28125 1.644531 2.375 1.875 C 1.8125 2.050781 1.242188 2.09375 0.671875 2 C 0.109375 1.914062 -0.335938 1.582031 -0.671875 1 C -1.304688 0.414062 -1.148438 -1.191406 -0.203125 -3.828125 C 0.304688 -5.210938 1.035156 -6.878906 1.984375 -8.828125 C 2.929688 -10.785156 3.847656 -12.488281 4.734375 -13.9375 C 6.640625 -17.050781 8.726562 -19.675781 11 -21.8125 C 11.375 -21.976562 11.773438 -22.160156 12.203125 -22.359375 C 12.628906 -22.566406 13.050781 -22.679688 13.46875 -22.703125 C 13.894531 -22.722656 14.332031 -22.671875 14.78125 -22.546875 C 15.238281 -22.429688 15.625 -22.257812 15.9375 -22.03125 C 16.664062 -21.476562 16.773438 -20.78125 16.265625 -19.9375 Z M 9.96875 -12.203125 C 9.550781 -11.023438 9.132812 -9.941406 8.71875 -8.953125 C 8.3125 -7.960938 7.960938 -7.097656 7.671875 -6.359375 L 10 -6.4375 C 10.15625 -7.695312 10.332031 -8.941406 10.53125 -10.171875 C 10.726562 -11.410156 10.914062 -12.644531 11.09375 -13.875 Z M 9.171875 -6.328125 C 9.453125 -6.328125 9.726562 -6.34375 10 -6.375 L 10 -6.40625 C 9.738281 -6.382812 9.5 -6.363281 9.28125 -6.34375 C 9.070312 -6.332031 9.035156 -6.328125 9.171875 -6.328125 Z M 9.171875 -6.328125 "/>
25 | </symbol>
26 | <symbol overflow="visible" id="glyph0-7">
27 | <path style="stroke:none;" d="M 4.875 1.703125 C 3.875 1.742188 2.957031 1.617188 2.125 1.328125 C 1.289062 1.046875 0.613281 0.660156 0.09375 0.171875 C -0.414062 -0.316406 -0.738281 -0.890625 -0.875 -1.546875 C -1.019531 -2.203125 -0.90625 -2.875 -0.53125 -3.5625 C -0.0195312 -4.382812 1 -4.628906 2.53125 -4.296875 C 3.6875 -4.054688 4.484375 -3.925781 4.921875 -3.90625 C 5.367188 -3.882812 5.75 -3.945312 6.0625 -4.09375 C 7.488281 -4.5625 8.289062 -5.066406 8.46875 -5.609375 C 8.582031 -6.023438 8.328125 -6.507812 7.703125 -7.0625 C 7.453125 -7.289062 7.164062 -7.519531 6.84375 -7.75 C 6.53125 -7.988281 6.269531 -8.226562 6.0625 -8.46875 C 5.082031 -9.195312 4.3125 -10.035156 3.75 -10.984375 C 3.1875 -11.929688 2.953125 -12.960938 3.046875 -14.078125 C 3.148438 -15.203125 3.335938 -16.128906 3.609375 -16.859375 C 3.890625 -17.597656 4.234375 -18.25 4.640625 -18.8125 C 5.367188 -19.8125 6.3125 -20.628906 7.46875 -21.265625 C 8.800781 -21.953125 9.867188 -22.390625 10.671875 -22.578125 C 12.265625 -22.929688 13.875 -22.960938 15.5 -22.671875 C 16.050781 -22.578125 16.519531 -22.390625 16.90625 -22.109375 C 17.300781 -21.835938 17.691406 -21.554688 18.078125 -21.265625 C 18.765625 -20.578125 18.929688 -19.878906 18.578125 -19.171875 C 18.441406 -18.859375 18.226562 -18.601562 17.9375 -18.40625 C 17.644531 -18.207031 17.332031 -18.097656 17 -18.078125 C 17.039062 -17.554688 16.941406 -17.164062 16.703125 -16.90625 C 16.253906 -16.457031 15.46875 -16.164062 14.34375 -16.03125 C 12.738281 -16.144531 11.65625 -16.054688 11.09375 -15.765625 C 10.425781 -15.410156 10.175781 -14.644531 10.34375 -13.46875 C 10.382812 -13.207031 10.546875 -12.941406 10.828125 -12.671875 C 11.117188 -12.398438 11.453125 -12.109375 11.828125 -11.796875 C 12.210938 -11.484375 12.613281 -11.128906 13.03125 -10.734375 C 13.457031 -10.335938 13.828125 -9.882812 14.140625 -9.375 C 15.242188 -7.570312 15.15625 -5.46875 13.875 -3.0625 C 12.9375 -1.257812 11.332031 0.09375 9.0625 1 C 7.882812 1.46875 6.488281 1.703125 4.875 1.703125 Z M 4.875 1.703125 "/>
28 | </symbol>
29 | <symbol overflow="visible" id="glyph0-8">
30 | <path style="stroke:none;" d="M 12.4375 -19.875 C 11.75 -17.738281 11.113281 -15.804688 10.53125 -14.078125 C 9.957031 -12.359375 9.429688 -10.769531 8.953125 -9.3125 C 8.472656 -7.863281 8.023438 -6.523438 7.609375 -5.296875 C 7.203125 -4.078125 6.820312 -2.910156 6.46875 -1.796875 C 6.269531 -0.503906 5.632812 0.40625 4.5625 0.9375 C 3.9375 1.226562 3.191406 1.375 2.328125 1.375 C 1.460938 1.375 0.8125 1.28125 0.375 1.09375 C -0.0507812 0.914062 -0.328125 0.648438 -0.453125 0.296875 C -0.578125 -0.0546875 -0.578125 -0.484375 -0.453125 -0.984375 C -0.328125 -1.484375 -0.109375 -2.171875 0.203125 -3.046875 C 0.515625 -3.921875 0.910156 -5.101562 1.390625 -6.59375 C 1.878906 -8.082031 2.382812 -9.585938 2.90625 -11.109375 C 4.226562 -14.929688 5.269531 -17.582031 6.03125 -19.0625 C 6.320312 -19.601562 6.613281 -19.96875 6.90625 -20.15625 C 7.207031 -20.34375 7.492188 -20.476562 7.765625 -20.5625 C 8.035156 -20.65625 8.285156 -20.757812 8.515625 -20.875 C 8.753906 -21 8.96875 -21.296875 9.15625 -21.765625 C 9.34375 -22.234375 9.6875 -22.554688 10.1875 -22.734375 C 10.6875 -22.910156 11.15625 -22.921875 11.59375 -22.765625 C 12.039062 -22.617188 12.375 -22.304688 12.59375 -21.828125 C 12.820312 -21.347656 12.769531 -20.695312 12.4375 -19.875 Z M 12.4375 -19.875 "/>
31 | </symbol>
32 | <symbol overflow="visible" id="glyph0-9">
33 | <path style="stroke:none;" d="M 2.328125 -0.96875 L 2.125 -19.96875 C 2.125 -20.4375 2.3125 -20.84375 2.6875 -21.1875 C 3.070312 -21.53125 3.507812 -21.769531 4 -21.90625 C 4.488281 -22.039062 4.945312 -22.054688 5.375 -21.953125 C 5.8125 -21.859375 6.085938 -21.609375 6.203125 -21.203125 C 6.578125 -20.453125 6.832031 -19.421875 6.96875 -18.109375 C 7.226562 -15.660156 7.359375 -13.546875 7.359375 -11.765625 C 7.546875 -11.453125 7.789062 -11.304688 8.09375 -11.328125 C 8.925781 -13.378906 9.851562 -15.351562 10.875 -17.25 C 11.894531 -19.15625 12.550781 -20.378906 12.84375 -20.921875 C 13.144531 -21.460938 13.5 -21.835938 13.90625 -22.046875 C 14.320312 -22.265625 14.765625 -22.40625 15.234375 -22.46875 C 16.253906 -22.582031 17.210938 -22.40625 18.109375 -21.9375 C 18.796875 -21.695312 19.195312 -21.296875 19.3125 -20.734375 C 19.769531 -19.828125 19.46875 -18.785156 18.40625 -17.609375 C 17.175781 -15.648438 15.929688 -13.484375 14.671875 -11.109375 C 12.285156 -6.546875 10.765625 -3.734375 10.109375 -2.671875 C 9.460938 -1.617188 8.992188 -0.867188 8.703125 -0.421875 C 8.410156 0.015625 8.078125 0.378906 7.703125 0.671875 C 7.035156 1.203125 6.234375 1.421875 5.296875 1.328125 C 3.648438 1.265625 2.6875 0.742188 2.40625 -0.234375 C 2.351562 -0.503906 2.328125 -0.75 2.328125 -0.96875 Z M 2.328125 -0.96875 "/>
34 | </symbol>
35 | </g>
36 | <clipPath id="clip1">
37 |   <path d="M 3.835938 35 L 44 35 L 44 80 L 3.835938 80 Z M 3.835938 35 "/>
38 | </clipPath>
39 | <clipPath id="clip2">
40 |   <path d="M 52 31 L 90 31 L 90 87.082031 L 52 87.082031 Z M 52 31 "/>
41 | </clipPath>
42 | </defs>
43 | <g id="surface1">
44 | <g style="fill:rgb(0%,29.019165%,67.83905%);fill-opacity:1;">
45 |   <use xlink:href="#glyph0-1" x="98.690051" y="32.248686"/>
46 |   <use xlink:href="#glyph0-2" x="115.541008" y="32.248686"/>
47 |   <use xlink:href="#glyph0-3" x="134.332913" y="32.248686"/>
48 |   <use xlink:href="#glyph0-4" x="148.06659" y="32.248686"/>
49 |   <use xlink:href="#glyph0-5" x="163.47654" y="32.248686"/>
50 |   <use xlink:href="#glyph0-6" x="178.239508" y="32.248686"/>
51 | </g>
52 | <g style="fill:rgb(0%,50.19989%,21.569824%);fill-opacity:1;">
53 |   <use xlink:href="#glyph0-7" x="98.690051" y="73.890842"/>
54 |   <use xlink:href="#glyph0-4" x="114.923434" y="73.890842"/>
55 |   <use xlink:href="#glyph0-3" x="130.333384" y="73.890842"/>
56 |   <use xlink:href="#glyph0-4" x="144.067061" y="73.890842"/>
57 |   <use xlink:href="#glyph0-5" x="159.477011" y="73.890842"/>
58 |   <use xlink:href="#glyph0-8" x="174.239979" y="73.890842"/>
59 |   <use xlink:href="#glyph0-9" x="185.032826" y="73.890842"/>
60 |   <use xlink:href="#glyph0-6" x="200.178101" y="73.890842"/>
61 | </g>
62 | <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,29.019165%,67.83905%);fill-opacity:1;" d="M 44.660156 30.679688 L 67.472656 31.59375 L 77 8.570312 L 67.007812 14.4375 C 67.007812 14.4375 63.289062 9.203125 62.230469 7.820312 C 61.171875 6.433594 61.222656 4.210938 48.707031 4.042969 C 36.1875 3.871094 34.957031 4.84375 33.292969 7.074219 L 22.609375 22.800781 L 38.992188 33.535156 L 46.804688 18.082031 C 48.089844 16.019531 49.816406 16.117188 51.234375 19.019531 L 53.519531 23.730469 L 44.660156 30.679688 "/>
63 | <g clip-path="url(#clip1)" clip-rule="nonzero">
64 | <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,50.19989%,21.569824%);fill-opacity:1;" d="M 38.054688 56.046875 L 28.542969 35.136719 L 3.847656 36.996094 L 13.5625 43.316406 C 13.5625 43.316406 10.609375 49.023438 9.863281 50.601562 C 9.113281 52.179688 7.121094 53.140625 12.632812 64.460938 C 18.144531 75.78125 19.5625 76.449219 22.292969 76.933594 L 41.046875 79.414062 L 43.144531 59.84375 L 25.925781 59.816406 C 23.519531 59.59375 22.824219 58 24.753906 55.410156 L 27.894531 51.230469 L 38.054688 56.046875 "/>
65 | </g>
66 | <g clip-path="url(#clip2)" clip-rule="nonzero">
67 | <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,50.19989%,21.569824%);fill-opacity:1;" d="M 63.125 48.128906 L 52.382812 68.425781 L 68.824219 87.078125 L 67.921875 75.464844 C 67.921875 75.464844 74.21875 74.371094 75.917969 74.011719 C 77.617188 73.65625 79.585938 74.667969 85.179688 63.390625 C 90.777344 52.109375 90.445312 50.570312 89.175781 48.09375 L 79.761719 31.5625 L 63.039062 41.746094 L 73.453125 55.558594 C 74.738281 57.621094 73.898438 59.144531 70.6875 59.167969 L 65.484375 59.1875 L 63.125 48.128906 "/>
68 | </g>
69 | </g>
70 | </svg>
71 | 


--------------------------------------------------------------------------------