From 163da834ea39c9a86a45554913854a45d7a1ffcc Mon Sep 17 00:00:00 2001 From: Alisson Date: Sun, 13 Dec 2020 19:12:20 -0300 Subject: [PATCH 1/5] Initial testing --- src/pages/Home/index.tsx | 24 +++++++++++++++++++++++- src/pages/Home/styles.ts | 10 ++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index e01ce8d..ebce268 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import ReactGA from 'react-ga'; -import { FiSearch } from 'react-icons/fi'; +import { FiSearch, FiCamera } from 'react-icons/fi'; import api from '../../services/api'; import CarInfo from '../../components/CarInfo'; @@ -26,6 +26,7 @@ const Home: React.FC = () => { const [carPlate, setCarPlate] = useState(''); const [carInfo, setCarInfo] = useState(); + const [source, setSource] = useState(''); const handleSubmit = async () => { try { @@ -41,6 +42,16 @@ const Home: React.FC = () => { } }; + const handleCapture = (target: any) => { + if (target.files) { + if (target.files.length !== 0) { + const file = target.files[0]; + const newUrl = URL.createObjectURL(file); + setSource(newUrl); + } + } + }; + return (

Consulta-Placa

@@ -74,6 +85,17 @@ const Home: React.FC = () => { Mercosul.

)} + handleCapture(e.target)} + /> + + {source && }
); }; diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts index 5aed675..fce2225 100644 --- a/src/pages/Home/styles.ts +++ b/src/pages/Home/styles.ts @@ -54,4 +54,14 @@ export const Container = styled.div` } } } + input[type='file'] { + display: none; + } + + label { + svg { + height: 30px; + width: 30px; + } + } `; From d97dc63dd4d951958cd904c0c4a00365d17a7388 Mon Sep 17 00:00:00 2001 From: Alisson Leal Date: Sun, 13 Dec 2020 19:43:09 -0300 Subject: [PATCH 2/5] added alt to img --- src/pages/Home/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index ebce268..9b920bc 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -95,7 +95,7 @@ const Home: React.FC = () => { - {source && } + {source && Uploaded Source} ); }; From 56dc89ad8ea90db7934ad536b0b6558fa2b6b41c Mon Sep 17 00:00:00 2001 From: Alisson Leal Date: Mon, 14 Dec 2020 17:42:17 -0300 Subject: [PATCH 3/5] It works if the image only has the license plate --- package.json | 1 + src/components/SearchByImage/index.tsx | 44 +++++++++++ src/components/SearchByImage/styles.ts | 14 ++++ src/pages/Home/index.tsx | 2 + yarn.lock | 100 +++++++++++++++++++++++++ 5 files changed, 161 insertions(+) create mode 100644 src/components/SearchByImage/index.tsx create mode 100644 src/components/SearchByImage/styles.ts diff --git a/package.json b/package.json index 14de539..f72679d 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-scripts": "3.4.3", "react-spring": "^8.0.27", "styled-components": "^5.2.0", + "tesseract.js": "^2.1.4", "typescript": "~3.7.2", "workbox-background-sync": "^5.1.3", "workbox-broadcast-update": "^5.1.3", diff --git a/src/components/SearchByImage/index.tsx b/src/components/SearchByImage/index.tsx new file mode 100644 index 0000000..9bce7b0 --- /dev/null +++ b/src/components/SearchByImage/index.tsx @@ -0,0 +1,44 @@ +import React, { useState } from 'react'; +import { VscLoading } from 'react-icons/vsc'; +import { createWorker } from 'tesseract.js'; + +import { Container } from './styles'; + +const SearchByImage = ({ dataSource: source }: any) => { + let searchDone = false; + const [carPlateImage, setCarPlateImage] = useState(''); + + const worker = createWorker({ + logger: (m) => console.log(m), // dev mode + }); + + async function getTextFromImage(img: string) { + if (searchDone === false) { + await worker.load(); + await worker.loadLanguage('eng'); + await worker.initialize('eng'); + await worker.setParameters({ + tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ', + }); + const { + data: { text }, + } = await worker.recognize(img); + + await worker.terminate(); + setCarPlateImage(text); + console.log(text); + searchDone = true; + return text; + } + } + getTextFromImage(source); + return ( + + {source && !carPlateImage && } + {carPlateImage &&

