feat(listing): semi-fleshed out details

crystalcheong · Feb 25, 2023 · 9dcb01d · 9dcb01d · vercel · Feb 25, 2023
1 parent 82922ee
commit 9dcb01d
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/src/data/clients/ninetyNine.ts b/src/data/clients/ninetyNine.ts
@@ -35,6 +35,7 @@ export type Listing = {
   address_name: string;
   main_category: ListingCategory;
   sub_category_formatted: string;
+  date_formatted: string;
   attributes: Record<string, string | number>;
   tags: string[];
   cluster_mappings: Record<string, string[]>;

diff --git a/src/pages/property/[type]/[id].tsx b/src/pages/property/[type]/[id].tsx
@@ -127,6 +127,36 @@ const PropertyPage = ({ id, type, clusterId, isValidProperty }: Props) => {
   const PRIMARY_COL_HEIGHT = 300;
   const SECONDARY_COL_HEIGHT = PRIMARY_COL_HEIGHT / 2 - theme.spacing.md / 2;
 
+  const details: {
+    label: string;
+    attribute: string;
+  }[] = [
+    {
+      label: `Price/sqft`,
+      attribute: `${listing?.attributes?.area_ppsf_formatted ?? "$-.-- psf"}`,
+    },
+    {
+      label: `Built year`,
+      attribute: `${listing?.attributes?.completed_at ?? "----"}`,
+    },
+    {
+      label: `No. of Bedrooms`,
+      attribute: `${listing?.attributes?.bedrooms ?? "--"}`,
+    },
+    {
+      label: `Tenure`,
+      attribute: `${listing?.attributes?.tenure ?? "--"}`,
+    },
+    {
+      label: `Property type`,
+      attribute: `${listing?.sub_category_formatted ?? "--"}`,
+    },
+    {
+      label: `Last updated`,
+      attribute: `${listing?.date_formatted ?? "--"}`,
+    },
+  ];
+
   return (
     <Layout.Base
       layoutStylesOverwrite={{
@@ -197,7 +227,7 @@ const PropertyPage = ({ id, type, clusterId, isValidProperty }: Props) => {
                 wordBreak: "break-word",
               }}
             >
-              {listing?.sub_category_formatted}
+              {listing?.attributes?.bedrooms_formatted}
               &nbsp;in&nbsp;{listing?.address_name}
             </Title>
             <Title
@@ -209,6 +239,34 @@ const PropertyPage = ({ id, type, clusterId, isValidProperty }: Props) => {
             </Title>
           </Group>
 
+          <SimpleGrid
+            cols={2}
+            spacing="xl"
+            breakpoints={[
+              { maxWidth: "md", cols: 2, spacing: "lg" },
+              { maxWidth: "xs", cols: 1, spacing: "sm" },
+            ]}
+          >
+            {details.map(({ label, attribute }) => (
+              <Group
+                position="apart"
+                key={`detail-${label}`}
+              >
+                <Text
+                  component="p"
+                  weight={700}
+                  py={0}
+                  sx={{
+                    lineHeight: 0,
+                  }}
+                >
+                  {label}
+                </Text>
+                <Text>{attribute}</Text>
+              </Group>
+            ))}
+          </SimpleGrid>
+
           {listing && (
             <Group position="apart">
               <EnquiryButtonGroup listing={listing} />