feat: create pet avatar component

devhatt · Jun 16, 2024 · 808569a · 808569a
1 parent dd5bf83
commit 808569a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);