diff --git a/src/assets/shield.svg b/src/assets/shield.svg new file mode 100644 index 00000000..f7307ebb --- /dev/null +++ b/src/assets/shield.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/stethoscope.svg b/src/assets/stethoscope.svg new file mode 100644 index 00000000..c481b3f9 --- /dev/null +++ b/src/assets/stethoscope.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/vaccine.svg b/src/assets/vaccine.svg new file mode 100644 index 00000000..a22167a8 --- /dev/null +++ b/src/assets/vaccine.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/more-info/index.js b/src/components/more-info/index.js new file mode 100644 index 00000000..ffc863bb --- /dev/null +++ b/src/components/more-info/index.js @@ -0,0 +1,67 @@ +import './index.scss'; + +import { Component } from 'pet-dex-utilities'; +import InputText from '../TextInput/index'; + +const html = ` +
+
+

Conte-nos um pouco mais do seu animal

+

Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!

+
+
+
+ +

+
+
+
+ + +
+
+ + +
+
+
+
+
+
`; + +export default function CardPet() { + Component.call(this, { html }); + + CardPet.prototype = Object.assign(CardPet.prototype, Component.prototype, { + setImage(text) { + this.selected.get('more-info__icon').src = text; + }, + setTitle(text) { + this.selected.get('more-info__title').textContent = text; + }, + setQuestion(text) { + if (text === '' || null || undefined) { + this.selected.get('input_checkbox').style.display = 'none'; + } else { + this.selected.get('checkbox__name1').name = text; + this.selected.get('checkbox__name2').name = text; + } + }, + setInputObservation(text) { + if (text === '' || null || undefined) { + this.selected.get('input_text').style.display = 'none'; + } else { + const inputText = new InputText({ + placeholder: text, + variation: 'outlined', + }); + // eslint-disable-next-line no-console + console.log(inputText); + // eslint-disable-next-line prettier/prettier + this.selected.get('input_text').appendChild(inputText); + } + }, + }); +} diff --git a/src/components/more-info/index.scss b/src/components/more-info/index.scss new file mode 100644 index 00000000..b09a7e31 --- /dev/null +++ b/src/components/more-info/index.scss @@ -0,0 +1,94 @@ + .more-info-container { + max-width: 940px; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: #fff; + border-radius: 20px; + } + + .more-info-header{ + padding: 20px; + width: 100%; + align-items: center; + display: flex; + flex-direction: column; + gap: 20px; + &__title{ + font-size: 2rem; + color: #39434F; + } + &__sub-title { + color: #606873; + } + } + + .more-info-card { + max-width: 630px; + min-width: 630px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 20px; + &__description, + &__input-group{ + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + max-width: 46%; + } + } + + .label-check-radios{ + display: flex; + align-items: center; + gap: 5px; + } + .more-info-card__input-group__checkbox-group { + display: flex; + min-width: 60px; + gap: 20px; + } + + .more-info__card-text-group { + width: 100%; + + input { + width: 100%; + padding: 5px; + border: 0; + border-bottom: 1px solid #606873; + + &::placeholder { + line-height: 21px; + font-size: 0.875rem; + } + } + } + + + // apenas marcação uma task para o checkbos que não é minha + // Esconder o input radio + input[type='radio'] { + display: none; + } + + // Estilizar a aparência do label para se parecer com um checkbox + input[type='radio'] + label .checkmark { + display: inline-block; + width: 20px; + height: 20px; + border: 2px solid #999; + border-radius: 3px; + cursor: pointer; + } + + // Estilizar quando o input radio está selecionado + input[type='radio']:checked + label .checkmark { + background-color: #5649e4; + border-color: #5649e4; + color: #fff; + } + \ No newline at end of file diff --git a/src/components/more-info/questoes.json b/src/components/more-info/questoes.json new file mode 100644 index 00000000..f518dbd7 --- /dev/null +++ b/src/components/more-info/questoes.json @@ -0,0 +1,23 @@ +[ + { + "id": 1, + "img": "assets/stethoscope.svg", + "title": "O seu pet amigo foi castrado?", + "nameQuestion": "castrado", + "observation": "" + }, + { + "id": 2, + "img": "assets/shield.svg", + "title": "Precisa de cuidados especiais?", + "nameQuestion": "cuidado", + "observation": "" + }, + { + "id": 3, + "img": "assets/vaccine.svg", + "title": "O seu pet amigo foi castrado?", + "nameQuestion": "", + "observation": "" + } +] diff --git a/src/home/index.scss b/src/home/index.scss index 9ea4e0c8..54f982e9 100644 --- a/src/home/index.scss +++ b/src/home/index.scss @@ -1,6 +1,11 @@ @use '../styles/base.scss'; +body{ + background-color: #003459; +} .home-main-container { display: flex; + justify-content: center; gap: 1rem; + margin: 100px auto; } diff --git a/src/home/main.js b/src/home/main.js index afc5d344..0a0e3ae2 100644 --- a/src/home/main.js +++ b/src/home/main.js @@ -1,30 +1,44 @@ -import { extractElements } from 'pet-dex-utilities'; -import Card from '../components/Card'; import './index.scss'; -function renderCards(qty, $container) { - for (let i = 0; i < qty; i += 1) { - const card = new Card(); - card.mount($container); - card.setTitle(`Card ${i}`); - card.listen('purchase', () => { - console.log(`purchase de quem usa o componente, esse é o card ${i}`); - }); - - const $card = card.selected.get('card-button'); - - if (i === 2) { - card.disable(); - $card.classList.add('card-container__button--disabled'); - } else { - $card.classList.add('card-container__button--active'); - } - } +import { extractElements } from 'pet-dex-utilities'; + +// import Card from '../components/Card'; +import CardPet from '../components/more-info'; + +// function renderCards(qty, $container) { +// for (let i = 0; i < qty; i += 1) { +// const card = new Card(); +// card.mount($container); +// card.setTitle(`Card ${i}`); +// card.listen('purchase', () => { +// console.log(`purchase de quem usa o componente, esse é o card ${i}`); +// }); + +// const $card = card.selected.get('card-button'); + +// if (i === 2) { +// card.disable(); +// $card.classList.add('card-container__button--disabled'); +// } else { +// $card.classList.add('card-container__button--active'); +// } +// } +// } + +function renderCardMoreInfo($container) { + const cardPet = new CardPet(); + cardPet.mount($container); + cardPet.setImage('../assets/stethoscope.svg'); + cardPet.setTitle('O seu pet amigo foi castrado?'); + cardPet.setQuestion('castrado'); + cardPet.setInputObservation('Escreva o cuidado especial'); } document.addEventListener('DOMContentLoaded', () => { const selected = extractElements([document.body]); const $container = selected.get('container'); + // const $container2 = selected.get('container2'); - renderCards(5, $container); + // renderCards(5, $container); + renderCardMoreInfo($container); });