From 808569adf5c323ed4333dd801c05ebd63e4605f1 Mon Sep 17 00:00:00 2001
From: Nathalia <nathaliaazmelo@gmail.com>
Date: Sun, 16 Jun 2024 16:23:07 -0300
Subject: [PATCH] feat: create pet avatar component

---
 src/components/PetAvatar/index.scss            |  7 ++-----
 src/layouts/app/components/SideMenu/index.js   | 16 +++++++++++++++-
 src/layouts/app/components/SideMenu/index.scss |  5 ++---
 src/stories/PetAvatar.stories.js               |  3 ++-
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/PetAvatar/index.scss b/src/components/PetAvatar/index.scss
index a9e8aee3..96dab716 100644
--- a/src/components/PetAvatar/index.scss
+++ b/src/components/PetAvatar/index.scss
@@ -7,12 +7,12 @@
   gap: 1rem;
 
   align-items: center;
+
+  text-decoration: none;
   aspect-ratio: 1/1;
 
   &__img {
-    min-width: 6rem;
     height: 100%;
-    min-height: 6rem;
 
     outline: 0.15rem solid colors.$gray500;
 
@@ -26,9 +26,6 @@
   }
 
   &__title {
-    height: 100%;
-    min-height: 2.2rem;
-    max-height: 2.2rem;
     overflow: hidden;
 
     font-family: fonts.$fourthFont;
diff --git a/src/layouts/app/components/SideMenu/index.js b/src/layouts/app/components/SideMenu/index.js
index e8b38b84..7d6d383d 100644
--- a/src/layouts/app/components/SideMenu/index.js
+++ b/src/layouts/app/components/SideMenu/index.js
@@ -10,7 +10,7 @@ import notificacoes from './images/notifications.svg';
 import perfil from './images/perfil.svg';
 import petdex from './images/petdex.svg';
 import './index.scss';
-import PetAvatar from '../../../components/PetAvatar';
+import PetAvatar from '../../../../components/PetAvatar';
 
 const html = `
   <nav class="side-menu-nav">
@@ -72,6 +72,20 @@ export default function SideMenu() {
         '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) => {
diff --git a/src/layouts/app/components/SideMenu/index.scss b/src/layouts/app/components/SideMenu/index.scss
index 100b69f9..a2939c4c 100644
--- a/src/layouts/app/components/SideMenu/index.scss
+++ b/src/layouts/app/components/SideMenu/index.scss
@@ -86,11 +86,10 @@
 
   &__avatar-yourpet {
     display: grid;
-    grid-auto-columns: 6rem;
-    grid-auto-flow: column;
+    grid-template-columns: repeat(3, 6rem);
     grid-gap: 2rem;
 
-    padding-top: 2rem;
+    margin-top: 2rem;
   }
 
   &__itens {
diff --git a/src/stories/PetAvatar.stories.js b/src/stories/PetAvatar.stories.js
index 06bacb09..8628fbba 100644
--- a/src/stories/PetAvatar.stories.js
+++ b/src/stories/PetAvatar.stories.js
@@ -1,11 +1,12 @@
 import PetAvatar from '../components/PetAvatar';
 
-import akita from '../home/components/PetRegisterPage/images/akita.svg';
+import akita from './assets/petRegisterPage/akita.svg';
 
 export default {
   title: 'Components/PetAvatar',
   render: (args) => {
     const $container = document.createElement('div');
+    $container.style.width = '6rem';
     const petAvatar = new PetAvatar(args);
     petAvatar.mount($container);