{carPlateImage}

} +
+ ); +}; + +export default SearchByImage; +//ocr.space api key = ab2e0ca8f188957 diff --git a/src/components/SearchByImage/styles.ts b/src/components/SearchByImage/styles.ts new file mode 100644 index 0000000..8e5d539 --- /dev/null +++ b/src/components/SearchByImage/styles.ts @@ -0,0 +1,14 @@ +import styled, { keyframes } from 'styled-components'; + +const spin = keyframes` +{ 100% { + -webkit-transform: rotate(360deg); + transform:rotate(360deg); + } +}`; + +export const Container = styled.div` + svg { + animation: ${spin} 2s linear infinite; + } +`; diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 9b920bc..fd16df0 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -6,6 +6,7 @@ import api from '../../services/api'; import CarInfo from '../../components/CarInfo'; import { Container } from './styles'; +import SearchByImage from '../../components/SearchByImage'; interface CarProps { ano: string; @@ -95,6 +96,7 @@ const Home: React.FC = () => { + {source && } {source && Uploaded Source} ); diff --git a/yarn.lock b/yarn.lock index 004d3c2..bb9dcb5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2848,6 +2848,16 @@ bluebird@^3.5.5: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== +blueimp-load-image@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/blueimp-load-image/-/blueimp-load-image-3.0.0.tgz#d71c39440a7d2f1a83e3e86a625e329116a51705" + integrity sha512-Q9rFbd4ZUNvzSFmRXx9MoG0RwWwJeMjjEUbG7WIOJgUg22Jgkow0wL5b35B6qwiBscxACW9OHdrP5s2vQ3x8DQ== + +bmp-js@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.1.0.tgz#e05a63f796a6c1ff25f4771ec7adadc148c07233" + integrity sha1-4Fpj95amwf8l9Hcex62twUjAcjM= + bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0: version "4.11.9" resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828" @@ -3469,6 +3479,11 @@ colorette@^1.2.1: resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== +colors@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78" + integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA== + combined-stream@^1.0.6, combined-stream@~1.0.6: version "1.0.8" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" @@ -5085,6 +5100,11 @@ file-loader@4.3.0: loader-utils "^1.2.3" schema-utils "^2.5.0" +file-type@^12.4.1: + version "12.4.2" + resolved "https://registry.yarnpkg.com/file-type/-/file-type-12.4.2.tgz#a344ea5664a1d01447ee7fb1b635f72feb6169d9" + integrity sha512-UssQP5ZgIOKelfsaB5CuGAL+Y+q7EmONuiwF3N5HAH0t27rvrttgi6Ra9k/+DVaY9UF6+ybxu5pOXLUdA8N7Vg== + file-uri-to-path@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd" @@ -5834,6 +5854,11 @@ icss-utils@^4.0.0, icss-utils@^4.1.1: dependencies: postcss "^7.0.14" +idb-keyval@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-3.2.0.tgz#cbbf354deb5684b6cdc84376294fc05932845bd6" + integrity sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ== + identity-obj-proxy@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14" @@ -6177,6 +6202,11 @@ is-docker@^2.0.0: resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156" integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw== +is-electron@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/is-electron/-/is-electron-2.2.0.tgz#8943084f09e8b731b3a7a0298a7b5d56f6b7eef0" + integrity sha512-SpMppC2XR3YdxSzczXReBjqs2zGscWQpBIKqwXYBFic0ERaxNVgwLCHwOLZeESfdJQjX0RDvrJ1lBXX2ij+G1Q== + is-extendable@^0.1.0, is-extendable@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89" @@ -6332,6 +6362,11 @@ is-typedarray@~1.0.0: resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= +is-url@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52" + integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww== + is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -6813,6 +6848,22 @@ jest@24.9.0: import-local "^2.0.0" jest-cli "^24.9.0" +jpeg-autorotate@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/jpeg-autorotate/-/jpeg-autorotate-7.1.1.tgz#c57905c6afd3b54373a6a1d0249ed6e07f7b043b" + integrity sha512-ewTZTG/QWOM0D5h/yKcQ3QgyrnQYsr3qmcS+bqoAwgQAY1KBa31aJ+q+FlElaxo/rSYqfF1ixf+8EIgluBkgTg== + dependencies: + colors "^1.4.0" + glob "^7.1.6" + jpeg-js "^0.4.2" + piexifjs "^1.0.6" + yargs-parser "^20.2.1" + +jpeg-js@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d" + integrity sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw== + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -7622,6 +7673,11 @@ no-case@^3.0.3: lower-case "^2.0.1" tslib "^1.10.0" +node-fetch@^2.6.0: + version "2.6.1" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" + integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== + node-forge@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3" @@ -7910,6 +7966,11 @@ open@^7.0.2: is-docker "^2.0.0" is-wsl "^2.1.1" +opencollective-postinstall@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259" + integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q== + opn@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc" @@ -8232,6 +8293,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== +piexifjs@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/piexifjs/-/piexifjs-1.0.6.tgz#883811d73f447218d0d06e9ed7866d04533e59e0" + integrity sha512-0wVyH0cKohzBQ5Gi2V1BuxYpxWfxF3cSqfFXfPIpl5tl9XLS5z4ogqhUCD20AbHi0h9aJkqXNJnkVev6gwh2ag== + pify@^2.0.0: version "2.3.0" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" @@ -10724,6 +10790,30 @@ terser@^4.1.2, terser@^4.6.12, terser@^4.6.3: source-map "~0.6.1" source-map-support "~0.5.12" +tesseract.js-core@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/tesseract.js-core/-/tesseract.js-core-2.2.0.tgz#6ef78051272a381969fac3e45a226e85022cffef" + integrity sha512-a8L+OJTbUipBsEDsJhDPlnLB0TY1MkTZqw5dqUwmiDSjUzwvU7HWLg/2+WDRulKUi4LE+7PnHlaBlW0k+V0U0w== + +tesseract.js@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/tesseract.js/-/tesseract.js-2.1.4.tgz#24ef4af99982e34720f254e8286b6812634ad267" + integrity sha512-r1nPDjkaD7QdlGfgn/q0BIKBnnCSXcM9PTrgp6rP2aWutwuf1BrQX564rSd1uQFJYk6GQYU6U6fm3bTQ/XMBZw== + dependencies: + blueimp-load-image "^3.0.0" + bmp-js "^0.1.0" + file-type "^12.4.1" + idb-keyval "^3.2.0" + is-electron "^2.2.0" + is-url "^1.2.4" + jpeg-autorotate "^7.1.1" + node-fetch "^2.6.0" + opencollective-postinstall "^2.0.2" + regenerator-runtime "^0.13.3" + resolve-url "^0.2.1" + tesseract.js-core "^2.2.0" + zlibjs "^0.3.1" + test-exclude@^5.2.3: version "5.2.3" resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0" @@ -11746,6 +11836,11 @@ yargs-parser@^13.1.2: camelcase "^5.0.0" decamelize "^1.2.0" +yargs-parser@^20.2.1: + version "20.2.4" + resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54" + integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA== + yargs@^13.3.0, yargs@^13.3.2: version "13.3.2" resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd" @@ -11761,3 +11856,8 @@ yargs@^13.3.0, yargs@^13.3.2: which-module "^2.0.0" y18n "^4.0.0" yargs-parser "^13.1.2" + +zlibjs@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/zlibjs/-/zlibjs-0.3.1.tgz#50197edb28a1c42ca659cc8b4e6a9ddd6d444554" + integrity sha1-UBl+2yihxCymWcyLTmqd3W1ERVQ= From ac18dd45d51f6fe368df4aa2358cd469070b3092 Mon Sep 17 00:00:00 2001 From: Alisson Leal Date: Mon, 14 Dec 2020 18:34:19 -0300 Subject: [PATCH 4/5] styled image size --- src/components/SearchByImage/index.tsx | 37 +++++++++++++------------- src/pages/Home/styles.ts | 5 ++++ 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/SearchByImage/index.tsx b/src/components/SearchByImage/index.tsx index 9bce7b0..9ed9248 100644 --- a/src/components/SearchByImage/index.tsx +++ b/src/components/SearchByImage/index.tsx @@ -5,37 +5,36 @@ import { createWorker } from 'tesseract.js'; import { Container } from './styles'; const SearchByImage = ({ dataSource: source }: any) => { - let searchDone = false; const [carPlateImage, setCarPlateImage] = useState(''); + const [oldSource, setOldSource] = useState(''); const worker = createWorker({ logger: (m) => console.log(m), // dev mode }); async function getTextFromImage(img: string) { - if (searchDone === false) { - await worker.load(); - await worker.loadLanguage('eng'); - await worker.initialize('eng'); - await worker.setParameters({ - tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ', - }); - const { - data: { text }, - } = await worker.recognize(img); + await worker.load(); + await worker.loadLanguage('por'); + await worker.initialize('por'); + // await worker.setParameters({ + // tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ', + // }); + const { + data: { text }, + } = await worker.recognize(img); - await worker.terminate(); - setCarPlateImage(text); - console.log(text); - searchDone = true; - return text; - } + await worker.terminate(); + setCarPlateImage(text); + setOldSource(source); + console.log(text); + return text; } + getTextFromImage(source); return ( - {source && !carPlateImage && } - {carPlateImage &&

