devhatt / pet-dex-frontend

35 stars 45 forks source link

Criar o componente Add Pet Page #229

Closed DominMFD closed 2 months ago

DominMFD commented 4 months ago

Describe the feature Criar o componente que será responsável pela adição do Pet. Esse componente deve ser o pai de todos os componentes que compõem as etapas de adição de pet.

Description A página de adição de pet importa todas as etapas de adição de pet, adicionando o progress, o visual clue da etapa e o titulo da página.


Use Case Quando o usuário clicar em `adicionar pet` essa página irá abrir e haverá um sliding entre cada etapa de adição de pet até a conclusão do formulário.


Implementation Details Usar o componente de sliding que **já existe** no projeto Usar o componente de Progress **já existente** no projeto Lembre-se de atualizar o estado do progress bar e da etapa atual (texto 1/9) de acordo com a troca do slide. Para essa página, deverá ser utilizado o margin negativo para sobrepor o padding da home, para que o componente de progress, e o footer, de concluir, fique sobreposto em toda a tela Não se esqueça de criar uma variável do valor do padding e de utilizá-la, para que seja utilizada também no margin negativo e facilite a manutenção ![image](https://github.com/devhatt/pet-dex-frontend/assets/134434652/dc17cf00-2765-438a-ae42-2f171ed48b4c) ![image](https://github.com/devhatt/pet-dex-frontend/assets/134434652/7fa69754-9194-4cdd-91e0-2341c97d5687)


Visual Concepts Em vermelho é o conteúdo que o AddPetPage possuirá. Em azul é o conteúdo importado de uma etapa do AddPetPage, esse conteúdo será trocado de acordo com a etapa que o usuário está do `slider` ![image](https://github.com/devhatt/pet-dex-frontend/assets/13935760/f1cb9fa7-791d-4a82-aee2-18d970ca5024)


Additional Information Lembre-se de seguir o figma!
Alecell commented 4 months ago

Obrigado por abrir a issue

Verifique os nossos guidelines:

juliaam commented 2 months ago

Eu quero!!!