Componente de meus pets

src/components/MyPets/index.js

@@ -0,0 +1,62 @@
+import { Component } from 'pet-dex-utilities';
+import MyPetsCard from '../MyPetsCard';
+import Sliding from '../Sliding';
+
+import arrowLeft from './images/arrowLeft.svg';
+import arrowRight from './images/arrowRight.svg';
+
+import './index.scss';
+
+const html = `
+  <div class="my-pets">
+   <button class="my-pets__button" data-select="button-previous">
+    <img src=${arrowLeft}></img>
+   </button>
+   <div class="my-pets__cards-container" data-select="my-pets-cards-container"></div>
+    <button class="my-pets__button" data-select="button-next">
+      <img src=${arrowRight}></img>
+   </button>
+  </div>
+`;
+
+export default function MyPets({
+  pets = [
+    {
+      name: '',
+      gender: '',
+      race: '',
+      type: '',
+      desc: '',
+    },
+  ],
+}) {
+  Component.call(this, { html });
+
+  const $myPetsContainer = this.selected.get('my-pets-cards-container');
+  const $previousButton = this.selected.get('button-previous');
+  const $nextButton = this.selected.get('button-next');
+
+  const cards = [];
+  pets.forEach((pet) => {
+    const petCard = new MyPetsCard(pet);
+    const div = document.createElement('div');
+    petCard.mount(div);
+    cards.push(div);
+  });
+  const sliding = new Sliding({
+    slides: cards,
+    shuffleMode: true,
+    slideSideSpacing: 80,
+  });
+
+  sliding.mount($myPetsContainer);
+
+  $previousButton.onclick = () => {
+    sliding.previous();
+  };
+  $nextButton.onclick = () => {
+    sliding.next();
+  };
+}
+
+MyPets.prototype = Object.assign(MyPets.prototype, Component.prototype, {});

src/components/MyPets/index.scss

@@ -0,0 +1,25 @@
+.my-pets {
+  display: flex;
+
+  gap: 4rem;
+
+  align-items: center;
+
+  &__button {
+    font: inherit;
+    color: inherit;
+
+    padding: 0;
+
+    padding: 1.7rem;
+    border: 0;
+
+    background: none;
+
+    box-shadow: 0 1px 4px 0 rgba(139, 158, 184, 0.2);
+    outline: inherit;
+    border-radius: 14px;
+
+    cursor: pointer;
+  }
+}

src/components/MyPetsCard/index.js

@@ -0,0 +1,78 @@
+import { Component } from 'pet-dex-utilities';
+import PetAvatar from '../PetAvatar';
+
+import akita from '../AddPet/assets/akita.svg';
+
+import './index.scss';
+import PetGender from '../PetGender';
+
+const events = [''];
+
+const html = `
+  <div class="my-pets-card" data-select="my-pets-card">
+    <div class="my-pets-card__text">
+      <div data-select="icon-container"></div>
+      <div>
+        <span class="my-pets-card__pet-name" data-select="name"></span>
+        <div class="my-pets-card__pet-info"/>
+          <span data-select="race"></span>
+          <hr class="my-pets-card__divider"/>
+          <span data-select="type"></span>
+        </div>
+      </div>
+      <p class="my-pets-card__pet-desc" data-select="desc">
+      </p>
+    </div>
+    <div class="my-pets-card__avatar" data-select="avatar"/>
+  </div>
+`;
+
+export default function MyPetsCard({
+  name = '',
+  type = '',
+  race = '',
+  desc = '',
+  gender = 'male',
+  avatar = akita,
+}) {
+  Component.call(this, { html, events });
+
+  this.insertText({ name, type, race, avatar, desc });
+
+  const $iconContainer = this.selected.get('icon-container');
+
+  const petGender = new PetGender({ gender });
+  petGender.selected
+    .get('pet-gender-icon')
+    .classList.add('my-pets-card__pet-gender');
+
+  petGender.mount($iconContainer);
+}
+
+MyPetsCard.prototype = Object.assign(
+  MyPetsCard.prototype,
+  Component.prototype,
+  {
+    insertText({ name, type, race, desc, avatar }) {
+      const $name = this.selected.get('name');
+      const $type = this.selected.get('type');
+      const $race = this.selected.get('race');
+      const $desc = this.selected.get('desc');
+      const $avatar = this.selected.get('avatar');
+
+      const petAvatar = new PetAvatar({
+        imgAlt: 'breed alt description',
+        imgSrc: avatar,
+      });
+      petAvatar.mount($avatar);
+
+      const $petAvatarImg = petAvatar.selected.get('pet-image');
+      $petAvatarImg.classList.add('my-pets-card__pet-avatar-image');
+
+      $name.textContent = name;
+      $type.textContent = type;
+      $race.textContent = race;
+      $desc.textContent = desc;
+    },
+  },
+);

