feat: Add extra data to single detail page

Author: markgoetz

src/app/components/SinglePropertyDetail.tsx

@@ -16,11 +16,11 @@ const SinglePropertyDetail = ({
   const { properties } = property;
   if (!properties) return null;
 
-  const { address, priority_level, guncrime_density, OPA_ID } = properties;
+  const { access_process, address, tree_canopy_gap, neighborhood, owner_1, owner_2, priority_level, guncrime_density, zipcode, OPA_ID } = properties;
   const image = `https://storage.googleapis.com/cleanandgreenphilly/${OPA_ID}.jpg`;
 
   return (
-    <div className="max-w-sm w-full md:w-1/2 p-4">
+    <div className="w-full p-4">
       <Button onClick={() => setSelectedProperty(null)}> Back </Button>
       <div className="bg-white rounded-lg overflow-hidden">
         <div className="relative h-48 w-full rounded-lg overflow-hidden">
@@ -32,13 +32,60 @@ const SinglePropertyDetail = ({
           />
         </div>
         <div className="p-4">
-          <div className="font-bold text-xl">{address}</div>
-          <div className="text-gray-700 mb">{`Guncrime Density: ${guncrime_density}`}</div>
+          <h2 className="font-bold text-2xl">{address}</h2>
         </div>
-        <div className="px-4 pb-2">
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-            {priority_level}
-          </span>
+        <div className="flex">
+          <div className="p-2">
+            <table>
+            <tbody>
+              <tr>
+                <th className="text-left font-normal">Neighborhood</th>
+                <td>{neighborhood}</td>
+              </tr>
+              <tr>
+                <th className="text-left font-normal">Gun Crime Rate</th>
+                <td>{guncrime_density}</td>
+              </tr>
+              <tr>
+                <th className="text-left font-normal">Drug Crime</th>
+                <td>???</td>
+              </tr>
+              <tr>
+                <th className="text-left font-normal">Tree Canopy Gap</th>
+                <td>{tree_canopy_gap}</td>
+              </tr>
+              <tr>
+                <th className="text-left font-normal">Suggested Priority</th>
+                <td>{priority_level}</td>
+              </tr>
+              <tr>
+                <th className="text-left font-normal">L&I Violations</th>
+                <td>???</td>
+              </tr>
+              <tr>
+                <th className="text-left font-normal">Tax delinquency</th>
+                <td>???</td>
+              </tr>
+              <tr>
+                <th className="text-left font-normal">Acquisition Process</th>
+                <td>{access_process}</td>
+              </tr>
+              <tr>
+                <th className="text-left font-normal">Zip Code</th>
+                <td>{zipcode}</td>
+              </tr>
+            </tbody>
+            </table>
+          </div>
+          <div className="p-2">
+            <h3 className="pb-1 font-bold text-lg">Owner</h3>
+            <div className="pb-2">
+              <p>{owner_1}</p>
+              <p>{owner_2}</p>
+            </div>
+            <h3 className="pb-1 font-bold text-lg">Relevant Info</h3>
+            <p className="pb-2">weeeee</p>
+          </div>
         </div>
       </div>
     </div>