[Tree Details - Design Implementation V1] Create tabs component and break out content

[mwpark2014]

Quick Summary

Create tabs component and break out content into All, Maintenance, Information, C02 Calculation and History tabs.

Issues:

There is quite a lot of information for one tree from information, tree history, maintenance history, C02 calculations, and more that will be implementing. This will help solve the issue of scrolling by creating a "shortcut" for users to use.

Goal(s)

1. Make the tabs
2. Give the tabs a function to where the appropriate section will scroll up for the user to see without scrolling. (The idea is to ignore the independent section, and to just have the tree details not have separate sections yet)
3. Have it swipeable or scrollable both desktop and mobile
4. Have it work for both desktop and mobile
5. Create independent sections per tag for each tree

Get Started:

Get started with our onboarding, https://github.com/waterthetrees/waterthetrees/wiki/Onboarding and read through the epic for relevant details of this ticket. #433

• User should be able to click into one of the header tabs to navigate to the Maintenance/Information/History pages. Hold off on the photos tab since it is not implemented yet. Will need to be swipe able on mobile.
• For desktop, will need to add an arrow to scroll through to other sections.

Links

https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085&t=uBOm5K6iZtf75UVa-0