feat: avatar button issue devhatt#18

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);

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;
+}

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);
 });
+