Merge pull request #60 from mearashadowfax/add-tables

Add table display for specifications

src/content/config.ts

@@ -46,6 +46,12 @@ const productsCollection = defineCollection({
         subTitle: z.string(),
       })
     ).optional(),
+    tableData: z.array(
+      z.object({
+        feature: z.array(z.string()),
+        description: z.array(z.array(z.string())),
+      })
+    ).optional(),
     blueprints: z.object({
       first: image().optional(),
       second: image().optional(),

src/content/products/a765.md

@@ -1,6 +1,6 @@
 ---
 title: "SF-AB A765"
-description: "Assorted Screw Set" 
+description: " " 
 main:
   id: 2
   content: |
@@ -40,15 +40,14 @@ specificationsLeft:
     subTitle: "Each set includes a sufficient quantity of screws to handle a wide range of projects and tasks."
   - title: "Sizes"
     subTitle: "Available in various sizes to suit different project requirements, ensuring compatibility and versatility."
-specificationsRight:
-  - title: "Thread Design"
-    subTitle: "Precision-engineered threads ensure a tight and secure fit, providing reliable fastening for your projects."
-  - title: "Durability"
-    subTitle: "Designed to withstand the rigors of everyday use, delivering long-lasting performance and reliability."
-  - title: "Quality Assurance"
-    subTitle: "Manufactured to meet or exceed industry standards, guaranteeing consistent quality and performance."
-  - title: "Applications"
-    subTitle: "Suitable for a wide range of applications, including woodworking, metalworking, construction, and more."
+tableData:
+  - feature: ["Specification", "Value"]
+    description:
+      - ["Length (mm)", "Various"]
+      - ["Weight (g)", "N/A"]
+      - ["Material", "Stainless Steel"]
+      - ["Finish", "Assorted"]
+      - ["Package Contents", "Various screws in a set"]
 blueprints:
   first: "@/images/blueprint-1.avif"
   second: "@/images/blueprint-2.avif"

src/pages/products/[...slug].astro

@@ -148,9 +148,10 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
                 ))
               }
             </div>
-            <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
             {
-                product.data.specificationsRight?.map((spec) => (
+              product.data.specificationsRight ? (
+                <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
+                  {product.data.specificationsRight?.map((spec) => (
                     <div>
                       <h3 class="block font-bold text-neutral-800 dark:text-neutral-200">
                         {spec.title}
@@ -159,9 +160,53 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
                         {spec.subTitle}
                       </p>
                     </div>
-                ))
-              }
+                  ))}
                 </div>
+              ) : product.data.tableData ? (
+                <div class="mt-6 space-y-6 md:ml-auto md:mt-0">
+                  <div class="flex flex-col">
+                    <div class="-m-1.5 overflow-x-auto">
+                      <div class="inline-block min-w-full p-1.5 align-middle">
+                        <div class="overflow-hidden">
+                          <table class="min-w-full divide-y divide-neutral-300 dark:divide-neutral-700">
+                            <thead>
+                              <tr>
+                                {product.data.tableData?.[0].feature?.map(
+                                  (header) => (
+                                    <th
+                                      scope="col"
+                                      class="px-6 py-3 text-start text-xs font-medium uppercase text-neutral-500 dark:text-neutral-500"
+                                    >
+                                      {header}
+                                    </th>
+                                  )
+                                )}
+                              </tr>
+                            </thead>
+                            <tbody class="divide-y divide-neutral-300 dark:divide-neutral-700">
+                              {product.data.tableData?.map((row) =>
+                                // Wrap each row's content in a separate <tr> element
+                                row.description.map((rowData) => (
+                                  <tr>
+                                    {/* Iterate through each cell value in the row's description array */}
+                                    {rowData.map((cellValue) => (
+                                      // Render each cell value in its own <td> element
+                                      <td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                                        {cellValue}
+                                      </td>
+                                    ))}
+                                  </tr>
+                                ))
+                              )}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : null
+            }
           </div>
         </div>
       </div>
@@ -199,7 +244,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
       </div>
     </div>
   </div>
-
+</MainLayout>
   <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
   <script>
     window.addEventListener("load", () => {
@@ -327,4 +372,3 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
       });
     });
   </script>
-</MainLayout>