src/components/MyPetsCard/index.scss

@@ -0,0 +1,149 @@
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.my-pets-card {
+  max-height: 13.7rem;
+  overflow: hidden;
+
+  display: flex;
+
+  justify-content: space-between;
+
+  padding: 1.5rem 2rem;
+
+  border: 1px solid colors.$gray100;
+
+  background-color: colors.$primary200;
+  border-radius: 14px;
+
+  &__text {
+    width: 50%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    color: colors.$white;
+
+    margin: auto 0;
+  }
+
+  &__pet-name {
+    font-family: fonts.$primaryFont;
+
+    font-size: fonts.$md;
+    font-weight: fonts.$semiBold;
+    line-height: 2;
+  }
+
+  &__pet-info {
+    font-family: fonts.$fourthFont;
+
+    font-size: fonts.$xs;
+    font-weight: fonts.$regular;
+    line-height: 20px;
+  }
+
+  &__pet-desc {
+    display: none;
+  }
+
+  &__gradient {
+    height: 100%;
+
+    padding: 2rem;
+
+    background: rgba(255, 255, 255, 0.0392156862745098);
+
+    border-radius: 50%;
+  }
+
+  &__divider {
+    width: 1px;
+    height: 10px;
+
+    align-self: stretch;
+
+    border: 0;
+
+    background: rgb(116, 180, 255);
+    margin-inline: 0.7rem;
+  }
+
+  &__avatar {
+    max-width: 50%;
+    max-height: 50%;
+
+    padding: 2rem;
+
+    background: rgb(62, 152, 244);
+
+    box-shadow:
+      0 0 0 2rem rgb(45, 143, 243),
+      0 0 0 4rem rgb(36, 138, 243);
+
+    border-radius: 50%;
+  }
+
+  &__pet-avatar-image {
+    max-width: 100px;
+    max-height: 100px;
+
+    background: colors.$white !important;
+  }
+
+  &__pet-gender {
+    display: none;
+  }
+}
+
+@include breakpoints.from667 {
+  .my-pets-card {
+    max-height: none;
+
+    padding: 4rem;
+
+    &__pet-name {
+      font-family: fonts.$primaryFont;
+
+      font-size: fonts.$lg;
+      font-weight: fonts.$semiBold;
+      line-height: 34px;
+
+      margin-top: 0.4rem;
+    }
+
+    &__pet-info {
+      font-family: fonts.$fourthFont;
+
+      font-size: fonts.$md;
+      font-weight: fonts.$regular;
+      line-height: 2;
+
+      margin-top: 0.2rem;
+    }
+
+    &__pet-desc {
+      display: block;
+
+      font-family: fonts.$fourthFont;
+      font-size: 1.6rem;
+      font-weight: fonts.$regular;
+      line-height: 24px;
+
+      margin-top: 3.6rem;
+    }
+
+    &__pet-avatar-image {
+      max-width: none;
+      max-height: none;
+
+      background: colors.$white;
+    }
+
+    &__divider {
+      height: auto;
+    }
+  }
+}

src/components/PetAvatar/index.js

@@ -11,14 +11,17 @@ const html = `
   </a>
 `;
 
-export default function PetAvatar({ id, title, imgSrc, imgAlt } = {}) {
+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);
 
+  const $title = this.selected.get('pet-title');
+  if (!title) $title.classList.add('hidden');
+
   if (routeLocation().pathname === `/petperfil/${id}`) {
     this.activate();
   }

src/components/PetAvatar/index.scss

@@ -45,6 +45,10 @@
       color: colors.$primary200;
       font-weight: fonts.$semiBold;
     }
+
+    &--hidden {
+      display: none;
+    }
   }
 
   &:hover {

src/components/PetGender/index.js

@@ -0,0 +1,30 @@
+import { Component } from 'pet-dex-utilities';
+import female from './images/femaleIcon.svg';
+import male from './images/maleIcon.svg';
+
+const events = [''];
+
+const html = `
+    <img class="pet-gender__img" data-select="pet-gender-icon"/>
+`;
+
+export default function PetGender({ gender = 'male' }) {
+  Component.call(this, { html, events });
+
+  if (gender === 'male') this.setGender('male');
+  if (gender === 'female') this.setGender('female');
+}
+
+PetGender.prototype = Object.assign(PetGender.prototype, Component.prototype, {
+  getGender() {},
+  setGender(gender) {
+    const icon = this.selected.get('pet-gender-icon');
+
+    if (gender === 'male') {
+      icon.src = male;
+    }
+    if (gender === 'female') {
+      icon.src = female;
+    }
+  },
+});