diff --git a/src/app/treeTable/page.tsx b/src/app/treeTable/page.tsx index e5989ca..9573b00 100644 --- a/src/app/treeTable/page.tsx +++ b/src/app/treeTable/page.tsx @@ -1,3 +1,93 @@ +import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Box } from "@chakra-ui/react"; + export default function TreeTable() { - return
Will probably be made into a component later, but for now develop on /treeTable
; + // dummy tree data + const treeData = [ + { + collectorName: "Sydney Jones", + dateCollected: "2025-01-22", + contactInfo: "sjones@email.com", + gpsCoordinates: "34.0522, -118.2437", + photo: "tree1.jpg", + dbh: "15.3", + height: "25 ft", + canopyBreath: "20 ft", + species: "Valley Oak", + mistletoe: false, + epicormicGrowth: true, + deadWood: true, + oakPitScale: "no", + hangingItems: false, + additionalNotes: "Tree appears healthy overall.", + }, + { + collectorName: "Ryan Smith", + dateCollected: "2025-01-20", + contactInfo: "rsmith@example.com", + gpsCoordinates: "37.7749, -122.4194", + photo: "tree2.jpg", + dbh: "20.1", + height: "30 ft", + canopyBreath: "25 ft", + species: "Blue Oak", + mistletoe: true, + epicormicGrowth: false, + deadWood: false, + oakPitScale: true, + hangingItems: false, + additionalNotes: "Signs of stress due to drought.", + }, + ]; + + // tree table structure + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + {treeData.map((tree, index) => ( + + + + + + + + + + + + + + + + + ))} + +
Collector NameDate CollectedGPS CoordinatesPhotoDBH (inches)HeightTree Canopy BreadthSpeciesMistletoeEpicormic GrowthDead WoodOak Pit ScaleHanging ItemsAdditional Notes
{tree.collectorName}{tree.dateCollected}{tree.gpsCoordinates} + Tree + {tree.dbh}{tree.height}{tree.canopyBreath}{tree.species}{tree.mistletoe === true ? "Yes" : "No"}{tree.epicormicGrowth === true ? "Yes" : "No"}{tree.deadWood === true ? "Yes" : "No"}{tree.oakPitScale === true ? "Yes" : "No"}{tree.hangingItems === true ? "Yes" : "No"}{tree.additionalNotes}
+
+
+
+ ); }