feat: create pet avatar component

src/components/PetAvatar/index.js

@@ -0,0 +1,47 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+import { routeLocation } from 'vanilla-routing';
+
+const events = ['active'];
+
+const html = `
+  <a class="pet-avatar" data-select="pet-avatar" href="/petperfil/">
+    <img class="pet-avatar__img" data-select="pet-image" src="" alt=""/>
+    <p class="pet-avatar__title" data-select="pet-title"></p>
+  </a>
+`;
+
+export default function PetAvatar({ id, title, imgSrc, imgAlt } = {}) {
+  Component.call(this, { html, events });
+
+  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, {
+  setTitle(text) {
+    this.selected.get('pet-title').textContent = text;
+  },
+  setImgSrc(src) {
+    this.selected.get('pet-image').src = src;
+  },
+  setImgAlt(alt) {
+    this.selected.get('pet-image').alt = alt;
+  },
+  setHref(id) {
+    this.selected.get('pet-avatar').href += id;
+  },
+  activate() {
+    const image = this.selected.get('pet-image');
+    const title = this.selected.get('pet-title');
+    image.classList.add('pet-avatar__img--active');
+    title.classList.add('pet-avatar__title--active');
+    this.emit('active');
+  },
+});

src/components/PetAvatar/index.scss

@@ -0,0 +1,54 @@
+@use '~styles/colors' as colors;
+@use '~styles/fonts' as fonts;
+
+.pet-avatar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  align-items: center;
+
+  text-decoration: none;
+  aspect-ratio: 1/1;
+
+  opacity: 0.85;
+
+  transition: 0.3s ease-in-out;
+
+  &__img {
+    height: 100%;
+
+    outline: 0.15rem solid colors.$gray500;
+
+    border-radius: 50%;
+    object-fit: cover;
+    aspect-ratio: 1/1;
+
+    transition: 0.3s ease-in-out;
+
+    &--active {
+      outline: 0.3rem solid colors.$primary200;
+    }
+  }
+
+  &__title {
+    font-family: fonts.$fourthFont;
+
+    color: colors.$gray200;
+    text-align: center;
+    font-size: 1.4rem;
+    font-weight: fonts.$regular;
+
+    transition: 0.3s ease-in-out;
+
+    &--active {
+      color: colors.$primary200;
+      font-weight: fonts.$semiBold;
+    }
+  }
+
+  &:hover {
+    transform: scale(1.02);
+    opacity: 1;
+  }
+}

src/layouts/app/components/SideMenu/index.js

@@ -9,6 +9,7 @@ import meusPets from './images/meuspets.svg';
 import notificacoes from './images/notifications.svg';
 import perfil from './images/perfil.svg';
 import petdex from './images/petdex.svg';
+import PetAvatar from '../../../../components/PetAvatar';
 import './index.scss';
 
 const html = `
@@ -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__avatars-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,51 @@ 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',
+    },
+    {
+      id: '4',
+      title: 'Francis',
+      imgSrc:
+        'https://images.unsplash.com/photo-1596921825946-d738194fac80?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imgAlt: 'Francis',
+    },
+    {
+      id: '5',
+      title: 'Toyota',
+      imgSrc:
+        'https://images.unsplash.com/photo-1694185643879-536f8d785fa6?q=80&w=1664&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imgAlt: 'Toyota',
+    },
+  ];
+
+  pets.forEach((pet) => {
+    const avatar = new PetAvatar(pet);
+    avatar.mount($container);
+  });
 }
 
 SideMenu.prototype = Object.assign(SideMenu.prototype, Component.prototype);

src/layouts/app/components/SideMenu/index.scss

@@ -84,6 +84,14 @@
     font-style: fonts.$normal;
   }
 
+  &__avatars-yourpet {
+    display: grid;
+    grid-template-columns: repeat(3, 6rem);
+    grid-gap: 2rem;
+
+    margin-top: 2rem;
+  }
+
   &__itens {
     font-family: fonts.$primaryFont;
     color: colors.$secondary100;

src/stories/PetAvatar.stories.js

@@ -0,0 +1,32 @@
+import PetAvatar from '../components/PetAvatar';
+
+import akita from './assets/petRegisterPage/akita.svg';
+
+export default {
+  title: 'Components/PetAvatar',
+  render: (args) => {
+    const $container = document.createElement('div');
+    $container.style.width = '60px';
+    $container.style.height = '90px';
+    $container.style.overflow = 'visible';
+    const petAvatar = new PetAvatar(args);
+    petAvatar.mount($container);
+
+    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' },
+  },
+};
+
+export const Default = {
+  args: {
+    id: '1',
+    title: 'Carlos',
+    imgSrc: akita,
+    imgAlt: 'breed alt description',
+  },
+};