[NOT READY] Trees Add New Tree Component #46
Description
Description
We’re kicking off Sprint 3 by starting the Trees page. This issue covers building the Trees table component that will power the table UI on src/app/trees/page.tsx.
You’ll be responsible for creating the Add New Tree popup component, matching the provided design. The component should live in src/components/. You should locally try “plugging in” your component to the Trees page to validate it renders correctly, but do not include page integration changes in your PR.
Submitting the form ("Add Tree" button) should actually create a new tree object. Use the Trees POST API request from #18. Include screenshots of the component and the newly added tree in the supabase.
Notes
- Make sure to run
git pullbefore any development work - Complete your development in a new branch
- Link this issue to your PR
- Feel free to reach out if you have any questions!
Acceptance Criteria
The component has the following fields
- ECOSLO #: number
- Date Planted: date
- Species: string
- (TODO) Common Name: string
- (TODO) Funder:
- Condition: dropdown with options "Healthy", "Fair", and "Poor"
- Status: dropdown with options "Active" and "Graduated"
- Address: string
- Latitude: string
- Longitude: string
- (TODO) Visibility:
- Name: string
- Phone: string
- Water Status: string
- Notes: string (should be a large text element like textarea instead of input)
Contains buttons to add or cancel the tree. The Add Tree button uses a POST request to create a new object.
Task
- Follow the Figma design for each of the form elements
- The Add Tree button submits form and creates a new Tree object
Additional Information
Keep the component flexible and maintainable, this will likely be reused across future pages.
Here is a link to the team's Figma. If you do not have access, please message Sean or Matthew to be added. We highly recommend that you reference the Figma to get the color values, font size/style, corner radius, etc. The "Design System" page will be useful for this.
