feat: create pet avatar component

devhatt · Jun 8, 2024 · 410dcd7 · 410dcd7
1 parent 3c0d4fb
commit 410dcd7
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 17 deletions.
diff --git a/src/components/PetAvatar/index.js b/src/components/PetAvatar/index.js
@@ -1,25 +1,27 @@
 import { Component } from 'pet-dex-utilities';
 import './index.scss';
+import { routeLocation } from 'vanilla-routing';
 
-const events = ['active', 'deactive'];
+const events = ['active'];
 
 const html = `
-  <a class="pet-container" data-select="pet-container" href="/petprofile/">
+  <a class="pet-container" data-select="pet-container" href="/petperfil/">
     <img class="pet-container__img" data-select="pet-image" src="" alt=""/>
     <p class="pet-container__title" data-select="pet-title"></p>
   </a>
 `;
 
-// estudar frontend route / route parameter
-
-export default function PetAvatar({ id, title, imgSrc, imgAlt }) {
+export default function PetAvatar({ id, title, imgSrc, imgAlt } = {}) {
   Component.call(this, { html, events });
 
-  this.selected.get('pet-container').href += id;
-
+  if (id) this.setHref(id);
   if (title) this.setTitle(title);
   if (imgSrc) this.setImgSrc(imgSrc);
   if (imgAlt) this.setImgAlt(imgAlt);
+
+  if (routeLocation().pathname === `/petperfil/${id}`) {
+    this.activate();
+  }
 }
 
 PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, {
@@ -32,19 +34,14 @@ PetAvatar.prototype = Object.assign(PetAvatar.prototype, Component.prototype, {
   setImgAlt(alt) {
     this.selected.get('pet-image').alt = alt;
   },
-  isActive() {},
+  setHref(id) {
+    this.selected.get('pet-container').href += id;
+  },
   activate() {
     const image = this.selected.get('pet-image');
     const title = this.selected.get('pet-title');
     image.classList.add('pet-container__img--active');
     title.classList.add('pet-container__title--active');
     this.emit('active');
   },
-  deactivate() {
-    const image = this.selected.get('pet-image');
-    const title = this.selected.get('pet-title');
-    image.classList.remove('pet-container__img--active');
-    title.classList.remove('pet-container__title--active');
-    this.emit('deactive');
-  },
 });
diff --git a/src/components/PetAvatar/index.scss b/src/components/PetAvatar/index.scss
@@ -4,7 +4,7 @@
 .pet-container {
   display: flex;
   flex-direction: column;
-  gap: 0.6rem;
+  gap: 1rem;
 
   align-items: center;
   aspect-ratio: 1/1;
@@ -31,10 +31,11 @@
     max-height: 2.2rem;
     overflow: hidden;
 
-    font-family: fonts.$secondaryFont;
+    font-family: fonts.$quaternaryFont;
 
     color: colors.$gray200;
     text-align: center;
+    font-size: 1.4rem;
     font-weight: fonts.$regular;
 
     &--active {

diff --git a/src/home/components/SideMenu/index.js b/src/home/components/SideMenu/index.js
@@ -10,6 +10,7 @@ import notificacoes from './images/notifications.svg';
 import perfil from './images/perfil.svg';
 import exitMenu from './images/exitmenu.svg';
 import './index.scss';
+import PetAvatar from '../../../components/PetAvatar';
 
 const html = `
   <nav class="side-menu-nav">
@@ -27,6 +28,7 @@ const html = `
       <div class="side-menu-content__line"></div>
       <div class="side-menu-content__yourpet">
         <h2 class="side-menu-content__title-yourpet">Seu Pet</h2>
+        <div class="side-menu-content__avatar-yourpet"  data-select="avatar-container"></div>
       </div>
       <div class="side-menu-content__line"></div>
       <div class="side-menu-content__itens" alt="itens-um">
@@ -45,6 +47,37 @@ const html = `
 
 export default function SideMenu() {
   Component.call(this, { html });
+
+  const $container = this.selected.get('avatar-container');
+
+  const pets = [
+    {
+      id: '1',
+      title: 'Bolinha',
+      imgSrc:
+        'https://images.unsplash.com/photo-1598628599796-2a454fa7d9c5?q=80&w=1674&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imgAlt: 'Bolinha',
+    },
+    {
+      id: '2',
+      title: 'Jake',
+      imgSrc:
+        'https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?q=80&w=1888&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imgAlt: 'Jake',
+    },
+    {
+      id: '3',
+      title: 'Tobias',
+      imgSrc:
+        'https://images.unsplash.com/photo-1632165258904-21ca36a01ee0?q=80&w=1635&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imgAlt: 'Tobias',
+    },
+  ];
+
+  pets.forEach((pet) => {
+    const avatar = new PetAvatar(pet);
+    avatar.mount($container);
+  });
 }
 
 SideMenu.prototype = Object.assign(SideMenu.prototype, Component.prototype);
diff --git a/src/home/components/SideMenu/index.scss b/src/home/components/SideMenu/index.scss
@@ -84,6 +84,15 @@
     font-style: fonts.$normal;
   }
 
+  &__avatar-yourpet {
+    display: grid;
+    grid-auto-columns: 6rem;
+    grid-auto-flow: column;
+    grid-gap: 2rem;
+
+    padding-top: 2rem;
+  }
+
   &__itens {
     font-family: fonts.$primaryFont;
     color: colors.$secondary100;

diff --git a/src/stories/PetAvatar.stories.js b/src/stories/PetAvatar.stories.js
@@ -12,6 +12,7 @@ export default {
     return $container;
   },
   argTypes: {
+    id: { control: 'text', description: 'Pet id' },
     title: { control: 'text', description: 'Pet name' },
     imgSrc: { control: 'text', description: 'url source for a image pet' },
     imgAlt: { control: 'text', description: 'Pet name alt description' },
@@ -20,6 +21,7 @@ export default {
 
 export const Default = {
   args: {
+    id: '1',
     title: 'Carlos',
     imgSrc: akita,
     imgAlt: 'breed alt description',