feat: add upload image component (#66)

* Criei um componente de upload de imagem

* feat: Create and adjust the UploadImage component

closes #24

* Made some adjustments in UploadImage component

* feat: A component to upload images, code with corrections made in code review

fic #24

* feat: Made adjustments in the Upload Image component

fix #24

src/components/UploadImage/index.js

@@ -0,0 +1,60 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+import placeholderImage from './img/placeholder.svg';
+import plusIcon from './img/plus-icon.svg';
+import photoIcon from './img/photo-icon.svg';
+
+const html = `
+  <div class="container">
+    <div class="container__animation">
+      <div class="container__circle"></div>
+      <div class="container__circle-duplicate"></div>
+    </div>
+    <label for="input-file" class="container__label">
+      <div class="container__image-container">
+        <img class="container__placeholder-image" src="${placeholderImage}" alt="Placeholder">
+        <img class="container__preview-image hidden" data-select="image-preview" alt="Imagem carregada">
+      </div>
+      <div class='container__button'>
+        <img data-select="button-icon" src="${plusIcon}">
+      </div>
+      <input class="container__input" id="input-file" name="input-file" type="file" accept="image/*" data-select="upload-input">
+    </label>
+  </div>
+`;
+
+export default function UploadImage() {
+  Component.call(this, { html });
+
+  const previewImage = this.selected.get('image-preview');
+  const buttonIcon = this.selected.get('button-icon');
+  const uploadInput = this.selected.get('upload-input');
+
+  const readAndDisplayImage = (file) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', (e) => {
+      const readerTarget = e.target;
+      previewImage.src = readerTarget.result;
+      previewImage.classList.remove('hidden');
+      buttonIcon.src = photoIcon;
+    });
+
+    reader.readAsDataURL(file);
+  };
+
+  const handleInputChange = (e) => {
+    const inputTarget = e.target;
+    const file = inputTarget.files[0];
+
+    if (file) {
+      readAndDisplayImage(file);
+    }
+  };
+
+  uploadInput.addEventListener('change', handleInputChange);
+}
+
+UploadImage.prototype = Object.assign(
+  UploadImage.prototype,
+  Component.prototype,
+);

src/components/UploadImage/index.scss

@@ -0,0 +1,118 @@
+.container {
+  position: relative;
+
+  &__label {
+    cursor: pointer;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__image-container {
+    min-width: 186px;
+    min-height: 186px;
+
+    overflow: hidden;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+
+    background-color: rgb(0, 52, 89);
+    border-radius: 50%;
+  }
+
+  &__placeholder-image {
+    max-width: 100%;
+
+    position: absolute;
+
+    border-radius: 50%;
+  }
+
+  &__preview-image {
+    max-width: 100%;
+
+    position: absolute;
+    inset: 0;
+
+    object-fit: cover;
+
+    &.hidden {
+      display: none;
+    }
+  }
+
+  &__button {
+    width: 20%;
+    height: 20%;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid rgb(244, 248, 251);
+
+    position: absolute;
+    top: 85%;
+    left: 60%;
+
+    background: rgb(255, 255, 255);
+    box-shadow: 0 1px 4px 0 rgba(139, 158, 184, 0.2);
+    border-radius: 10%;
+  }
+
+  &__animation {
+    position: absolute;
+    inset: 0;
+  }
+
+  &__circle,
+  &__circle-duplicate {
+    width: 100%;
+    height: 100%;
+
+    border: 2px solid rgb(236, 239, 242);
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+
+    animation: radar-pulse 6s infinite;
+  }
+
+  &__circle-duplicate {
+    animation-delay: 2s;
+  }
+}
+
+@keyframes radar-pulse {
+  0%,
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+
+  25% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 1;
+  }
+
+  50% {
+    transform: translate(-50%, -50%) scale(1.5);
+    opacity: 0.3;
+  }
+
+  75% {
+    transform: translate(-50%, -50%);
+    opacity: 0;
+  }
+}