From 4009756c39acc7727c55fe75ab8ba67953ab1ab2 Mon Sep 17 00:00:00 2001
From: Carlos Bryan <carlosbryanpv@gmail.com>
Date: Tue, 9 Jan 2024 16:02:25 -0300
Subject: [PATCH 1/2] feat: avatar button issue #18

---
 src/components/Avatar/Icon.svg      |  3 +++
 src/components/Avatar/iconHover.svg |  3 +++
 src/components/Avatar/index.js      | 23 +++++++++++++++++++++++
 src/components/Avatar/index.scss    | 16 ++++++++++++++++
 src/home/main.js                    | 27 ++++-----------------------
 5 files changed, 49 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Avatar/Icon.svg
 create mode 100644 src/components/Avatar/iconHover.svg
 create mode 100644 src/components/Avatar/index.js
 create mode 100644 src/components/Avatar/index.scss

diff --git a/src/components/Avatar/Icon.svg b/src/components/Avatar/Icon.svg
new file mode 100644
index 00000000..54948023
--- /dev/null
+++ b/src/components/Avatar/Icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5V19M5 12H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Avatar/iconHover.svg b/src/components/Avatar/iconHover.svg
new file mode 100644
index 00000000..5bbfc26b
--- /dev/null
+++ b/src/components/Avatar/iconHover.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5V19M5 12H19" stroke="#62dcf6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/Avatar/index.js b/src/components/Avatar/index.js
new file mode 100644
index 00000000..3ef39501
--- /dev/null
+++ b/src/components/Avatar/index.js
@@ -0,0 +1,23 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+import icon from './Icon.svg';
+import iconHover from './iconHover.svg';
+
+const html = `
+  <a href="#" class="avatarButton" data-select="container">
+    <img class="plus" data-select="image" src="${icon}" alt="" />
+  </a>
+`;
+
+export default function AvatarButton() {
+  Component.call(this, { html });
+
+  const $image = this.selected.get('image');
+  const imageOriginal = icon;
+  const imageHover = iconHover;
+
+  $image.addEventListener('mouseover', () => ($image.src = imageHover));
+  $image.addEventListener('mouseout', () => ($image.src = imageOriginal));
+}
+
+AvatarButton.prototype = Object.assign(AvatarButton.prototype, Component.prototype);
diff --git a/src/components/Avatar/index.scss b/src/components/Avatar/index.scss
new file mode 100644
index 00000000..31637682
--- /dev/null
+++ b/src/components/Avatar/index.scss
@@ -0,0 +1,16 @@
+body {
+  background: #111;
+}
+
+.plus {
+  padding: 18px;
+  border-radius: 9999px;
+  border: 1.5px solid #fff;
+  background: rgba(32, 35, 38, 1);
+}
+
+.plus:hover {
+  transition: 0.3s;
+  border: 1.5px solid #62dcf6;
+  cursor: pointer;
+}
diff --git a/src/home/main.js b/src/home/main.js
index afc5d344..3dec1b11 100644
--- a/src/home/main.js
+++ b/src/home/main.js
@@ -1,30 +1,11 @@
 import { extractElements } from 'pet-dex-utilities';
-import Card from '../components/Card';
 import './index.scss';
-
-function renderCards(qty, $container) {
-  for (let i = 0; i < qty; i += 1) {
-    const card = new Card();
-    card.mount($container);
-    card.setTitle(`Card ${i}`);
-    card.listen('purchase', () => {
-      console.log(`purchase de quem usa o componente, esse é o card ${i}`);
-    });
-
-    const $card = card.selected.get('card-button');
-
-    if (i === 2) {
-      card.disable();
-      $card.classList.add('card-container__button--disabled');
-    } else {
-      $card.classList.add('card-container__button--active');
-    }
-  }
-}
+import AvatarButton from '../components/Avatar';
 
 document.addEventListener('DOMContentLoaded', () => {
   const selected = extractElements([document.body]);
   const $container = selected.get('container');
-
-  renderCards(5, $container);
+  const avatar = new AvatarButton();
+  avatar.mount($container);
 });
+

From 1203491d5070d145dd2d7399428e928a7dc42422 Mon Sep 17 00:00:00 2001
From: Carlos Bryan <carlosbryanpv@gmail.com>
Date: Tue, 9 Jan 2024 19:11:15 -0300
Subject: [PATCH 2/2] feat: avatar button issue #18

---
 src/components/Avatar/index.js   |  5 ++++-
 src/components/Avatar/index.scss | 14 +++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Avatar/index.js b/src/components/Avatar/index.js
index 3ef39501..62cef9d1 100644
--- a/src/components/Avatar/index.js
+++ b/src/components/Avatar/index.js
@@ -20,4 +20,7 @@ export default function AvatarButton() {
   $image.addEventListener('mouseout', () => ($image.src = imageOriginal));
 }
 
-AvatarButton.prototype = Object.assign(AvatarButton.prototype, Component.prototype);
+AvatarButton.prototype = Object.assign(
+  AvatarButton.prototype,
+  Component.prototype
+);
diff --git a/src/components/Avatar/index.scss b/src/components/Avatar/index.scss
index 31637682..fbde9924 100644
--- a/src/components/Avatar/index.scss
+++ b/src/components/Avatar/index.scss
@@ -1,16 +1,12 @@
-body {
-  background: #111;
-}
-
 .plus {
   padding: 18px;
   border-radius: 9999px;
   border: 1.5px solid #fff;
   background: rgba(32, 35, 38, 1);
-}
 
-.plus:hover {
-  transition: 0.3s;
-  border: 1.5px solid #62dcf6;
-  cursor: pointer;
+  &:hover {
+    transition: 0.3s;
+    border: 1.5px solid #62dcf6;
+    cursor: pointer;
+  }
 }