{carPlateImage}

} + {source !== oldSource && } + {source === oldSource && carPlateImage &&

{carPlateImage}

}
); }; diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts index a21b797..e3cf1ed 100644 --- a/src/pages/Home/styles.ts +++ b/src/pages/Home/styles.ts @@ -74,4 +74,9 @@ export const Container = styled.div` width: 30px; } } + + img { + max-width: 15rem; + border-radius: 1rem; + } `; From 90aab3cf73d1f2ca9d0c7cc79d2bd774b7d551b4 Mon Sep 17 00:00:00 2001 From: Alisson Leal Date: Tue, 15 Dec 2020 19:54:50 -0300 Subject: [PATCH 5/5] Function is only called once now --- src/components/SearchByImage/index.tsx | 14 ++++++++------ src/pages/Home/index.tsx | 24 ++++++++++++++---------- src/pages/Home/styles.ts | 1 + 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/SearchByImage/index.tsx b/src/components/SearchByImage/index.tsx index 9ed9248..b6af6e3 100644 --- a/src/components/SearchByImage/index.tsx +++ b/src/components/SearchByImage/index.tsx @@ -7,18 +7,20 @@ import { Container } from './styles'; const SearchByImage = ({ dataSource: source }: any) => { const [carPlateImage, setCarPlateImage] = useState(''); const [oldSource, setOldSource] = useState(''); + const [functionRan, setFunctionRan] = useState(false); const worker = createWorker({ logger: (m) => console.log(m), // dev mode }); async function getTextFromImage(img: string) { + setFunctionRan(true); await worker.load(); - await worker.loadLanguage('por'); - await worker.initialize('por'); - // await worker.setParameters({ - // tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ', - // }); + await worker.loadLanguage('eng'); + await worker.initialize('eng'); + await worker.setParameters({ + tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ', + }); const { data: { text }, } = await worker.recognize(img); @@ -30,7 +32,7 @@ const SearchByImage = ({ dataSource: source }: any) => { return text; } - getTextFromImage(source); + !functionRan && getTextFromImage(source); return ( {source !== oldSource && } diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 61e1724..f0a142d 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -88,16 +88,20 @@ const Home: React.FC = () => { Mercosul.

)} - handleCapture(e.target)} - /> - + {!source && ( + <> + handleCapture(e.target)} + /> + + + )} {source && } {source && Uploaded Source}
diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts index e3cf1ed..0331374 100644 --- a/src/pages/Home/styles.ts +++ b/src/pages/Home/styles.ts @@ -72,6 +72,7 @@ export const Container = styled.div` svg { height: 30px; width: 30px; + cursor: pointer; } }