Form for adding pets

[sl1ked]

Enhance the Pets page by adding a form and improving the functionality of pet cards. The goal is to allow users to add pets dynamically, manage their properties, and move them between lists.

Requirements
Form Implementation

1. Location: Add the form to the bottom of the Pets page.
2. Fields: Include fields corresponding to all properties of the pet object. Use the appropriate input type for each property:

• Example: Use a select field for the breed property, with predefined breed options.
• Ensure field types align with their data (e.g., text, number, date).

5. Buttons:

• Add Button:
  -- Validates the form before submission.
  -- Adds the pet object to the pets list and displays it on the page.
• Clear Button: Add a Clear button that resets all form fields.

10. Validation:

• All fields are required.
• Text fields (e.g., name, description) should have a maximum length of 128 characters.
• Display validation errors next to the relevant field.

Pet Card Enhancements
Buttons:

• Add a Delete button to remove the pet from the list.
• Add an Adopted button to:
  -- Move the pet to a separate "Adopted Pets" list.
  -- Remove the pet from the main list.

Dynamic Rendering: Ensure changes to the lists are immediately reflected on the UI.